Réduire la zone cliquable d'un lien image

Bonsoir à tous!
J'ai un souci avec des liens sous forme d'image png. J'ai une série de liens dont la forme schématisée ici rapidos sous paint... ressemble à ça . L'idée et qu'ils soient tous de la meme couleur, et que seul celui survolé change de couleur. Jusqu'ici, c'est bon, mais le problème c'est que, malgré que mes images soient des .png, leur zone cliquable correspond à un rectangle orthogonal et ne suivent pas le contour du graphisme. Je souhaite donc réduire la zone cliquable de ces dernières en gardant les autres caractéristiques des liens, mais je n'y arrive pas.
Sinon, je peux aussi garder uniquement les objets accrochés aux fils en tant que liens, mais, là aussi, je ne sais pas faire changer la couleur du fil en même temps que la souris survole uniquement le lien en bas... Vous l'aurez compris, je débute
Merci de votre aide!
Modifié par lounette (03 Feb 2011 - 01:15)

Salut,

Pour créer des zones cliquables, il suffit d'utiliser les éléments map et area (map pour la carte cliquable, area pour les zones cliquables), ainsi que l'attribut usemap sur l'élément img correspondant à l'image utilisant la carte cliquable, comme suit :

<img src="ton-image.png" alt="L'alternative textuelle qui va bien" usemap="#zones" />
<map id="zones" name="zones">
  <area href="URL" alt="L'alternative textuelle qui va bien" shape="poly" coords="10, 20, 15, 5, 36, 12, 22, 69" />
</map>

L'attribut usemap a pour valeur une ancre pointant vers l'identifiant de l'élément map à utiliser. L'élément area comporte :
* l'attribut href, si la zone sert de lien ;
* l'attribut alt, pour fournir une alternative textuelle (comme pour les images) ;
* l'attribut shape, qui permet d'indiquer la forme géométrique de la zone et peut avoir l'une des valeurs suivantes : "default" (la zone s'étend sur toute la carte), "rect" (zone rectangulaire), "circle" (zone circulaire) et "poly" (zone en forme de polygone) ;
* l'attribut coords, qui définit les coordonnées de la zone (l'origine se trouvant en haut et à gauche de l'image) et dont la valeur suit une syntaxe variable en fonction de la valeur de l'attribut shape :
** si shape a pour valeur "rect", alors la valeur de coords est "X-gauche, Y-haut, X-droit, Y-bas" (X-gauche = coordonnée horizontale à gauche de la zone, Y-haut = coordonnée verticale en haut de la zone, X-droit = coordonnée horizontale à droite de la zone, Y-bas = coordonnée verticale à droite de la zone) ;
** si shape a pour valeur "circle", alors la valeur de coords est "centre-X, centre-Y, rayon" (centre-X = coordonnée horizontale du centre de la zone circulaire, centre-Y = coordonnée verticale du centre de la zone circulaire, rayon = rayon de la zone circulaire) ;
** si shape a pour valeur "poly", alors la valeur de coords est constituée de paires de coordonnées définissant un point, comme "X1, Y1, X2, Y2, X3, Y3" (X = coordonnée horizontale du point, Y = coordonnée verticale du point).
Pour l'attribut coords, toutes les valeurs possibles sont des nombres séparés par des virgules.

Pour en savoir plus, lire la section de la spécification HTML 4.01 consacrée aux cartes cliquables côté client.

Quant à l'effet de survol que tu cherches, il est un peu tordu à réaliser pour une zone cliquable.
Modifié par Victor BRITO (03 Feb 2011 - 09:22)