Bonjour à tous
 
Je cherche actuellement à créer via HTML / javascript / CSS des zones cliquables ainsi que des images ayant une forme particulière : celle d'un losange.
Je m'explique. Le but est de faire une mosaïque de différentes images (des losanges) cliquables ou chacune permet de renvoyer sur une page donnée.  
 
Toujours pas clair peut-être ? Voilà donc un exemple pour aider : http://damienfaivre.fr/test.html
 
La première image, en haut, est créée via javascript avec l'aide de l'élément HTML <canvas>. C'est un premier test, une première piste, mais j'ai bien peur que ça ne soit pas concluant.  
 
Le plus intéressant, c'est la suite : ces deux losanges, l'un orange et l'autre vert. Vous voyez donc la structure que je veux obtenir : assembler des losanges afin d'obtenir une mosaïque, chacun séparé par quelques pixels.
Chaque losange doit donc être entièrement cliquable. Sur l'exemple, j'ai obtenu ces zones cliquables via les éléments MAP et AREA (l'effet de coloration au survol est obtenu grâce à un plugin).  
Tout y est me direz vous : j'ai mes losanges, ma mosaïque, mes liens et mes zones polygonales.
 
MAIS, essayez donc de survoler le losange orange sur le bord adjacent à celui du losange vert ... oui, voilà le problème. Même si la zone cliquable est un losange et que l'image représente un losange, cette même image reste un rectangle dont les coins (transparents, certes ...) empiètent donc sur les éléments "en dessous" de lui.  
 
J'ai beaucoup de mal à expliquer clairement mon problème, mais j'espère que vous comprendrez ce que je cherche comme résultat.
Il y aurait l'option d'une grande image de fond sur laquelle je définis plusieurs AREA ... mais je veux éviter ça.
 
Le mieux serait à mon sens d'appliquer un masque sur l'image afin de ne rendre visible et "survolable" que la zone vitale de l'image, c'est à dire le losange. Je sais que la gestion des masques est possible en javascript et en CSS, mais j'aimerais vos avis.
 
Peut-être une fonction javascript qui fait passer au premier plan l'image que je survole actuellement ?
 
Je ne cherche pas forcément à être compatible avec tous les navigateurs, je suis conscient que cela posera même problème à certains navigateurs récents, mais ce n'est pas un problème  
 
J'ai le souvenir d'une mosaique sous forme d'un puzzle qui correspondait exactement à ce que je cherche actuellement, je sais donc que c'est possible, mais comment ?  
 
Merci en avance pour vos réponses !
 
bonne journée à vous, et bon casse tête