Images défilant verticalement (scrolling images)

Soyez le premier à donner votre avis sur cette source.

Vue 10 822 fois - Téléchargée 1 250 fois

Description

Nouvelle version.

Quelques lignes en JavaScript suffisent pour introduire dans votre site web des images défilant verticalement.
La zone contenant ces images peut être librement placée et dimensionnée.

Toutes les images ont la même dimension.

On peut choisir le nombre d'images et de l'espace entre les images.
La vitesse de défilement dépend des variables 'tim' et 'pas'.

Il est possible d'associer une action au "click" sur une image: l'exemple proposé ouvre une page correspondant à l'image.

L'exemple proposé est rudimentaire pour bien mettre en évidence les notions utilisées.
Adaptez et introduisez-le à votre propre site !

Cette nouvelle version est une simplification de l'ancienne. De plus, la zone des images défilantes peut être plus librement placée et dimensionnée.

Source / Exemple :


<!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</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 dIm=6;   // espace en pixels entre les images défilantes
      var hZn=600; // hauteur de la zone des images défilantes
      var pas=2;   // décalage des images à chaque appel à la fonction Nxt
      
      var tmr,nIm=pag.length; // timer et nombre d'images
      var hTt=nIm*(hIm+dIm);  // hauteur totale des images
      var yNx=hIm;            // est décrémenté de 'pas' à chaque appel à Nxt

      function Nxt() {
         var i,y=yNx;
         for (i=0; i < nIm; i++){
            if (y-hIm <= hZn) document.getElementById('im'+i).style.top=(y-hIm)+'px';
            if ((y += hIm+dIm) >= hTt) y -= hTt;
         }
         if ((yNx -= pas) < 0) yNx += hTt;
      }
      
      function Clk(i) { // à remplacer par vos propres 'actions'
         window.open('Pag/'+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:0px; top:9999px; cursor: pointer;' src='Img/"+pag[i]+".jpg'/>";
         e.style.width=wIm+'px'; e.style.height=hZn+'px'; e.innerHTML=s;
         // les 3 lignes suivantes ne sont pas indispensables
         s="Selection par le nom:";
         for (i=0; i < nIm; i++) s += "<br/><a href='Pag/"+pag[i]+".html'>"+pag[i]+"</a>";
         window.document.getElementById('lsN').innerHTML=s;         
      }
   //]]>
   </script>
</head>

<body style='background-color:#BBBBBB;' onload='Ini(); tmr=setInterval("Nxt()",tim);'>
   <div id='imd' style='position:absolute; left:90px; top:30px; overflow:hidden;'
      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:216px; padding:400px 6px 6px 6px; background-color:#CCCCCC;'>
      <hr />Obtenez<br/>les<br/>exemples<br/>complets<br/>horizontal<br/>et<br/>vertical:<br/><br/> &nbsp;
      <a href='http://www.william-voirol.ch/Prog/ImagesDefilantes/Ligne.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/> &nbsp;
         <a href='http://www.william-voirol.ch'>Splendeur de l'Inde</a>
      </p>
      <hr />
      <p style='font-size:24px;'><br/>Images défilant verticalement</p>
      <p>
         -  Nouvelle version (27 juillet 2011).<br/>
         -  La zone des images défilantes peut être placée librement.<br/>
         -  Toutes les images ont la même dimension.<br/>
         -  Choix du nombre d'images et de l'espace entre les images.<br/>
         -  La vitesse de défilement dépend des variables 'tim' et 'pas'.<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/>
            &nbsp; &nbsp; &nbsp; l'exemple proposé ouvre une page correspondant à l'image.
      </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>

Conclusion :


Peut-on faire plus simplement ?

Faites directement un test:
http://www.william-voirol.ch/Prog/ImagesDefilantes/Ligne/horizontal.html
http://www.william-voirol.ch/Prog/ImagesDefilantes/Ligne/vertical.html

Remarque: de temps en temps, des espaces (caractères blancs) s'immiscent dans certains textes. (CodeS- SourceS est au courant du problème).
Si c'était le cas ici, enlevez les espaces avant d'utiliser les adresses Web ci-dessus.

Le programme proposé devrait fonctionner avec tous les navigateurs courants.

Deux exemples (horizontal et vertical) avec quelques images se trouve sur le fichier zip.

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
261
Date d'inscription
mardi 12 décembre 2006
Statut
Membre
Dernière intervention
10 juin 2019

Bonjour,

Sur mon site
http://www.william-voirol.ch/Prog/
une nouvelle version est installée depuis une année.
Malheureusement, j'ai oublié de mettre à jour certains codes de Codes-SourceS.

Voilà qui est fait.

Milles excuses …
Messages postés
98
Date d'inscription
dimanche 22 janvier 2006
Statut
Membre
Dernière intervention
24 juillet 2013

Bonjour tous

Bien joué william voirol.
Si en plus tu fais aussi en horyzontal ce sera complet ;)
Messages postés
6
Date d'inscription
samedi 13 mai 2006
Statut
Membre
Dernière intervention
18 décembre 2012

génial, je viens de l'adapter pour faire une fenêtre déroulante.
Merci.
Je vais la mettre en ligne en janvier sur mon site.
Pour rajouter un élément de présentation, quelqu'un sait-il comment on peut accrocher une infobulle à chaque image?
Messages postés
261
Date d'inscription
mardi 12 décembre 2006
Statut
Membre
Dernière intervention
10 juin 2019

Bonjour,

J'ai repris mon code pour essayer d'éviter d'utiliser des valeurs tels que
- window.innerHeight
- document.documentElement.clientHeight
qui dépendent du navigateur.

Je suis arrivé à une solution nettement plus simple et plus conviviale:
- On peut définir librement la position et la hauteur
de la zone des images défilantes (div: id='imd').
- Le défilement s'arrête lorsqu'on survole la zone avec la souris.
- Le nom de l'image s'affiche lorsque qu'on la survole.

Merci pour toutes vos remarques et successions.

Test direct:
http://www.william-voirol.ch/TP/Images%20defilant%20verticalement

Prochainement, je ferai une mise à jour du code source
(également pour le défilement horizontal).

William
Messages postés
16
Date d'inscription
vendredi 27 avril 2007
Statut
Membre
Dernière intervention
16 décembre 2008

Bonjour,

Aucunes remarques à faire, je note simplement le travail fourni.

Bonne continuation !!!
Afficher les 8 commentaires

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.