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.
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 ?
Copiez / Collez le code HTML
Copiez le code HTML suivant
<p><img alt="Survol" height="198" onmouseout="this.src='http://www.kyma-web.com/medias/images/tp132-bleu.png';"http://www.kyma-web.com/medias/images/tp131-orange.png
onmouseover="this.src='';"http://www.kyma-web.com/medias/images/tp132-bleu.png
src="" /></p>
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.
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.
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.