Définir des zones cliquables sur une image (1)

Publié le par PêUR

Mise à jour le 17/02/2006 11:38

Il peut-être intéressant de rendre certaines zones d'une image cliquables afin de rediriger l'internaute vers un site ou une URL particulière.

Si vous avez beaucoup de zone à déterminer l'utilisation d'un logiciel peut se révéler intéressante: Définir des zones cliquables sur une image (2)

 

Comment procéder?

Dans l'éditeur, en mode HTML saisir le code suivant:

<map name="graphique">
<area shape="rect" coords="20,20,100,60" href="http://fr.wikipedia.org/wiki/Accueil" alt="Zone 1">
<area shape="rect" coords="140,20,220,60" href="http://www." alt="Zone 2"></map>
<img src="http://idata.over-blog.com/0/08/58/81/articles/zonecliquable.jpg"  alt="Graphiqe Cliquable" usemap="#graphique">



On obtient le résultat ci-dessous:

Zone 1 Zone 2

Graphiqe Cliquable

Maintenant, adaptez le à vos besoins:

Avec <map name="graphique"> on donne un identifiant à l'image, dans l'exemple: graphique.

Entre les balises <map...> et </map> on définis un masque qui va venir se superposer sur l'image et dans lequel on qualifie les zones associées à des liens. Avec <area...> on définis le positionnement d'une zone cliquable. Il faut autant de balise <area...> que de zones cliquables souhaitées.

Avec shape="rect" on détermine une surface rectangulaire associé à un lien, avec shape="circle" un cercle, et avec shape="polygon" un polygone.

Par coords= on donne les coordonnées des surfaces associées aux liens. Les coordonnées sont en pixels et séparées par des des virgules.

  • On définit un rectangle (shape="rect") avec les coordonnées x1,y1,x2,y2
    qui signifient:
    x1 = coin en haut à gauche, pixels à partir de la gauche
    y1 = coin en haut à gauche, pixels à partir du haut
    x2 = coin en bas à droite, pixels à partir de la gauche
    y2 = coin en bas à droite, pixels à partir du haut
  • On définit un cercle (shape="circle") avec les coordonnées x,y,r
    qui signifient:
    x = centre, pixels à partir de la gauche
    y = centre, pixels à partir du haut
    r = Rayon en pixels
  • On définit un Polygone (shape="poly") avec les coordonnées x1,y1,x2,y2 ... xn,yn
    qui signifient:
    x = pixels d'un coin à partir de la gauche
    y = pixels d'un coin à partir du haut

 

Par href on détermine le lien associé, on peu aussi utiliser les attributs target et alt

Enfin, la balise <img src=...> détermine l'image sur laquelle vient se superposer le masque de zones cliquables. On l'appel dans cette balise avec l'instruction usemap="#graphique", graphique étant le nom déterminer dans la première balise <map name="graphique">

Dans l'exemple seul le lien de la zone 1 est valide

Publié dans Webdev

Commenter cet article

Arkham09 02/05/2007 13:08

Ok, merci je vais voir comment je peux me débrouiller autrement.

PêUR 02/05/2007 16:59

;)

Arkham09 02/05/2007 12:45

En fait pour faire simple j'aimerais définir des zones cliquables sur le fond d'écran de mon blog.

La question c'est: est-il possible d'inclure directement dans le CSS un code qui permettrait de rendre possible cela? car votre code ne marche que pour les images publiées en tant qu'article sur le blog.

J'espère que j'ai été plus clair, sinon c'est pas grave j'essairai de me débrouiller autrement ;-)

Merci d'avance.

PêUR 02/05/2007 12:54

Non ce n'est pas possible en utilisant uniquement le css.

Arkham09 01/05/2007 19:15

Bonsoir Pêur,

aurais tu le même code a inséré cette fois non dans un article mais directement dans le CSS? je m'explique:

Je n'arrive pas à faire en sorte qu'on ne voye que mon article sur la page d'acceuil de mon blog test (en haut et en bas, un espace existe, or j'ai enlevé et l'entête et le pied), il me faut donc mettre un fond d'écran directement dans le css afin qu'il n'y ait plus d'espace.

Ton astuce est géniale mais inintégrable dans le Css, d'où ma requête.

Merci d'avance en espérant que t'es compris où je voulais en venir ;-) (j'explique très mal en général)

PêUR 02/05/2007 12:00

Désolé, je ne comprend pas du tout ce que tu souhaites et je ne vois pas le rapport avec cet article????

Chogami :0023: 15/03/2007 15:05

L'exemple se trouve par ici http://chouaibou.over-blog.com/article-5934039.html sur la première image non animée

PêUR 15/03/2007 15:32

Réponse: ces infobulles ne peuvent être modifiées, c'est le navigateur qui les crée en leur donnant la valeur de l'attribut title.

Chogami :0023: 15/03/2007 15:03

Déja seul, j'ai déja compris les deux premières questions que je t'ai posé maintenant, c'est une autre. En occurence, la couleur de fond des infobulles qui apparaissent sur l'image

PêUR 15/03/2007 15:20

J'attend un peu pour répondre, tu vas sûrement trouver :)