Dans mon précédent article (« Tutoriel : Coder une image à zones cliquables (map)« ), je vous expliquais de manière détaillée et simple comment coder une image afin de la rendre cliquable (pour vos menus sur vos layouts par exemple).

Aujourd’hui, nous allons compliquer un peu la chose puisque je vais vous montrer comment coder les autres formes d’area (autres que rectangulaires puisque je vous l’ai déjà expliqué), comme vous pouvez le voir sur l’image ci-dessous.

autres formes d'area

Les zones en forme de cercle

Créer une zone cliquable circulaire est relativement simple puisque qu’il ne faut que 3 coordonnées dans l’attribut « coords« . Les deux premières sont les coordonnées X et Y du centre du cercle et la 3ème valeur correspond au rayon de ce cercle.

autres formes d'area

Dans ma première image, 204 et 106 sont donc les coordonnées de mon cercle et 58 correspond à son rayon.

<area shape="circle" coords="204,106,58" href="http://codingpulse.fr">

Pour retrouver le code complet d’une map, rendez vous sur mon dernier article 🙂

Les zones en forme de polygone (forme diverse)

Créer une zone polygonale (qui peut donc contenir autant de coins qu’on le désire) demande par contre un peu plus de « concentration ». En effet, les valeurs qui seront dans l’attribut « coords » correspondent aux valeurs X et Y de chaque coin de votre forme. Si votre forme a 5 coins (comme dans mon image, vous aurez à rentrer 10 valeurs.

autres formes d'area

Voici le code pour que j’ai utilisé pour le pentagone de ma première image. Chaque paire de coordonnées correspond à un coin de la forme.

<area shape="poly" coords="367,48,440,60,450,130,385,165,335,113" href="http://codingpulse.fr/">

Par contre, veillez à prendre les coins dans l’ordre et non en vrac, histoire que les coordonnées ne se « croisent » pas.

Le mot de la fin

Avec ces deux tutoriels sur les images map, vous êtes maintenant tout à fait capables de coder votre propre menu (par exemple) ou coder les icones sociales qui seront sur vos layouts. Comme vous le voyez, ça reste assez simple, il ne faut juste pas se mélanger dans les coordonnées.

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 29/08/2015

    Super merci encore pour ce tutoriel au top, clair et précis

    [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