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

Publié le par PêUR

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:

onmouseout + image par défaut
+
onmouseover
=
 

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.

 

Publié dans Webdev

Commenter cet article

Fskng 27/10/2007 19:48

Salut , connaitrais tu un procédé de ce meme style mais pour pour un effet de transparence ? (redevient opaque au passage de la souris). Merci d'avance , et au passage , ce blog est magnifique , franchement bravo !!

Jacky 29/09/2007 16:01

Pour faire un zoom sur une image(l'agrandir), je vous propose ce lien: http://coupdepouce.mabulle.com/index.php/2007/09/19/88224-zoom-d-images-avec-le-css

Les bloggers de vaucress 22/09/2007 17:44

Re. Ce n'st plus la peine de tenir compte des précédents commentaires, car ça fonctionne. Merci pour ce code très sympa.

Les bloggers de vaucress 21/09/2007 19:46

Bon bah le copier/coller ne fonctionne pas pour le code, bref! En fait j'ai juste modifier l'url de la première ligne "onemouseover..." et ça fonctionne pour faire apparaître l'image au passage de la souris mais maintenant ou dois-je coller l'autre url pour que cet même image en plus grande la remplace?

merci pour ton aide précieuse.

Les bloggers de vaucress 21/09/2007 19:42

et le code que tu propose avec mes premières modifs (pour l(image qui apparaît au passage. Mais après.... ???