Effet sur l'Images

Afficher une image au survol

Pour personnaliser votre site, vous pouvez ajouter une image qui change au survol du pointeur de la souris et y faire apparaître une autre image à la place.

Afficher une image au survol peut être pratique pour montrer un avant/après sans surcharger une page... Effectuer cette manipulation nécéssite quelques bases en HTML mais reste assez simple, dans l'ensemble. Voyons la procédure.

Image dans une page

Le HTML... c'est quoi ?

  • Le HTML est un langage de balisage informatique qui permet de traduire de l'hypertexte, d'où son nom complet : Hyper Text 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".
     
  • Le bouton Source édite aussi le code HTML, mais à l'état brut, sans être organisé.

Mais ! à quoi ça ressemble ?

Survol

Copiez / Collez le code HTML

Copiez le code HTML suivant

Collez le code dans l'éditeur HTML, pour l'ouvrir dans la cellule concernée, il faut cliquer sur le bouton en haut à droite dans votre éditeur visuel.

Gérez vos images

Chargez les photos dans le 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.

Récupérez ensuite 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.

Remplacez les urls

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

  • 1) onmouseout="this.src='http://www.kyma-web.com/medias/images/tp132-bleu.png​';" = l'image bleue
  • 2) onmouseover="this.src='http://www.kyma-web.com/medias/images/tp131-orange.png';" = l'image orange
  • 3) src="http://www.kyma-web.com/medias/images/tp132-bleu.png​" = l'image bleue

 

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

L'url 2 correspond à l'image de survol (l'orange).

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"

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.

  • Aucune note. Soyez le premier à attribuer une note !