Creer un lien sur une image triangulaire

Bonjour,

Problème simple mais dont je ne connais pas la solution.
J'ai une image comme celle-ci et j'aimerais creer des liens sur chacun des triangles.
http://www.french-creations.com/exemple.jpg

Je crois qu'il existe les "slice tool" sur Photoshop pour créer des images html. Mais cela donne des tableaux et je n'aime pas ca. Et puis je n'arrive pas a faire des slices pas carre.

Quelqu'un aurait-il une autre solution pour creer des liens sur ces images ?
Merci d'avance pour votre aide.

Au niveau outil, dreamweaver permet de dessiner le tout à la souris. Ne pas oublier les attributs alt sur les area pour l'accessibilité.

Bluegriffon dispose peut-être aussi d'un outil pour ce genre de chose.

Et l'eau,

@Patidou : Je ne savais pas que BlueGriffon le fait. En ce qui concerne les alt sur le map area : +1

@fanny : Si tu n'as pas DW, tu peux aussi faire un map area avec Gimp : http://docs.gimp.org/fr/plug-in-imagemap.html

Ce tutoriel dans le même esprit va pouvoir t'aider: http://www.grafikart.fr/tutoriels/jquery/carte-interactive-177

Si je me souviens bien il utilise Dreamweaver.

EDIT: Pas vu que Dreamweaver était déjà cité.
Modifié par Victory (24 Jun 2012 - 22:40)

Si je ne dis pas de bêtise, le map area existe depuis le html 4.0 ou est ce qu'il existait avant ?

Bah nickel !

Par contre je ne tiens pas à te vexer car je ne suis excellent en anglais, mais il y a de sérieux problèmes de conjugaison. Genre les "s" à la troisième personne que tout le monde remarque.

Et la phrase pour le triangle du bas me semble fausse. Et celle de gauche aussi.
Effectivement ça serait pas mal de revoir le copy.

En passant, deux remarques sur le code:
- Si une zone de l'image contient une phrase descriptive, peut-être faudrait-il reprendre cette phrase dans le @alt?
- Le texte de l'image est en anglais, la meta description en français.
- Il manque un attribut @lang sur l'élément racine.
(Bon ok ça fait trois remarques.)

Moi je suis fan du slogan de Pastis.

Salut,
Ce qui est dommage est que rien n'indique sur quoi on clique. Mets un opacity peut-être au hover.

On peut utiliser svg avec un fallback sur le code actuel pour les vieux navigateurs.
Modifié par Patidou (27 Jun 2012 - 11:07)

Salut, pourquoi ne pas mettre une infobulle sur les différentes sections de ton image, histoire de bien différencier le découpage ! Je pense que c'est plus simple à mettre en oeuvre.

Sinon l'idée de jmlapam est excellente !
Modifié par tournikoti (27 Jun 2012 - 13:42)