suivez-moi sur :

Philippe da Cruz : graphique and web designer
Philippe da Cruz

Blog

0

Créez des zones réactives sur une image avec HTML image map

Creer-des-liens-sur-une-seule-image-avec-image-map-tutorial

Appelé image map en anglais et images réactives en français, cette technique permet de créer de multiple zones de liens sur une image.

Malgré les problèmes que peuvent poser les image réactives au référencement, cette méthode devient vite très pratique lorsque vous désirez faire une carte géographique interactive ou mettre un menu cliquable sur votre newsletter. Dans ce tutoriel, vous allez apprendre à créer sur une image de multiples zone de liens amenant vers une page externe.

Testez le résultat final.

Construction de la balise map :

<map name="nom de la balise map">
    <area shape=”Forme de la zone"
    coords="coordonnées de la zone"
    href="lien hypertexte de la zone"
    target="cible du lien hypertexte"
    title="titre de la zone"
    alt="texte alternatif"/>
</map>

Pour définir la zone réactive de notre image, nous avons à notre disposition multiples formes : rect pour rectangle, circle pour cercle, poly pour polygone ou une forme quelconque et enfin default pour la zone complète.
Pour que ces formes deviennent réactives, il faut pouvoir les identifier en indiquant leurs coordonnées. C’est sûrement la partie de l’exercice la plus complexe et la plus fastidieuse car il faut récupérer les points de chaque forme.
Pour vous aider, analysez le diagramme ci-dessous. Gardez en tête que x correspond aux coordonnées horizontales et y aux coordonnées verticales.


Diagramme expliquant la façon de trouver des coordonnées x et y sur une forme géométrique


Dans ce tutoriel, nous allons lier les logos de Facebook et de Starbucks de l’image ci-dessous à leur site internet respectifs.


Logo Facebook et Starbucks

Création :

Tout d’abord, créez une nouvelle page HTML que vous pouvez appeler index.html par exemple et insérez le code suivant entre les balise <body> de votre page.

<img src="images/logos.jpg" alt="Logos" usemap="#logos" />

Maintenant, avec Photoshop, vous devez trouver les coordonnées de chaque logo.

Commençons par le logo Facebook :
Appuyez sur F8 pour accéder au panneau des infos. À l’aide de l’outil de déplacement (V) pointez le coin supérieur gauche du rectangle bleu du logo Facebook et notez les coordonnées X et Y.

Panneau info de Photoshop CS 3 ouvert et montrant les coordonnées du bord haut gauche du logo Facebook.


Faites la même chose mais cette fois avec le coin inférieur droit. Pour mon image, j’ai eu X : 249.0 et Y : 119.0.


Le logo Starbucks :
Le logo Starbucks Coffee étant un cercle, nous allons prendre sa valeur en son centre comme sur l’image ci-dessous.

Panneau info de Photoshop CS 3 indiquant les coordonnées du centre du logo Starbucks coffee.


Nous devons à présent connaître le rayon du cercle Starbucks. Pour cela, il faut récupérer la valeur sur le bord droit du cercle comme ci-dessous et la soustraire à la valeur du centre. Vous pouvez aussi mesurer la distance du centre au bord avec la règle.


Panneau info de Photoshop CS 3 indiquant les coordonnées du bord droit du logo Starbucks coffee.


Le centre de mon cercle Starbucks est à 321pixels et au bord nous sommes à 384.5 pixels. Nous avons donc une distance de 63.5 pixels et nous retrouverons dans notre code HTML coords=”321,75,63.5″.
Lorsque vous avez récupéré toutes vos valeurs, vous n’avez plus qu’à les mettre dans votre code HTML juste après la ligne HTML précédente en suivant l’exemple ci-dessous :

<map name="logos">
 <area shape="rect" coords="17,33,249,119" href="http://www.facebook.com/" title="Youtube" alt="Facebook"/>
 <area shape="circle" coords="321,75,63.5" href="http://www.starbucks.fr/" title="StumbleUpon" alt="StumbleUpon"/>
</map>

Et c’est tout. Pour les plus fainéants d’entre vous ou si vous n’avez juste pas beaucoup de temps, vous pouvez utiliser le logiciel Adobe Dreamweaver qui fera le travail automatiquement ou Image Ready qui se chargera de récupérer les coordonnées pour vous.

Posté dans HTML | 0 commentaires

Laisser un commentaire

*

*


6 − cinq =