Afficher une image au survol

Pour personnaliser votre site, vous pouvez ajouter une image au survol (quand on survole avec le pointeur de la souris) d'une autre image.
Afficher une image au survol peut être pratique pour montrer un avant/après sans surcharger une page...
Effectuer cette manipulation nécessite quelques bases en HTML mais reste assez simple. Voyons ensemble comment procéder.

Copiez / Collez le code

Copiez le code suivant

<p><img alt="Survol" height="198" onmouseout="this.src='https://www.e-monsite.com/medias/images/bleu.png';" onmouseover="this.src='https://www.e-monsite.com/medias/images/orange.png';" src="https://www.e-monsite.com/medias/images/bleu.png" /></p>

Collez le code dans l'éditeur HTML (bouton en haut à droite) de votre éditeur visuel à l'endroit voulu.

Vous avez maintenant la base sous format HTML de vos images : il faut maintenant modifier le code et remplacer les images orange et bleue ici par les images de votre choix.

Remplacez les urls

Dans le code que vous avez ajouté dans votre éditeur HTML, vous pouvez distinguer trois urls ici en gras :

• onmouseout="this.src='https://www.e-monsite.com/medias/images/bleu.png';" = l'image bleue
• onmouseover="this.src='https://www.e-monsite.com/medias/images/orange.png';" = l'image orange
• src="https://www.e-monsite.com/medias/images/bleu.png" = l'image bleue

Les urls 1 et 3 sont identiques et correspondent à l'image de base, non survolée.

L'url 2 correspond à l'image de survol.

Vous devez donc remplacer les urls 1 et 3 par l'image de base. L'url 2 est à remplacer par l'url de l'image que vous voulez voir apparaître au survol.

Vous devez veiller à modifier uniquement les url sans toucher au reste du code. L'adresse url d'une image commence par "http" et se termine en général par ".png" ou encore ".jpg"