Précédent   Forum des professionnels en informatique > Webmasters - Développement Web > JavaScript
JavaScript Forum programmation JavaScript. Lire Cours JavaScript, FAQ JavaScript et Sources JavaScript
Partagez cette discussion sur d'autres réseaux sociaux : Viadeo Twitter Google Facebook Digg Delicious MySpace Yahoo
Réponse Proposer ce sujet en actualité
 
Outils de la discussion
Publicité
Vieux 28/06/2009, 23h04   #1
Invité régulier
 
Date d'inscription: juillet 2007
Âge: 18
Messages: 10
Par défaut 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 :
<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>

Dernière modification par Cyprien_ ; 29/06/2009 à 00h27.
Cyprien_ est déconnecté   Envoyer un message privé Réponse avec citation
Vieux 29/06/2009, 08h28   #2
Rédacteur/Modérateur
 
Avatar de bigboomshakala
 
Date d'inscription: avril 2004
Localisation: Ile-de-France
Âge: 29
Messages: 1 972
Par défaut

salut,

si tu mets le zIndex à 2 sur la map et 1 sur l'objet ?
__________________
Modérateur/Rédacteur

Tutoriels/Articles :
- Espace de noms (ou namespace) en JavaScript
- Créer une table HTML éditable en JavaScript (nouveau)
- Smile.Fx : Bibliothèque d'effets visuels en JavaScript (en cours - démo disponible)

mon espace
bigboomshakala est déconnecté   Envoyer un message privé Réponse avec citation
Vieux 29/06/2009, 11h16   #3
Invité régulier
 
Date d'inscription: juillet 2007
Âge: 18
Messages: 10
Par défaut

Effectivement, c'était tout bête ^^

Merci beaucoup
Cyprien_ est déconnecté   Envoyer un message privé Réponse avec citation
NEWS JAVASCRIPTF.A.Q JSTUTORIELS JSSOURCES JSLIVRES JS

Réponse Proposer ce sujet en actualité

Précédent   Forum des professionnels en informatique > Webmasters - Développement Web > JavaScript



Outils de la discussion

Règles de messages
Vous ne pouvez pas créer de nouvelles discussions
Vous ne pouvez pas envoyer des réponses
Vous ne pouvez pas envoyer des pièces jointes
Vous ne pouvez pas modifier vos messages

Les balises BB sont activées : oui
Les smileys sont activés : oui
La balise [IMG] est activée : oui
Le code HTML peut être employé : non
Trackbacks are non
Pingbacks are non
Refbacks are non



Fuseau horaire GMT +1. Il est actuellement 11h36.


Vos questions techniques : forum d'entraide JavaScript - Publiez vos articles, tutoriels et cours
et rejoignez-nous dans l'équipe de rédaction du club d'entraide des développeurs francophones
Nous contacter - Hébergement - Participez - Copyright © 2000-2010 www.developpez.com - Legal informations.