Opacité + onclick + image en avant-plan
Bonsoir !
Je contribue actuellement à la réalisation d'un jeu en ligne, et je me trouve actuellement confronté à un problème...
La map du jeu est affichée sous forme d'un immense tableau sur lequel on met un événement onclick pour détecter les clics du joueur sur la map.
Jusque là, tout marche parfaitement...
Le problème arrive lorsque l'on souhaite afficher le joueur en transparence lorsqu'il devrait être caché par un bâtiment. Pour cela, on utilise la propriété css opacity, pour faire varier l'opacité du personnage.
Mais il devient dès lors impossible de cliquer sur la case où l'opacité a été changée !
J'ai fait toutes les vérifications possibles : le problème ne vient pas du code php, mais se situe bien au niveau du navigateur, qui, visiblement, pense que l'élément dont l'opacité a été modifiée se situe à l'avant-plan de la page, et de ce fait obstrue les clics sur la map...
J'ai par ailleurs constaté que mettre une opacité de 1 (soit complètement opaque) faisait disparaître le problème (mais bien sûr, ce n'est pas le résultat souhaité ^^ ).
Enfin : je n'ai pas constaté ce problème sur IE mais sur Firefox (pour une fois !).
Auriez-vous une solution, ou de l'aide à m'apporter ?
Merci d'avance !
EDIT :
Testez ce code sous Firefox, un coup avec l'opacité et un coup en l'enlevant :
Code:
1
2
| <div id="test" style="width:200px;height:200px;position:absolute;border:1px solid black;" onclick="alert('test');"></div>
<div id="test2" style="width:100px;height:100px;background-color:#00FF00;opacity:0.8;"></div> |
