Liens d'image CSS non rectangulaires

Question

J'ai l'exigence suivante:

Une grande image contient plusieurs «points d'accès» qui doivent être liés à d'autres pages. Cela semble simple. J'ai créé une simple page html, une div avec l'image d'arrière-plan et des liens positionnés absolus en utilisant CSS avec des survols d'images-objets.

Cependant, j'ai maintenant été présenté avec une autre image et les hotspots ne sont pas carrés, mais des formes irrégulières. Dans un exemple, ils sont similaires aux planches de surf. Toutes les idées comment je peux obtenir les liens pour répondre uniquement à la boîte de délimitation réelle de l'image. Il y a aussi des cas où les «hotspots» sont en forme de parallélogramme et aboutés l'un à côté de l'autre.

La création d'images rectangulaires dans cette instance n'obtient pas les résultats requis.

Je pense que les imagemaps peuvent être une solution, mais je veux d'abord explorer toutes les alternatives.

Espérons que cela a du sens.

Answer 1

L'alternative aux mappages d'image HTML sont les sprites Css comme décrit dans cette a list apart article. Lisez la section sous "formes irrégulières".

Cela prend un peu de travail, mais le HTML final sera sémantiquement plus attrayant (c'est-à-dire pour les moteurs de recherche) qu'avec les cartes-images standard.

Answer 2

HTML image maps sont la voie à suivre - ils prennent en charge des polygones arbitraires, et sont bien compris par les lecteurs d'écran et autres.

Vous pourriez être en mesure de faire quelque chose de malin avec SVG dans les navigateurs modernes, mais ça ne va pas fonctionner pour la foule IE6.