Des livres incontournables pour tout maîtriser
| Auteur | |
|---|---|
| Lothindil |  |
 297 Posts |
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à :   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 :  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). Celui qui pose une question risque cinq minutes d'avoir l'air bête, celui qui ne pose pas de question restera bête toute sa vie. |
  |
|
| yakuza | |
| 6 Posts |
Bonjour, Je vois le soucis, déjà essaie de sortir le CSS de ton code Html  Ensuite j'ai peut-être une solution... Mets toutes tes images en z-index:1 par exemple, et lorsque la souris passe sur une image, grâce au sélecteur :hover tu mets l'image survolée en z-index:2; #monimage { position:absolute; z-index:1; } #monimage:hover{ position:absolute; z-index:2; } Cela devrait faire en sorte que les conflits s'annulent. Maintenant au niveau de l'imagemap je pense, je n'en suis pas sur, que ça devrait fonctionner... Maintenant tu bosse en PNG 24, je ne sais pas si le survol sur la transparence fera quelque chose... A tester... David |
|
|
| fvsch | |
 20100 Posts |
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. |
| |
|
| Lothindil | |
| 297 Posts |
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) Celui qui pose une question risque cinq minutes d'avoir l'air bête, celui qui ne pose pas de question restera bête toute sa vie. |
| |
|
| jb_gfx | |
| 2853 Posts |
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) Je ne sais pas si je suis cultivé ou si je viens d'inventer deux nouveaux mots. |
| |
|
| fvsch | |
| 20100 Posts |
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) |
| |
|
| jo_link_noir | |
 298 Posts |
Salut, Il y a quelque année j'avais fait un code js pour calculer les coordonnées d'une case dans une carte hexagonale en 3D isométrique ou non en fonction de la position de la sourie. C'est ici, avec un exemple ici, si ca peut aider... |
|
|
HTML Best Effort ValidCSS 3 Might Become Valid
J'ai besoin d'un anti-<span>.
(José Bové)
Suggérer une citation best-of
Alsacréations est une communauté dédiée à la conception de sites web de qualité, grâce aux standards W3C, aux feuilles de styles CSS, aux langages HTML et JavaScript, et à l'accessibilité (en savoir plus...)
http://www.alsacreations.com/
