begin process at 2012 05 28 10:36:30
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Trucs Amusants

 > IMAGES DÉFILANT VERTICALEMENT (SCROLLING IMAGES)

IMAGES DÉFILANT VERTICALEMENT (SCROLLING IMAGES)


 Description

Vu l'intérêt suscité par les "Images défilantes", et aussi pour répondre à quelques questions, remarques ou observations, je propose  ici un "truc amusant" directement dérivé du précédant.

Pour passer de l'horizontal au vertical, j'ai fait principalement les "échanges" suivants:
  xIma ==> yIma, dx ==> dy,xx ==> yy, w ==> h, top ==> left

Pour réaliser une subdivision verticale de la page principale, j'utilise deux <div>:
a)  Le premier (id='imd') contient les images défilantes (dont la position absolue sera modifiée par la fonction Nxt).
b)  Le second est décalé du bord gauche avec "margin-left" et comporte en fait toute la page principale (à part les images défilantes).

Pour éviter l'apparition saccadée de la barre de défilement, on peut ajouter
   style='overflow:hidden;'    dans   <body>

Je vous laisse aussi découvrir les autres "variantes" utilisées.

L'exemple peut être directement visualisé sous
  http://www.william-voirol.ch/TP/Images defilant verticalement/

Source

  • <!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" lang="en" 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 nIma=pag.length; // nombre d'images
  • var yIma=120; // hauteur des images
  • var dy=6; // espace entre les images défilantes
  • var lft=10; // espace à gauche des images
  • var yy=dy; // position de la première image
  • var pas=2; // décalage des images à chaque appel à la fonction Nxt()
  • var tim=50; // temps de pause en millisecondes entre les appels à Nxt()
  • var iIma=0,ima=new Array(nIma);
  • function Nxt() {
  • if ((yy-=pas) <= -yIma) {
  • ima[iIma++].style.display='none';
  • if (iIma >= nIma) iIma=0;
  • yy=dy;
  • }
  • var y=yy,i=iIma,s,h=window.innerHeight;
  • if (!h) h=document.documentElement.clientHeight;
  • while (y < h) {
  • s=ima[i++].style; s.top=y+'px'; s.display='block';
  • y+=yIma+dy;
  • if (i >= nIma) i=0;
  • }
  • }
  • function Clk(i) { // à remplacer par vos propres 'actions'
  • window.open('Pag/'+pag[i]+'.html'); // adaptez les autres paramètres d'open
  • // UNIX est sensible aux majuscules/minuscules pour les noms de fichier!
  • }
  • function Ini() {
  • var i=0,s='';
  • while (i < nIma) s+="<img id='im"+i // images défilantes
  • +"' style='position:absolute; left:"+lft+"px; display:none' src='Img/"
  • +pag[i]+".jpg' onclick='javascript:Clk("+(i++)+")'/>";
  • window.document.getElementById('imd').innerHTML = s;
  • i=0; s="Selection par le nom:";
  • while (i < nIma) {
  • s+="<br /><a href='Pag/"+pag[i]+".html'>"+pag[i]+"</a>";
  • ima[i]=window.document.getElementById('im'+i++);
  • }
  • window.document.getElementById('spn').innerHTML=s;
  • }
  • //]]>
  • </script>
  • </head>
  • <body onload="Ini(); setInterval('Nxt()',tim);" style='overflow:hidden;'>
  • <div id='imd'></div> <!-- div pour "enregistrer" les images défilantes -->
  • <div style='margin-left:175px;'> <!-- ajustez éventuellement la valeur 175 -->
  • <p style='font-size:18px; color:blue;'>
  • Quelques temples du Karnataka en Inde
  • </p>
  • <p style='color:red;'><br />«-- Cliquez sur une image !</p>
  • <div id='spn' style='width:160px; height:110px; background-color:yellow; color:red;
  • overflow:auto; margin-left:125px; padding:0px 0px 0px 4px;'></div>
  • <p style='color:green;'>
  • <br />Les temples de l'Inde vous intéressent ? : &nbsp;
  • <a href='http://www.william-voirol.ch'>Splendeurs de l'Inde</a>
  • </p>
  • <hr />
  • <p style='font-size:24px;'><br />Images défilant verticalement</p>
  • <p>
  • - Toutes les images ont la même dimension.<br />
  • - Choix du nombre d'images et de l'espace entre les images.<br />
  • - Le nombre d'images traitées s'adapte à la hauteur de la fenêtre.<br />
  • - La vitesse de défilement dépend des variables 'tim' et 'pas'.<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.
  • <br /><br />Téléchargez l'exemple complet: &nbsp;
  • <a href='http://www.william-voirol.ch/TP/Images defilant verticalement.zip'>Zip</a>
  • </p>
  • <p style='color:red;'>
  • Testé avec les navigateurs:<br />
  • Internet Explorer 8 et 9, Firefox 4, Navigator 9,<br />
  • Google Chrome 11, Opera 11, Safari 5.
  • </p>
  • </div>
  • </body>
  • </html>
<!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" lang="en" 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 nIma=pag.length; // nombre d'images
      var yIma=120; // hauteur des images
      var dy=6;     // espace entre les images défilantes
      var lft=10;   // espace à gauche des images
      var yy=dy;    // position de la première image
      var pas=2;    // décalage des images à chaque appel à la fonction Nxt()
      var tim=50;   // temps de pause en millisecondes entre les appels à Nxt()
      var iIma=0,ima=new Array(nIma);
      
      function Nxt() {
         if ((yy-=pas) <= -yIma) {
            ima[iIma++].style.display='none';
            if (iIma >= nIma) iIma=0;
            yy=dy;
         }
         var y=yy,i=iIma,s,h=window.innerHeight;
         if (!h) h=document.documentElement.clientHeight;
         while (y < h) {
            s=ima[i++].style; s.top=y+'px'; s.display='block';
            y+=yIma+dy;
            if (i >= nIma) i=0;
         }
      }
      
      function Clk(i) { // à remplacer par vos propres 'actions'
         window.open('Pag/'+pag[i]+'.html'); // adaptez les autres paramètres d'open
         // UNIX est sensible aux majuscules/minuscules pour les noms de fichier!
      }

      function Ini() {
         var i=0,s='';
         while (i < nIma) s+="<img id='im"+i // images défilantes
            +"' style='position:absolute; left:"+lft+"px; display:none' src='Img/"
            +pag[i]+".jpg' onclick='javascript:Clk("+(i++)+")'/>";
         window.document.getElementById('imd').innerHTML = s;
         i=0; s="Selection par le nom:";
         while (i < nIma) {
           s+="<br /><a href='Pag/"+pag[i]+".html'>"+pag[i]+"</a>";
           ima[i]=window.document.getElementById('im'+i++);
         }
         window.document.getElementById('spn').innerHTML=s;
      }
   //]]>
   </script>
</head>

<body onload="Ini(); setInterval('Nxt()',tim);" style='overflow:hidden;'>
   <div id='imd'></div> <!-- div pour "enregistrer" les images défilantes -->
   <div style='margin-left:175px;'> <!-- ajustez éventuellement la valeur 175 -->
      <p style='font-size:18px; color:blue;'>
         Quelques temples du Karnataka en Inde
      </p>
      <p style='color:red;'><br />«-- Cliquez sur une image !</p>
      <div id='spn' style='width:160px; height:110px; background-color:yellow; color:red;
         overflow:auto; margin-left:125px; padding:0px 0px 0px 4px;'></div>
      <p style='color:green;'>
         <br />Les temples de l'Inde vous intéressent ? : &nbsp;
         <a href='http://www.william-voirol.ch'>Splendeurs de l'Inde</a>
      </p>
      <hr />
      <p style='font-size:24px;'><br />Images défilant verticalement</p>
      <p>
         -  Toutes les images ont la même dimension.<br />
         -  Choix du nombre d'images et de l'espace entre les images.<br />
         -  Le nombre d'images traitées s'adapte à la hauteur de la fenêtre.<br />
         -  La vitesse de défilement dépend des variables 'tim' et 'pas'.<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.
         <br /><br />Téléchargez l'exemple complet: &nbsp;
         <a href='http://www.william-voirol.ch/TP/Images defilant verticalement.zip'>Zip</a>
      </p>
      <p style='color:red;'>
         Testé avec les navigateurs:<br />
         Internet Explorer 8 et 9, Firefox 4, Navigator 9,<br />
         Google Chrome 11, Opera 11, Safari 5.
      </p>
   </div>
</body>
</html>

 Conclusion

Le programme proposé est assez simple pour bien mettre en évidence les notions utilisées.

Le code source a l'air de fonctionner avec les principaux navigateurs actuels:
  Internet Explorer 8 et 9, Firefox 4, Navigator 9, Google Chrome 11, Opera 11, Safari 5.
Il passe également le test   W3C   Markup Validation Service.

Pour le niveau, j'hésite entre Débutant et Initié.

Un exemple avec quelques images se trouve sur le fichier zip.

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources du même auteur

Source avec Zip Source avec une capture ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE
Source avec Zip Source avec une capture RÉSOLUTION D'UN SYSTÈME D'ÉQUATIONS LINÉAIRES À N INCONNUES
Source avec Zip VECTEURS ET MATRICES: OUTILS GRAPHIQUES UTILES
Source avec Zip DIALOGUE ENTRE FENÊTRES MÈRE ET FILLE
Source avec Zip ROTATION D'UNE IMAGE, ANIMATION
Toutes les sources de william voirol

 Sources de la même categorie

Source avec Zip IMAGES DÉFILANT SUR UN CYLINDRE (SCROLLING IMAGES) par william voirol
Source avec Zip IMAGES DANSANTES 4: MOUVEMENT DE LA TORTUE par william voirol
Source avec Zip IMAGES DANSANTES 3: MOUVEMENT ALÉATOIRE ORIENTÉ par william voirol
Source avec Zip IMAGES DANSANTES 2: MOUVEMENT ALÉATOIRE SANS SUPERPOSITIONS par william voirol
Source avec Zip IMAGES DANSANTES 1: MOUVEMENT ALÉATOIRE LIBRE par william voirol
Toutes les sources de la catégorie Trucs Amusants

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture FORMULAIRE TABLEAU par vic511
Source avec Zip Source avec une capture SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp
Source avec Zip Source avec une capture CALCULATRICE HEURE par m22001111
Source avec Zip Source avec une capture COPIER DU TEXTE par m22001111
Source avec Zip IMAGES DÉFILANTES EN JAVASCRIPT (SCROLLING IMAGES) par william voirol

Commentaires et avis

Commentaire de titin84 le 27/06/2011 06:00:28

bonjour et tout simplement fantastique!merci
pourrait on avoir la possibilité en cliquant sur l'image de l'ouvrir en taille agrandie? merci

Commentaire de NEVERFORGET le 27/06/2011 07:51:53

Avec l'apparition du curseur "hand" et l'arrêt du défilement onmouseover, ce serait parfait.

Commentaire de arta le 27/06/2011 09:55:35

Bonjour tous

Comme le souligne NEVERFORGET, la possibilité d'arrêt du défilement au survol serait sympa.

titin84, le clic ouvre une nouvelle page, ça peut aussi bien être une image, etc.
Faudrait juste que la souris change en main au survol ;)

Commentaire de green68 le 30/06/2011 10:43:46 8/10

Bonjour,

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

Bonne continuation !!!

Commentaire de william voirol le 27/07/2011 18:10:50

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

Commentaire de adrien fournier le 30/07/2011 13:26:34 10/10

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?

Commentaire de arta le 30/07/2011 14:45:10 9/10

Bonjour tous

Bien joué william voirol.
Si en plus tu fais aussi en horyzontal ce sera complet ;)

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

lien javascript [ par ilimo ] bonjour....peut-on rendre un lien actif et inactif avec javascript ?ex : a et b sont deux liens html...quand je clique sur a, la page liée à a s'af select case en javascript [ par Juju ] je cherche une sorte un select case mais en javascript, pouvez vous me donner la syntaxe MerciJuju javascript dans formulaire acrobat [ par domi ] "Envoie par mèl du contenu du formulaire"j'ai écrit deux lignes simple en javascript dans un formulaire acrobat, il fonctionne bien avec Acrobat "prog Lien javascript [ par yoyo ] Salut tout le monde,g un petit pb,g un lien qui est une image et quand je clique dessus, je lance une fonction javascript.Sur IE, pas de probleme mais Colle pour les pros du javascript [ par Manu ] Bonjour,je propose aux passionnés de javascript de relever un défi. J'ai téléchargé les fichiers pour un menu en DHTML/JavaScript (fichiers .css et Javascript & unload ?????????? [ par Léa ] Hello Utilisant javascript, la fonction onUnload me permet correctement de capturer l'evenement de fermeture de ma fenetre... sauf que la touche F5 ou fonction javascript [ par phil ] Bonjourvoici mon pb: function changeFrame(frame1,frame2){ top.nomdeframe1.location=frame1 top.nomdeframe2.location=frame2 comment doit-on écrire ce sc Besoin urgent d'une fonction Javascript [ par David ] Bonjour,Voici le context:J'utilise des JSP dans lesquelles j'insert des tags avec des listes déroulantes en import Java.J'ai un champ text dans lequel versions javascript [ par arthur ] je cherche une récapitulatif contenant les fonctionnalités de chaque version de javascript de 1.0 à 1.3 ou 1.4.merci


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 11,170 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)