Créer une image qui change au passage de la souris
Définition: Celà permet de créer des boutons qui affiche une image en période de repos, une autre image quand il y a la souris dessus, et aussi une image différente quand on clique dessus
1ère étape:
- Choississer votre première image, et héberger là sur un serveur ! Garder bien l'adresse de stockage de l'image 1 ...
- Choississer votre deuxième image, et héberger là sur le même serveur ! Garder bien l'adresse de stockage de l'image 2 ...
- Choississer votre troisième image, et héberger là sur le même serveur ! Garder bien l'adresse de stockage de l'image 3 ...
Vous pouvez avoir 2 images identiques !
2eme étape:
Copier le code ci-dessous ... et mettez-y l'adresse de vos 2 images à l'emplacement indiqué. Tous les textes en rouges sont à modifier.
<!-- Add this code to the <HEAD> </HEAD> section. -->
<script LANGUAGE="JavaScript">
Image1 = new Image();
Image1.src = 'adresse de stockage de l'image1';
Image2 = new Image();
Image2.src = 'adresse de stockage de l'image2';
Image3 = new Image();
Image3.src = 'adresse de stockage de l'image3';
function changeimage(imagenum,newfilename)
{
document.images[imagenum].src=newfilename;
}
</script>
<!-- End of header section -->
<!-- Add this code to the <BODY> </BODY> section. -->
<A HREF="adresse de direction"
onMouseOver="changeimage('aa170','adresse de stockage de l'image2');"
onMouseOut="changeimage('aa170','adresse de stockage de l'image1');"
onClick="changeimage('aa170','adresse de stockage de l'image3');"
><IMG src="adresse de stockage de l'image1" name=aa170 border="0"></A>
<!-- End of body section -->
3eme étape:
Coller le code dans votre page HTML, et regarder le résultat !
Attention cependant à ce que le JavaScipt sois autorisé ! Ce qui n'est pas le cas sur Over-blog ...
Cependant, il existe un deuxième code HTML, et qui ne nécessite pas le JavaScrip ^^
1ère étape:
- Choississer votre première image, et héberger là sur un serveur ! Garder bien l'adresse de stockage de l'image 1 ...
- Choississer votre deuxième image, et héberger là sur le même serveur ! Garder bien l'adresse de stockage de l'image 2 ...
- Choississer votre troisième image, et héberger là sur le même serveur ! Garder bien l'adresse de stockage de l'image 3 ...
Vous pouvez avoir 2 images identiques !
2eme étape:
Copier le code ci-dessous ... et mettez-y l'adresse de vos 2 images à l'emplacement indiqué. Tous les textes en rouges sont à modifier.
<!-- Add this code to the <HEAD> </HEAD> section. -->
<script LANGUAGE="JavaScript">
Image1 = new Image();
Image1.src = 'adresse de stockage de l'image1';
Image2 = new Image();
Image2.src = 'adresse de stockage de l'image2';
Image3 = new Image();
Image3.src = 'adresse de stockage de l'image3';
function changeimage(imagenum,newfilename)
{
document.images[imagenum].src=newfilename;
}
</script>
<!-- End of header section -->
<!-- Add this code to the <BODY> </BODY> section. -->
<A HREF="adresse de direction"
onMouseOver="changeimage('aa170','adresse de stockage de l'image2');"
onMouseOut="changeimage('aa170','adresse de stockage de l'image1');"
onClick="changeimage('aa170','adresse de stockage de l'image3');"
><IMG src="adresse de stockage de l'image1" name=aa170 border="0"></A>
<!-- End of body section -->
3eme étape:
Coller le code dans votre page HTML, et regarder le résultat !
Attention cependant à ce que le JavaScipt sois autorisé ! Ce qui n'est pas le cas sur Over-blog ...
Cependant, il existe un deuxième code HTML, et qui ne nécessite pas le JavaScrip ^^
<a href="adresse de direction"><img name="bouton" src="adresse de stockage de l'image1" alt="" onmouseout=
"document.bouton.src='adresse de stockage de l'image2''" onmouseover="document.bouton.src='adresse de stockage de l'image2''" id="bouton" /></a>
Voilà un exemple de rendu:
