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

Laisser un commentaire


En rentrant votre adresse mail, vous recevrez une notification lorsque je répondrai à votre commentaire.


Les commentaires

  • 1. Le monde de jenn le 22/08/2015

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

    [Répondre]

    Annahbel :

    Je suis contente qu’il te plaise 🙂 Et oui, je prévois d’en faire d’autres, des tutoriels bien détaillés et simplifiés comparés à ceux qu’on trouve d’habitude sur internet 🙂

    [Répondre]

  • 2. Robyn. le 24/08/2015

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

    [Répondre]

  • 3. Eric Bertolaso le 12/11/2016

    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 longtemps. Dans le fichier « style.css » du thème enfant, dans le fichier « header.php » du thème enfant ou dans un autre fichier et surtout Où ! le copier dans ce fichier ?
    Merci de votre réponse.
    Eric Bertolaso.

    [Répondre]

    Annahbel :

    Bonjour Eric,
    En fait, tu as 12 wordpress différents sur un même compte (par ex, ca fait http://url.com/fr, http://url.com/en, http://url.com/es etc) ou ce sont des sites totalement indépendants les uns des autres ? Car si tu as 12 wordpress installés sur ton compte, je verrais bien ta map monde à la racine de ton site (http://url.com si je reprends comme au début de mon commentaire) mais pas dans un wordpress. Juste une page index.html et un fichier css (ou la css inclue directement dans le fichier index d’ailleurs). La personne qui débarque sur http://url.com tombe sur la map monde, clique sur son pays et ça le redirige vers le bon site.
    🙂

    [Répondre]


  • Welcome !
    Bienvenue sur Coding Pulse, votre site d'astuces, tutoriels et ressources pour vos sites et blogs. Je ne suis pas professionnelle en graphisme ou développement web mais j'espère que mes articles vous seront utiles. A part ça, je suis Anna, jeune Lorraine de 28 ans, codant depuis maintenant 9 ans.
    anna[at]codingpulse.fr
    Restons connecté(e)s

    55

    319

    241
    Profil twitter
    Page facebook
    Elite / top affiliates
    Mentions légales