Un Rollover à 3 images
ou
Visionneuse fonctionnant au
survol de la souris
Placer votre souris sur l'image ci-dessous les
images défilent. Vous pouvez faire défiler autant
d'images que vous le désirez
Insérez
le code ci-dessous dans votre page entre les balises d'entête
<head> ..... </head>
( juste avant </head>
)
<script language="JavaScript">
<!--
//PLF-/
function objet() {
this.length = objet.arguments.length
for (var i = 0; i < this.length; i++) this[i+1] = objet.arguments[i]
}
var nom = new objet ("imaga.gif",
"imagb.gif", "imagc.gif");
var numero = 1;
function changer() {
numero += 1;
if (numero == nom.length + 1) numero = 2;
document.image.src = "im/"+nom[numero];
roll=window.setTimeout('changer()',800)
}
function initial() {
if (numero != 1) numero = 1;
window.clearTimeout(roll);
document.image.src = "im/"+nom[numero];
}
function prechargimg() {
var doc=document;
if(doc.images){ if(!doc.precharg) doc.precharg=new Array();
var i,j=doc.precharg.length,x=prechargimg.arguments; for(i=0;
i<x.length; i++)
if (x[i].indexOf("#")!=0){ doc.precharg[j]=new Image;
doc.precharg[j++].src=x[i];}}
}
//-->
</script> |
|
Corrigez
comme suit
|
|
Nom des 3 images (pour la
visionneuse indiquer toutes les images à faire défiler)
Chemin/ où trouver les images
Si vous souhaitez faire défiler
l'image initial dans le rollover remplacez le 2 par 1 (à
faire pour la visionneuse)
Temps d'apparition des images en millisecondes
|
Ensuite insérez
le code ci-dessous dans la balise <body>
| onLoad="prechargimg('im/imagb.gif','im/imagc.gif')" |
| chemin/nomimage.(gif,jpg,...)
des 2ème et 3ème images (toutes sauf
l'initiale pour la visionneuse) |
|
EXEMPLE
|
| <body bgcolor="#FFFFFF"
background="im/fond.gif" onLoad="prechargimg('im/imagc.gif','im/imagb.gif')"> |
|
OU (s'il y a déjà une
fonction ou autre de préchargée)
|
| <body bgcolor="#FFFFFF"
background="im/fond.gif" onLoad="tt_wonder();prechargimg('im/imagc.gif','im/imagb.gif')"> |
Puis insérez
le code ci-dessous à l'endroit où les images
vont défiler
| <a href="#"
onMouseOut="initial()" onMouseOver="changer()"
><img src="im/imaga.gif"
width="200" height="194"
border="0" name="image"></a> |
|
Corrigez
comme suit
|
|
chemin/nom_de_1ère_image.(gif,jpg,...)
/ largeur
/ hauteur
en pixels
Vous pouvez créer un lien en
remplaçant "#" par la page à atteindre
"chemin/nompage.htm"
Pour la visionneuse
Si vous ne spécifiez pas la taille (width="200"
height="194") les images s'affiche sous leur taille
originale (pratique pour des images de tailles différentes).
|
Ce site vous a plu ?
Vous avez trouvé le script que vous cherchiez ?
Faites en profiter vos visiteurs : insérez un lien sur
votre site
