Code JavaScript pour faire défiler des images [zonewebmaster.eu]

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
{{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)
}}

====== 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.


===== Compatibilité =====

  * FireFox : Toutes versions
  * Google Chrome : 1 et +
  * Internet Explorer : 4 et +
  * Netscape Navigator : 3 et +
  * Microsoft Edge


===== Description du script =====

Ce script est composé de 2 parties, une première qu'on installe juste avant la balise </head> et le second a l'endroit où on veut que les images défilent sur votre page web.
Dans l'exemple proposée, le script permet de faire défiler 3 images qui pointent vers 3 liens différents. Le changement d'images s'effectue toute les 5 secondes.


===== Le code =====

Voici le premier code :

<code javascript>
<script language="javascript">
imgPath = new Array;
SiClickGoTo = new Array;
version = navigator.appVersion.substring(0,1);
if (version >= 3)
	{
	i0 = new Image;
	i0.src = 'url_image0';
	SiClickGoTo[0] = "Lien0";
	imgPath[0] = i0.src;
	i1 = new Image;
	i1.src = 'url_image1';
	SiClickGoTo[1] = "Lien1";
	imgPath[1] = i1.src;
	i2 = new Image;
	i2.src = 'url_image2';
	SiClickGoTo[2] = "Lien2";
	imgPath[2] = i2.src;
	}
a = 0;
function StartAnim()
	{
	if (version >= 3)
		{
		document.write('<a href="#" onclick="ImgDest();return(false)"><img src="url_image0" border="0" alt="Menu" name="defil" /></a>');
		defilimg()
		}
	else
		{
		document.write('<a href="Lien0"><img src="url_image0" 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>
</code>

Et voici le second, qui est bien plus court que le précédent :

<code javascript>
<script language="javascript">
StartAnim();
</script>
</code>


===== Explication du code =====

__Explication du premier code :__

Après la déclaration des variables //imgPath//, //SiClickGoTo//; la variable //version// sert a tester la version du navigateur, pour éviter un bug à ceux qui utiliseraient encore une version inférieur ou égaler a Internet Explorer 3. 

Maintenant on entre dans le vif du sujet. Une image a besoin de 4 lignes :

<code javascript>
i(n) = new Image; 
i(n).src = 'url_image(n)'; 
SiClickGoTo[(n)] = "Lien(n)"; 
imgPath[(n)] = i(n).src; 
</code>

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://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>
i0 = new Image; 
i0.src = 'http://www1.zonewebmaster.eu/images/chg-web.png'; 
SiClickGoTo[0] = "http://www.chg-web.com"; 
imgPath[0] = i0.src; 
</code>

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://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>
function StartAnim() 
	{ 
	if (version >= 3) 
		{ 
		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() 
		} 
	else 
		{ 
		document.write('<a href="http://www.chg-web.com"><img src="http://www1.zonewebmaster.eu/images/chg-web.png" border="0" /></a>') 
		} 
	} 
</code>

La fonction //ImgDest()// est une fonction qui génère automatiquement l'URL cible suivant l'image qui est affichée. Ici, aucune modification a effectuer.

La fonction //defilimg()// permet de faire défiler les images. En première partie, on test si a == 3 grâce a la commande if. Si la variable //a// est égale 3, on la remet a 0. Simplement on vérifie si il y a encore des images a faire défiler ou si on recommence une boucle. Il faudra donc apporter une modification a cette ligne de code en indiquant le nombre d'images que vous avez a faire défiler. Si vous en avez 8 vous aurez le code suivant :

<code javascript>
if (a == 3) 
   { 
   a = 0; 
   } 
</code>

Si vous désirez modifier le temps qui s'écoule avant que le script passe a l'image suivante vous devez modifier la ligne 
<code javascript>
tempo3 = setTimeout("defilimg()",5000); 
</code>
La valeur 5000 correspond a 5000 millisecondes donc à 5 secondes, si vous voulez un changement d'images tout les 10 secondes suffit de remplacer 5000 par 10000.


__Explication du second code :__

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.

===== 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">