Rollover ou Comment changer d'image au passage de la souris en mode confiance et supérieur

Mise à jour le 19/08/2006 14:32

Cet article a pour but de créer un effet de rollover accessible même aux blogs en mode confiances. Cette technique vous permettra par exemple de faire des boutons dynamiques.

Survolez l'image ci-dessous:

Comment faire ?

En mode source de votre entête, pied de page, module de texte libre ou article, il suffit d'ajouter dans votre balise de lien <a href=...> la gestion des évenements onmouseover et onmouseout et d'ajouter dans votre balise image <img src=...> un nom d'identification pour votre image par défaut. Exemple:

HTML

<A
onmouseover="document.photo.src='http://URL_image2.gif'" 
onmouseout="document.photo.src='http://URL_image1.gif'" 
href="http://URL_de_destination.html" ><IMG src="http://URL_image1.gif"  name=photo></A>

• onmouseover permet d'indiquer l'action à effectuer lorsque la souris passe sur l'image
• onmouseout permet d'indiquer l'action a effectuer lorsque la souris n'est plus sur l'image
• document.photo.src permet d'indiquer l'image à afficher selon l'évenement déclencheur (voir les évenments ci-dessus)
• href permet d'indiquer l'URL du lien suivi lors du clique sur l'image
• src permet d'indiquer l'URL de l'image à afficher par défaut.
• name permet de donner un nom à l'image par défaut afin de pouvoir s'y référer pour coder l'action (document.photo.src).

Pour aller plus loin

•  Voici une idée pour des boutons ou menus dynamiques:

+

=
 

Une méthode plus simple

Voir le commentaire n°48 dont le code proposé par Francisek  et bien plus simple que celui de cet article... des fois, j'aime me compliquer la vie.