Soyez le premier à donner votre avis sur cette source.
Snippet vu 5 683 fois - Téléchargée 17 fois
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-fr" lang="fr-fr"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> #caroussel_backdiv{ width:550px; height:220px; } #caroussel_case{ display:block; border:1px #A0A0A0 solid; height:50px; width:110px; } #caroussel_textfield { background-image:url('backfield.png'); width:540px; height:100px; position:absolute; bottom:3px; right:5px; } #caroussel_title { color:#FFC600; font-size:22px; font-weight:bold; margin-top:3px; margin-left:10px; } #caroussel_step { color:#dddddd; font-size:22px; float:right; } #caroussel_text { color:#dddddd; font-size:18px; margin-top:5px; margin-left:10px; } .change_step { cursor:pointer; color:#404040; font-size:22px; float:right; } </style> <head> <body id="caroussel_backdiv"> <script type="text/javascript"> var tumbd = new Array(); var back = new Array(); var tittle = new Array(); var text = new Array(); var link = new Array(); //variables de paramettrage var max=4;//nombre maximum de sujets var space=9;//temps d'attente par rotation en secondes //déclaration sujet 1 tumbd[1]="tumbd1.png"; back[1]="back1.jpg"; tittle[1]="tit 1"; text[1]="txt1"; link[1]="#"; tumbd[2]="tumbd2.png"; back[2]="back2.png"; tittle[2]="tit 2"; text[2]="txt 2"; link[2]="#"; tumbd[3]="tumbd3.png"; back[3]="back3.png"; tittle[3]="tit 3"; text[3]="txt 3"; link[3]="#"; tumbd[4]="tumbd4.png"; back[4]="back4.png"; tittle[4]="tit 4"; text[4]="txt 4"; link[4]="#"; //variables var nodiv=0; var rotatio=true; var timer; function changetitle(notumbd) { if(notumbd>max) notumbd=1; if(notumbd<1) notumbd=max; document.getElementById("caroussel_backdiv").style.background = "url("+back[notumbd]+") no-repeat"; document.getElementById("caroussel_title").innerHTML = tittle[notumbd]; document.getElementById("caroussel_text").innerHTML = text[notumbd]; document.getElementById("caroussel_step").innerHTML = notumbd+"/"+max; document.getElementById("caroussel_case").style.background = "url("+tumbd[notumbd]+")"; document.getElementById("caroussel_case").href = link[notumbd]; } function switchdiv() { if(rotatio==true) { nodiv = nodiv + 1; if(nodiv>max)nodiv=1; changetitle(nodiv); timer=setTimeout('switchdiv()',space*1000); } } function next() { clearTimeout(timer); rotatio=false; nodiv = nodiv + 1; if(nodiv>max)nodiv=1; changetitle(nodiv); rotatio=true; timer=setTimeout('switchdiv()',space*1000); } function prev() { clearTimeout(timer); rotatio=false; nodiv = nodiv - 1; if(nodiv<1)nodiv=max; changetitle(nodiv); rotatio=true; timer=setTimeout('switchdiv()',space*1000); } </script> <div id="caroussel_textfield"> <div style="display:inline;"> <span id="caroussel_title" ></span> <a class="change_step" onclick="next();">►</a> <span id="caroussel_step"></span> <a class="change_step" onclick="prev();">◄</a> </div> <table><tbody><tr><td style="vertical-align:middle;height:87px;"> <a id="caroussel_case" href="" target="_parent"></a> </td><td> <p id="caroussel_text"> </p> </td></tr></tbody></table> </div> <script type="text/javascript"> //initialisation du caroussel document.getElementById("caroussel_step").innerHTML = "1/"+max; document.getElementById("caroussel_backdiv").style.background = "url("+back[1]+") no-repeat"; document.getElementById("caroussel_title").innerHTML = tittle[1]; document.getElementById("caroussel_text").innerHTML = text[1]; document.getElementById("caroussel_case").style.background = "url("+tumbd[1]+")"; document.getElementById("caroussel_case").href = link[1]; var i;var j=0;var imag=new Array(); //préchargement des images suivant les premières for(i=2;i<=max;i++) { imag[j] = new Image; imag[j].src = tumbd[i]; imag[j+1] = new Image; imag[j+1].src = back[i]; j = j + 2; } //démarage du script de rotation switchdiv(); </script> </body> </html>
2 août 2011 à 17:37
2 août 2011 à 16:59
2 août 2011 à 10:51
24 juil. 2011 à 22:56
24 juil. 2011 à 21:53
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.