22-03-2012, 08:06 PM
(Modification du message : 22-03-2012, 08:15 PM par supermeganono.)
http://www.damocorp.com/test.php C'est fonctionnel.
Donc si quelqu'un tombe sur le sujet et est intéressé voici le code :
( ce code est un code test, il est donc certainement à améliorer )
Explication : Je possède 5 images pour la réalisation :
En attendant, j'affiche toutes les cases via les formules en php.
J'y superpose 2 choses : 1 les objets ( planète, vaisseaux etc... ) et 2 l'image de survol au passage de la souris.
Pour finir avec le z-index 2 je superpose tout au dessus, le pixel transparent avec le map area. Ainsi au survol de la souris, seul le map area est actif.
j'ai pas encore programmé la dés-sélection, mais il est clair que ça sera à faire.
Le CSS :
[pastebin]pFiH1BU3[/pastebin]
Niveau php et javascript ( en Jquery ) c'est relativement simple tout est dans les commentaires :
Tout rentre dans le div avec pour classe la carte. Et en css on les superpose via le position:absolute.
[pastebin]dgyc6xRt[/pastebin]
Voila, donc si vous tombez sur ce topic, vous avez la solution mis en place pour la base.
Merci à toutes et tous pour l'aide apportée !
Comme la page test changera pour d'autre test, voici un screenshot du résultat :
![[Image: maptest.jpg]](http://www.damocorp.com/image/screenshot/maptest.jpg)
Donc si quelqu'un tombe sur le sujet et est intéressé voici le code :
( ce code est un code test, il est donc certainement à améliorer )
Explication : Je possède 5 images pour la réalisation :
- Un pixel transparent de 1*1 que j'étire sur toute la surface de 900*450
- Un image de 100*50 qui représente le fond de la carte
- Une image de 100*50 qui représente la carte au survol de la souris
- Une image de 100*50 qui représente la case sélectionné ( verte )
- Une image de 100*50 avec le vaisseau
En attendant, j'affiche toutes les cases via les formules en php.
J'y superpose 2 choses : 1 les objets ( planète, vaisseaux etc... ) et 2 l'image de survol au passage de la souris.
Pour finir avec le z-index 2 je superpose tout au dessus, le pixel transparent avec le map area. Ainsi au survol de la souris, seul le map area est actif.
j'ai pas encore programmé la dés-sélection, mais il est clair que ça sera à faire.
Le CSS :
[pastebin]pFiH1BU3[/pastebin]
Niveau php et javascript ( en Jquery ) c'est relativement simple tout est dans les commentaires :
Tout rentre dans le div avec pour classe la carte. Et en css on les superpose via le position:absolute.
[pastebin]dgyc6xRt[/pastebin]
Voila, donc si vous tombez sur ce topic, vous avez la solution mis en place pour la base.
Merci à toutes et tous pour l'aide apportée !
Comme la page test changera pour d'autre test, voici un screenshot du résultat :