Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120481 Diaporama horizontal | | Coucou Voici un script pour vous aidez à faire un diaporama horizontal. Une autre manière de faire défiler des images est de simuler une visualisation 3D en "collant" les images sur un cylindre (à base de polygone régulier) que l'on fait "tourner". - Code:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Images défilant verticalement sur un cylindre</title> <script type="text/javascript"> //<![CDATA[ var pag=["Aihole","Badami","Belur","Halebid","Hampi","Haveri","Lakkundi","Pattadakal","Somnathpur"]; var tim=50; // temps de pause en millisecondes entre les appels à Nxt var wIm=160; // largeur en pixels des images var hIm=120; // hauteur en pixels des images var nPn=9; // nombre de pans du cylindre (nPn>=2) var npP=40; // nombre de pas par pan; var pad=6; // padding de la zone des images défilantes var tmr,nIm=pag.length; // timer, nombre d'images nIm>=nIv var nIv=Math.floor((nPn+1)/2); // nombre d'images visibles var A=2*Math.PI/nPn,E=A/npP; // angle (en rad) par pan et par pas var D=Math.floor((hIm+2)/Math.sin(A/2)); // diamètre (en pixels) du cylindre var R=D/2; // rayon (en pixels) du cylindre var cosA=Math.cos(A),sinA=Math.sin(A),cosE=Math.cos(E),sinE=Math.sin(E); var iIm=nIm-nIv,iE=0,uA0=R*Math.cos(-A/2),vA0=R*Math.sin(-A/2),uA=uA0,vA=vA0;
function Nxt() { var i,k=iIm,u=uA,v=vA,uu,h,st,r=R+pad; for (i=0; i<nIv; i++){ uu=u; u=uu*cosA-v*sinA; v=uu*sinA+v*cosA; // rotation(A) h=(uu>u+2)?uu-u-2:0; st=document.getElementById('im'+k).style; st.top=(r+u)+'px'; st.height=h+'px'; st.opacity=h/hIm; if (--k<0) k=nIm-1; } u=uA; uA=cosE*u-sinE*vA; vA=sinE*u+cosE*vA; // rotation(E) if (++iE>=npP) { iE=0; uA=uA0; vA=vA0; if (++iIm>=nIm) iIm=0; } } function Clk(i) { // à remplacer par vos propres 'actions' window.open('PagVertical/'+pag[i]+'.html','_self','',''); } function Ini() { // dans body, ajustez également la position absolue du div:id='imd' var i, s='', e=document.getElementById('imd'); for (i=0; i < nIm; i++) s += "<img id='im"+i+"' onclick='Clk("+i+")' title='" +pag[i]+"' style='position:absolute; left:"+pad+"px; height:0; width:"+wIm +"px; cursor:pointer' src='ImgVertical/"+pag[i]+".jpg'/>"; e.style.width=(2*pad+wIm)+'px'; e.style.height=(2*pad+D)+'px'; e.innerHTML=s; tmr=setInterval('Nxt()',tim); // les 3 lignes suivantes ne sont pas indispensables s="<span style='color:red;'>Selection par le nom:</span>"; for (i=0; i < nIm; i++) s += "<br/><a href='PagVertical/"+pag[i]+".html'>"+pag[i]+"</a>"; window.document.getElementById('lsN').innerHTML=s; } //]]> </script> </head>
<body style='background-color:#BBBBBB' onload='Ini()'> <div id='imd' style='position:absolute; left:70px; top:35px; background-color:#444444' onmouseover='clearInterval(tmr)' onmouseout='tmr=setInterval("Nxt()",tim)'> </div> <!-- la suite n'est pas indispensable et sert juste d'exemple --> <div style='float:left; width:99px; height:160px; padding:400px 6px 6px 6px; background-color:#CCCCCC;'> <hr />Obtenez<br/>les exemples<br/>complets:<br/>horizontal<br/>et vertical:<br/><br/> <a href='http://www.william-voirol.ch/Prog/ImagesDefilantes/Cylindre.zip'>Zip</a> </div> <div style='margin-left:260px;'> <!-- ajustez éventuellement la valeur margin-left --> <p style='font-size:18px; color:blue;'>Quelques temples du Karnataka en Inde</p> <div id='lsN' style='width:160px; height:110px; background-color:#FFFFDD; padding-left:4px; overflow:auto; margin-left:80px;'></div> <!-- contient la liste de noms --> <p style='color:green;'> <br/>Les temples de l'Inde vous intéressent ? :<br/> <a href='http://www.william-voirol.ch'>Splendeur de l'Inde</a> </p> <hr /> <p style='font-size:24px;'><br/>Images défilant verticalement sur un cylindre</p> <p> - Choix du nombre d'images et du nombre de pans 'nPn' du cylindre.<br/> - La zone des images défilantes peut être placée librement.<br/> - Sa hauteur dépend de la hauteur des images et de 'nPn'.<br/> - Dans l'exemple nPn=9; essayez d'autres valeurs, en particulier 2.<br/> - La vitesse de défilement dépend des variables 'tim' et 'npP'.<br/> - Le mouvement s'arrête lorsque la souris survole les images.<br/> - Il est possible d'associer une action au "click" sur une image:<br/> l'exemple propose l'ouvertue d'une nouvelle page. </p> <p style='color:red;'> Testé avec les navigateurs:<br/> Internet Explorer 8 et 9, Firefox 5, Navigator 9,<br/> Google Chrome 11, Opera 11, Safari 5. </p> </div> </body> </html> |
| |
RectangletopsMessages : 226 Venue : 27/03/2011 Je suis : Age : 70 Je vie à : Belgique Humeur : Bonne souvent. Mes Points : 95866 Re: Diaporama horizontal | | Bonjour, ce code ce place ou ? |
| |
Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120481 Re: Diaporama horizontal | | Coucou Soit sur une nouvelle page Html Ou entre head prendre à partir d'ici le - Code:
-
<head> <title>Images défilant verticalement sur un cylindre</title> et entre - Code:
-
</body> Amicalement |
| |