Superposition d'images et imagemap

Bonjour ^^

Voilà, j'ai un problème avec des superpositions d'images et des images map.

En gros mon principe : j'ai une série d'image de 164 px de haut sur 120 de large. Constitué forcément d'un hexagone dans la partie basse, avec ou sans dessins dans la partie haute (mais ça change rien à mon problème), de ce type-là :
http://www.maerah.com/skin3/tuiles-bat/tuile-test.png http://www.maerah.com/skin3/tuiles-bat/tuile-test1.png

Ces images se superpose pour faire une forme de carte. (comme on peut le voir là : carte test)

Ce que je souhaiterais c'est que chaque hexagone soit cliquable individuellement, menant vers des liens différents. J'ai donc mis en place une série d'image map pour chaque image, reprenant l'hexagone.
Ca marche très bien quand il n'y a qu'une seule tuile. Dans le cas où deux tuiles se superposent, la partie lien saute à l'endroit de la superposition.

Un petit dessin pour que ça soit plus clair :
http://img233.imageshack.us/img233/2319/bugimagemap.jpg

En vert : là où l'image map s'applique normalement, en jaune là où y a pas de lien et que c'est normal. En bleu, là où l'image d'au-dessus supprime l'image map (celle des 2 images en-dessous).

<div id="carte" style="position: relative;">
   <map name='map1'>
      <area shape='poly' coords='60,45,119,74,119,133,59,163,0,134,0,74' href='http://www.yuimen.com/ficheposs.php?id=1' />
   </map>
   <div class='tuile' style='left: 440px; top: 210px; position: absolute; '>
      <img usemap='#map1' src='skin3/tuiles-bat/tuile-test.png' height='164px' width='120px' />
   </div>
   <map name='map2'>
      <area shape='poly' coords='60,45,119,74,119,133,59,163,0,134,0,74' href='http://www.yuimen.com/ficheposs.php?id=2' />
   </map>
   <div class='tuile' style='left: 560px; top: 210px; position: absolute; '>
      <img usemap='#map2' src='skin3/tuiles-bat/tuile-test.png' height='164px' width='120px' />
   </div>
   <map name='map4'>
      <area shape='poly' coords='60,45,119,74,119,133,59,163,0,134,0,74' href='http://www.yuimen.com/ficheposs.php?id=4' />
   </map>
   <div class='tuile' style='left: 500px; top: 300px; position: absolute; '>
      <img usemap='#map4' src='skin3/tuiles-bat/tuile-test.png' height='164px' width='120px' />
   </div>
</div>

Je vois deux solutions:

1. Soit tu fais une image map qui couvre l'ensemble de ta grille et définit tous les hexagones (quitte à s'appliquer sur une image transparente placée dessus tes sprites).

2. Soit tu utilises des technos plus adaptées à ce type de développement, notamment SVG ou Canvas.

Pour sortir le CSS du code, ça sera fait, mais plus tard. Là c'est juste une page de test et j'ai pas envie de commencer à bosser sur un CSS avant d'avoir la moindre idée du design de la page.

Pour le hoover, ça serait graphiquement affreux d'avoir la case de derrière qui passerait au-dessus.

Fvsch : je m'attendais à ce genre de solutions... mais les deux sont complexes à mettre en oeuvre.
La première parce que ça fait une grosse image transparente à coller au-dessus de ça, avec une complexité pas piquée des vers pour définir les zones (les URL pouvant être très différentes l'une de l'autre).
La seconde, parce que je tiens à avoir ce système totalement compatible avec FF 3.6, IE 7+ et les navigateurs façon smartphone et tablette (ce qui exclue le flash aussi et donc le SVG à ma connaissance).

Bon, je vais devoir me replier vers la première, à moins que quelqu'un ait une solution miracle.





En écrivant ce post, j'ai eu une idée, qui permettrait de zapper l'image transparente (ce qui allège considérablement le poids de l'affaire) : découper ma surface bleue en 2 images map qui correspondrait à l'image map de l'image d'en-dessous.
Modifié par Lothindil (16 Jan 2012 - 16:29)

A l'époque (jurassique) ou je bossais sur des jeux 2D de ce genre, pour ce genre de cas on travaillait avec des couches. Une couches pour les hexagones avec l'herbes, un couche superposée avec les arbres (décors) et qui est là uniquement pour faire joli. La seule couche cliquable étant l'herbe (le plateau de jeu).
Modifié par jb_gfx (16 Jan 2012 - 22:48)

Hello,

En JavaScript tu dois pouvoir récupérer les coordonnées d'un clic et donc déterminer sur quelle case l'utilisateur a cliqué. C'est pas très compliqué mais oui, c'est de la programmation, ce qui est plutôt logique pour la réalisation d'un jeu.

Typiquement avec Canvas c'est le genre de solution que tu devrais utiliser pour déterminer où l'utilisateur a cliqué. Mais tu peux aussi le faire avec un plateau de jeu créé à base de plusieurs éléments HTML plutôt que généré dans un Canvas.
Modifié par fvsch (17 Jan 2012 - 13:03)