Cours JavaScript

Exemple 00008 : Boutons animés deuxième méthode Difficulté 3

Passez la souris sur le bouton "Sommaire" pour voir l'animation.
Si vous cliquez dessus, vous retournerez à la page d'accueil du site.

(Le temps de chargement peut être plus ou moins long).


Code source JavaScript à placer entre les tags  <script language="javascript"> (ou <script type="text/javascript"> )... et ... </script>  de votre page web :
 

function afficheimage (adresseimage, placeimage) {
document.images[placeimage].src = adresseimage;
}
 

Code HTML à placer entre les tags <Body> ... et  ... </Body> de votre page Web :
 

<A Href="MaPage.htm" onMouseOver="afficheimage('MonImage2.gif', 1)" onMouseOut="afficheimage('MonImage1.gif',1)">
<img src="MonImage1.gif" border=0></a>
 

Remarque

Bien sûr, dans cet exemple, vous devez remplacer  "MaPage.htm"  par la page sur laquelle vous voulez vous brancher si l'utilisateur clique sur le bouton, et remplacer  'MonImage1.gif' et 'MonImage2.gif' par les véritables noms ou emplacements de vos propres images.
Il faudra aussi changer le "1" dans les paramètres d'appel de la fonction afficheimage (dans le Tag HTML), en fonction de la place de l'image dans la page HTML.

Si votre image est la 3 ème image de votre page Web, remplacez le 1 par un 2 dans onMouseOver="afficheimage('MonImage2.gif', 1)" et dans onMouseOut="afficheimage('MonImage1.gif',1)"
Si votre image est la 4 ème image de votre page Web, remplacez le 1 par un 3 dans onMouseOver="afficheimage('MonImage2.gif', 1)" et dans onMouseOut="afficheimage('MonImage1.gif',1)", etc.
 

Retour à la leçon

Pour voir le source de cette page :

sous NETSCAPE © :
cliquer dans le menu "Affichage", puis "Source HTML" dans la barre de menu de votre navigateur.

sous Microsoft Internet Explorer © :
cliquer dans le menu "Affichage", puis "Source" dans la barre de menu de votre navigateur.