Une image qui change quand on la survole (rollover)
Vous avez sûrement déjà
vu cela mais comment on fait ?
Insérez
le code ci-dessous dans votre page entre les balises d'entête
<head> ..... </head>
( juste avant </head>
)
<script language="JavaScript">
<!--
//PLF-http://www.jejavascript.net/
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");
var numero = 1;
function changer() {
numero += 1;
if (numero == nom.length + 1) numero = 1;
document.image.src = "im/"+nom[numero];
}
function initial() {
if (numero != 1) numero = 1;
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 images -
Info: fonction pour précharger
la 2ème image
Chemin/ où trouver les images |
Ensuite insérez
le code ci-dessous dans la balise <body>
| onLoad="prechargimg('im/imagb.gif')" |
| chemin/deuxieme_image.(gif,jpg,...) |
|
EXEMPLE
|
| <body bgcolor="#FFFFFF"
background="im/fond.gif" onLoad="prechargimg('im/imagb.gif')"> |
|
OU (s'il y a déjà une
fontion ou autre de préchargé)
|
| <body bgcolor="#FFFFFF"
background="im/fond.gif" onLoad="tt_wonder();prechargimg('im/imagb.gif')"> |
Puis insérez
le code ci-dessous à l'endroit du rollover
| <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"
|
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
