Posté le 22 août 2015 || 5 commentaires
Tutoriel codage

Avant toute chose, ce petit tutoriel s’adresse surtout aux débutants en codage. Pour moi, il s’agit d’une des bases à connaitre si vous voulez coder votre site. D’ailleurs, c’est une des premières choses que j’avais appris à faire.

Je pense que vous avez déjà remarqué, notamment sur les fansites, que les menus et les icones de réseaux sociaux sont souvent directement incrustés dans la bannière. Il faut donc coder cette bannière afin de rendre cliquables ces zones.

Dans ce tutoriel, je vais vous expliquer quels codes utiliser pour coder une image map. Pour ne pas compliquer l’affaire (car je sais que souvent, les tutoriels qu’on trouve sont compliqués), nous allons rester sur des zones cliquables rectangulaires, qui sont les plus courantes finalement. Nous parlerons des autres formes (cercles etc) dans un autre article.

Exemple d’image cliquable

Coder une image map

Comment réaliser une image cliquable

Afin de créer une image cliquable, nous aurons besoin d’utiliser plusieurs balises :

  • <MAP> qui permet de définir une ou plusieurs zones cliquables sur une image. Forcément, cette balise s’utilise à l’intérieur d’un code <IMG>.
  • <AREA> qui est associée à une zone cliquable.

La première chose à faire est d’écrire le code pour afficher une image (je vais au plus simple donc j’ai « oublié » les codes pour les bordures, les dimensions etc). Evidemment, vous remplacez le lien que j’ai mis par celui de votre image.

<img src="images/exemplemap.png">

Dans le code de cette image, nous allons intégrer l’attribut <USEMAP> en précisant le nom de la map. Peu importe son nom mais n’oubliez surtout pas le # qui le précède !

<img src="images/exemplemap.png" usemap="#article">

Afin de rendre l’image cliquable, nous allons ajouter la balise <MAP> en rappelant le nom que nous lui avions donné dans l’attribut <USEMAP> (sans le # cette fois-ci). Celle-ci peut être mise n’importe où dans votre page.

<img src="images/exemplemap.png" usemap="#article">
<map name="article">
</map>

Il est maintenant temps de définir nos différentes zones cliquables grâce à la balise <AREA>. Cette balise sera utilisée autant de fois qu’il y aura de zones.

  • L’attribut SHAPE donne la forme de la zone cliquable. Ici, pour faire simple, j’ai utilisé des zones rectangulaires.
  • L’attribut COORDS définit les coordonnées X (horizontal) et Y (vertical) en pixels du coin supérieur gauche et du coin inférieur droit.
  • L’attribut HREF contient l’URL de la page vers laquelle on veut faire pointer la zone.
<img src="images/exemplemap.png" usemap="#article">
<map name="article">
<area shape="rect" coords="127,30,477,76" href="category/tutoriels-wordpress">
<area shape="rect" coords="127,77,362,124" href="category/sites-utiles">
<area shape="rect" coords="127,125,460,172" href="category/extensions-wordpress">
</map>

Sur l’image ci-dessous, je vous ai mis des ronds sur les coins pour lesquels il faut les coordonnées ainsi que le sens des X et Y.

Coder une image map

Comment trouver les coordonnées des coins ?

Je préfère l’expliquer dans cet article car je pense que j’aurais eu des questions à ce sujet. Pour faire plus simple, je vais vous montrer comment faire avec le logiciel gratuit Photofiltre.

Vous avez simplement besoin de poser votre souris sur un coin d’une zone cliquable et les coordonnées X et Y se lisent en bas de votre fenêtre dans la bande gris clair. Ce sont ces coordonnées que vous devrez reporter dans votre attribut COORDS. Facile non ?

Coder une image map

Le mot de la fin

Vous avez maintenant toutes les cartes en main pour créer votre première image cliquable. Comme vous l’avez vu, ce n’est pas sorcier mais il y a quelques points importants :

  • Le nom présent dans <USEMAP> et dans <MAP> doit être identique.
  • Dans <USEMAP>, un # se trouve avant le nom. Pas dans <MAP>
  • Bien prendre les coordonnés des coins supérieur gauche et inférieur droit pour une zone rectangulaire.

De toute façon, si vous avez des questions, n’hésitez pas, je vous répondrai autant que je le pourrai.


Share on Facebook0Tweet about this on Twitter0Share on Google+0Pin on Pinterest0Print this pageEmail this to someone

Poster un Commentaire

5 Commentaires sur l'article "Coder une image map (images à zones cliquables)"

Notify of

Sort by:   newest | oldest | most voted
Invité
Eric Bertolaso
12/11/2016 4:15

Bonjour,
J’ai 12 sites identiques, il n’y a que la langue qui change. Je dois faire une page d’accueil spéciale. C’est une image MAP avec mon logo en plein Milieu devant une mappemonde en fond. des liens vers mes 12 sites se trouvent en dessous de mon logo. 6 à gauche, l’un en dessous de l’autre et 6 à droite l’un en dessous de l’autre également. Le codage est prêt je n’ai plus qu’à l’insérer.
Mon problème est le suivant comment insérer cette image MAP dans mon site ? Dans WordPress je pense que cela n’est pas possible je cherche depuis trop… Read more »

Invité
Robyn.
24/08/2015 1:06

Super pour ce tuto ! Merci beaucoup ma belle ! <3

Invité
22/08/2015 1:43

Super article. Merci beaucoup
J’espère qu’il y en aura plein d’autres


Bienvenue à tous sur mon humble site. Je ne suis pas professionnelle et je n'ai pas fait d'études en informatique. Mes articles parlent plutôt de mon expérience personnelle et ne prétendent pas être complets ou 100% exacts. J'espère en tout cas que vous les trouverez utiles :)

55
likes

218
follows
Mentions légales