1. Créer un site
  2. Tutoriels
  3. Pages
  4. Afficher une image au survol

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.

Le HTML : qu'est-ce que c'est ?

Le HTML est un langage de balisage informatique qui permet de traduire de l'hypertexte, d'où son nom complet : HyperText Markup Langage.

Chaque texte rédigé dans votre éditeur visuel est visible en langage HTML grâce au bouton "Source" ou en cliquant sur "Editeur HTML".

Une image au survol : à quoi ça ressemble ?

Survol

Gérez vos images

illustration

Chargez les photos dans l'espace de stockage

Avant toute chose, chargez les photos que vous souhaitez utiliser dans votre espace de stockage. Vous pourrez ainsi aisément récupérer les urls des photos pour les placer dans le code.

illustration

Récupérez les url de vos images

Pour cela nous vous invitons à consulter ce tutoriel : Récupérer les urls des fichiers de l'espace de stockage  . Une fois les urls récupérées : vous pouvez procéder au changement du code.

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.

Changez le alt de l'image

Au début du code vous pouvez voir l'attribut alt : alt="Survol" Cet attribut doit être un mot clé en rapport direct avec votre image ou le sujet de votre page.

Ex : Vous créez une page sur les chartreux et les images sont en lien avec cette race de chat, le alt idéal est donc "Chartreux".

Pensez donc à remplacer le mot "Survol" par le mot de votre choix.

Enregistrez.

Ces tutoriels pourraient aussi vous aider :

 

Ajouter une image dans une page

Que votre image se trouve sur votre ordinateur ou dans un espace de stockage, nous allons voir ensemble comment l'afficher dans une page.

 

Le guide de la création de pages

Créez des pages web facilement grâce à un système de lignes et de colonnes, ce qui permet d'afficher du contenu dynamique dans vos pages.