Zones cliquables sur image

Bonjour à tous,

je me suis lancé dans le projet de créer un jeu en Php et Ajax qui serait semblable au jeu de plateau Risk. Cependant, chaque territoire doit pouvoir être sélectionner proprement. J’entends par là qu'une sélection de type rectangulaire, ovale ou polygonale ne serait pas les plus pratique à mettre en place sur une image de cette importance.

J'illustre avec la carte que j'ai faite :

http://www.jellybeanexperience.com/Map.png

Une solution auquel j'ai pensé mais je ne sais pas si ça existe ... :

- On place une grille avec les frontières des zones ainsi que le fond bleu .

- On place les zones en CSS (chacune placée via la balise div > "img")

- Exemple : lorsque l'on veut cliquer sur l'Alaska, un Event Javascript onClick() va exécuter l'action à effectuer.
Cependant il serait bien d'utiliser une fonction javascript ou html .... (j'en sais rien justement ) qui pourrait gérer les canaux alpha entre l'entrelacement des images)


Désolé si je ne suis pas très clair, mais c'est pas facile à expliquer .

Je vous ai expliqué ce que j'aimerai obtenir histoire de vous faire une idée ce j’attends. ^^

Salut à toi,

Si je ne me trompe pas on peut faire du découpage d'image avec Gimp et exporter ce découpage en form html / css. Cela peut éventuellement t'intéresser pour ainsi créer des zones en html / css et ne pas devoir magouiller avec des images.

Je vais encore vérifier mais normalement c'est Gimp qui le permet.

BiwAa a écrit :
Salut à toi,

Si je ne me trompe pas on peut faire du découpage d'image avec Gimp et exporter ce découpage en form html / css. Cela peut éventuellement t'intéresser pour ainsi créer des zones en html / css et ne pas devoir magouiller avec des images.

Je vais encore vérifier mais normalement c'est Gimp qui le permet.

Merci de ta réponse ^^

Je ne pense pas que le fait de découper les images avec un logiciel serait la solution car les images restent de format carré. Pour peu que deux zones s'entrelacent, la zone dont le "claque est le plus haut" prendra l'ascendant sur la zone inférieure que l'on désire accéder C'est là que ce situe mon problème et seul un traitement par les canaux alpha pourrait encore passer (je pense )

Je pense que le mieux est encore de faire un <map> mais avec un bon paquet de coordonnées ...

Alors justement c'est ce que tu peux faire avec ce que je te dis, tu traces le contour en faisant du points par points et le programme te sort le code html <map>.

Du moins c'est ce que j'ai comme souvenir

Ah, je vais chercher alors ^^ Merci pour l'info

Ecoute je me souvient plus très bien mais j'ai deux amis qui l'ont déjà utilisé quelques fois. Je leur demande et je te tiens au courant si je retrouve comment faire

Voilà j'ai trouvé donc dans Gimp tu ouvres ton image ensuite clic droit sur celle-ci > filtres > web > image découpable. De la une fenêtre s'ouvre et tu peux découper comme bon te semble ton image.

J'espère t'avoir été utile