script-javascript-images-defilantes

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Prochaine révision
Révision précédente
script-javascript-images-defilantes [04/08/2015 20:17] – créée zonewebmasterscript-javascript-images-defilantes [25/08/2023 19:26] (Version actuelle) – Mise à jour de la page zonewebmaster
Ligne 1: Ligne 1:
-====== Script pour faire défiler des images ======+{{htmlmetatags>metatag-description=(Voici un petit script en JavaScript qui permet de faire défiler des images sur une page web.. ) 
 +metatag-og:description=(Voici un petit script en JavaScript qui permet de faire défiler des images sur une page web.. ) 
 +metatag-og:title=(Code JavaScript pour faire défiler des images - zonewebmaster.eu) 
 +metatag-og:type=(article) 
 +metatag-og:url=(https://www1.zonewebmaster.eu/script-javascript-images-defilantes) 
 +metatag-og:locale=(fr_FR) 
 +metatag-og:site_name(zonewebmaster.eu) 
 +metatag-article:published_time=(2017-01-01) 
 +metatag-article:modified_time=(2023-08-24) 
 +metatag-article:author=(montuy337513) 
 +metatag-article:tag=(javascript, js, code, script, images défilantes , help, tuto, wiki, debian) 
 +}}
  
-Voici un petit script en Javascript qui permet de faire défiler des images sur une page web.+====== Code JavaScript pour faire défiler des images ====== 
 + 
 +Voici un petit script en JavaScript qui permet de faire défiler des images sur une page web.
  
  
Ligne 7: Ligne 20:
  
   * FireFox : Toutes versions   * FireFox : Toutes versions
-  * Mozilla : 1 et ++  * Google Chrome : 1 et +
   * Internet Explorer : 4 et +   * Internet Explorer : 4 et +
   * Netscape Navigator : 3 et +   * Netscape Navigator : 3 et +
 +  * Microsoft Edge
  
  
Ligne 101: Ligne 115:
 On remplace, dans le code ci-dessus, (n) par le numéro de l'image sachant que la première image porte le numéro 0, on remplace //url_image(n)// par l'URL de l'image et on remplace Lien(n) par la  cible vers laquelle doit pointer l'image,donc on obtient : On remplace, dans le code ci-dessus, (n) par le numéro de l'image sachant que la première image porte le numéro 0, on remplace //url_image(n)// par l'URL de l'image et on remplace Lien(n) par la  cible vers laquelle doit pointer l'image,donc on obtient :
  
-exemple : l'image a afficher se trouve a l'adresse http://www.zonewebmaster.eu/images/carte_cuisine_g.png et si on clique sur l'image on arrive sur la page HTML suivante : http://www.zonewebmaster.eu+exemple : l'image a afficher se trouve a l'adresse http://www1.zonewebmaster.eu/images/chg-web.png et si on clique sur l'image on arrive sur la page HTML suivante : http://www.chg-web.com
  
 <code javascript> <code javascript>
 i0 = new Image;  i0 = new Image; 
-i0.src = 'http://www.zonewebmaster.eu/images/carte_cuisine_g.png';  +i0.src = 'http://www1.zonewebmaster.eu/images/chg-web.png';  
-SiClickGoTo[0] = "http://www.zonewebmaster.eu"; +SiClickGoTo[0] = "http://www.chg-web.com"; 
 imgPath[0] = i0.src;  imgPath[0] = i0.src; 
 </code> </code>
Ligne 112: Ligne 126:
 Le code est prévu pour faire défiler 3 images, si vous voulez en faire défilez deux, suffit de supprimer le dernier bloc (de //i2=new image;// jusqu'à //imgPath[2] = i2.src;//). Et pour mettre plus d'image(s) suffit de rajouter un bloc de 4 lignes comme ci-dessus. Le code est prévu pour faire défiler 3 images, si vous voulez en faire défilez deux, suffit de supprimer le dernier bloc (de //i2=new image;// jusqu'à //imgPath[2] = i2.src;//). Et pour mettre plus d'image(s) suffit de rajouter un bloc de 4 lignes comme ci-dessus.
  
-La fonction //StartAnim()// est la fonction principale du code, elle génère la création du code HTML pour l'affichage de l'image et si la version du navigateur est trop ancienne, elle génère un code HTML qui permet d'afficher la première image sans défilement. Nous devons apportez quelques modifications ici aussi, il faut remplacer //url_image0// par l'URL de l'image de la première image, dans l'exemple ci-dessus, on remplace //url_image0// par http://www.zonewebmaster.eu/images/carte_cuisine_g.png puis on remplace Lien0 par la cible définit pour la première image, dans l'exemple ci-dessus, on remplace Lien0 par http://www.zonewebmaster.eu. On obtient ceci :+La fonction //StartAnim()// est la fonction principale du code, elle génère la création du code HTML pour l'affichage de l'image et si la version du navigateur est trop ancienne, elle génère un code HTML qui permet d'afficher la première image sans défilement. Nous devons apportez quelques modifications ici aussi, il faut remplacer //url_image0// par l'URL de l'image de la première image, dans l'exemple ci-dessus, on remplace //url_image0// par http://www1.zonewebmaster.eu/images/chg-web.png puis on remplace Lien0 par la cible définit pour la première image, dans l'exemple ci-dessus, on remplace Lien0 par http://www.chg-web.com. On obtient ceci :
  
 <code javascript> <code javascript>
Ligne 119: Ligne 133:
  if (version >= 3)   if (version >= 3) 
  
- document.write('<a href="#" onclick="ImgDest();return(false)"><img src="http://www.zonewebmaster.eu/images/carte_cuisine_g.png" border="0" alt="Menu" name="defil" /></a>'); + document.write('<a href="#" onclick="ImgDest();return(false)"><img src="http://www1.zonewebmaster.eu/images/chg-web.png" border="0" alt="Menu" name="defil" /></a>'); 
  defilimg()   defilimg() 
  
  else   else 
  
- document.write('<a href="http://www.zonewebmaster.eu"><img src="http://www.zonewebmaster.eu/images/carte_cuisine_g.png" border="0" /></a>'+ document.write('<a href="http://www.chg-web.com"><img src="http://www1.zonewebmaster.eu/images/chg-web.png" border="0" /></a>'
  
  
Ligne 151: Ligne 165:
 Ici rien de très compliqué, on fait juste un appel de la fonction //StartAnim()// qui permet de générer le code HTML pour afficher la première image. Vous la placez simplement a l'endroit de votre page où vous voulez avoir vos images qui défilent. Ici rien de très compliqué, on fait juste un appel de la fonction //StartAnim()// qui permet de générer le code HTML pour afficher la première image. Vous la placez simplement a l'endroit de votre page où vous voulez avoir vos images qui défilent.
  
-Vous pouvez voir un exemple en ligne en suivant ce lien : http://www1.zonewebmaster.eu/script/menu_defilant.html+===== Exemple ===== 
 + 
 +<html> 
 +<script language="javascript"> 
 +imgPath = new Array; 
 +SiClickGoTo = new Array; 
 +version = navigator.appVersion.substring(0,1); 
 +if (version >= 3) 
 +
 + i0 = new Image; 
 + i0.src = 'https://www1.zonewebmaster.eu/images/chg-web.png'; 
 + SiClickGoTo[0] = "http://www.chg-web.com"; 
 + imgPath[0] = i0.src; 
 + i1 = new Image; 
 + i1.src = 'https://www1.zonewebmaster.eu/images/css3.jpeg'; 
 + SiClickGoTo[1] = "http://www.w3schools.com/css/"; 
 + imgPath[1] = i1.src; 
 + i2 = new Image; 
 + i2.src = 'https://www1.zonewebmaster.eu/images/linux.jpg'; 
 + SiClickGoTo[2] = "https://www.google.fr/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0CCIQFjAAahUKEwjk6dm0jJDHAhWIbRQKHR4PAhQ&url=https%3A%2F%2Fwww.debian.org%2Findex.fr.html&ei=uAnBVeStKojbUZ6eiKAB&usg=AFQjCNEsR5IHZwUZv8nJP7FH8SGASfibnw&sig2=8CkQLOM8B7yAW6ixagykrw&bvm=bv.99261572,d.d24"; 
 + imgPath[2] = i2.src; 
 +
 +a = 0; 
 +function StartAnim() 
 +
 + if (version >= 3) 
 +
 + document.write('<a href="#" onclick="ImgDest();return(false)"><img src="https://www1.zonewebmaster.eu/images/chg-web.png" border="0" alt="Menu" name="defil" /></a>'); 
 + defilimg() 
 +
 + else 
 +
 + document.write('<a href="http://www1.zonewebmaster.eu"><img src="https://www1.zonewebmaster.eu/images/chg-web.png" border="0" /></a>'
 +
 +
 +function ImgDest() 
 +
 + document.location.href = SiClickGoTo[a-1]; 
 +
 +function defilimg() 
 +
 + if (a == 3) 
 +
 + a = 0; 
 +
 + if (version >= 3) 
 +
 + document.defil.src = imgPath[a]; 
 + tempo3 = setTimeout("defilimg()",5000); 
 + a++; 
 +
 +
 +</script
 +<p><a href="https://www1.zonewebmaster.eu/script-javascript-images-defilantes" title="exemple de script javascript pour faire défiler des images">Retour au Wiki</a><p>  
 +<div style="width: 200px; margin: 50px auto 50px auto;"> 
 +<script language="javascript"> 
 +StartAnim(); 
 +</script> 
 +</div> 
 +</html
 + 
 + 
 +===== Notes de version ===== 
 + 
 +  * [18/11/2017] : Harmonisation de la page 
 +  * [25/08/2023] : Mise à jour de la page  
 + 
 +===== Auteurs et sources ===== 
 + 
 +  * Auteur : [[:user:montuy337513]] 
 + 
 +===== Navigation ===== 
 + 
 +  * [[:accueil|Accueil]] 
 +  * [[:gestion-site-internet]] 
 +  * [[:tutoriel-javascript]] 
 +  * [[:tutoriel-html]] 
 +  * [[:tutoriel-php-mysql]] 
 +  * [[:tutoriel-referencement-seo]] 
 + 
 +<nspages -h1 -exclude:subNs: -textPages="Autres liens rapides pouvant vous intéresser">
  • script-javascript-images-defilantes.1438712259.txt.gz
  • Dernière modification : 08/10/2019 16:39
  • (modification externe)