TourDeJeu, le réseau des jeux en ligne alternatifs : jeux web multijoueurs, jeux par forum. En savoir +

Flux RSS des discussions du forum : pour les joueurs, et pour les créateurs et MJ
  Reply to this topicStart new topicStart Poll

> Activer Le Onmouseover Au Dessus D'un Layer Mobile
nygma
Ecrit le : Vendredi 24 Décembre 2004 à 00h22
Quote Post


Pro
*

Groupe : Membre
Messages : 129


Salut !

J'ai un soucis. je refais l'interface de mon jeu, et je veux que la zone d'effet des sorts soit visible. j'ai donc posé un gif mobile, qui se déplace comme il faut. (c'est pas centré, mais c'est exprès pour les test)
je met à jour la position du layer par le onmouseover sur la carte locale.

mais lorsque la souris passe SUR le layer, alors, le onmouseover ne marche plus. j'ai essayé de le mettre le onmouseover dans le DIV et dans l'IMG, mais que dalle.

Voici le lien pour comprendre mon problème :

http://www.mydila.net/tests3.5/Mydila3.5zone.htm

Le onmouseover marche dans la zone centrale, où y'a les icones. là, ça fait bouger la zone rouge mobile. donc, de bas-droite vers haut-gauche, la zone suis la souris. mais si on repart en sens inverse, la souris passe DESSUS la zone rouge, et rien ne se passe....

(PS : ça marche pas sous firefox.)

PPS : oui, j'ai cherché
PPPS : oui j'ai déjà posé la question sur des forums 'spécialisés'.... mais bon.... ça répond pas vite.

si quelqu'un a une idée.....
PMEmail PosterUsers Website
Top
Magauss
Ecrit le : Vendredi 24 Décembre 2004 à 10h56
Quote Post


Kid
*

Groupe : Membre
Messages : 12


QUOTE
(PS : ça marche pas sous firefox.)


bouhhhhh crybaby.gif

essaye de déclarer ton div (id=testit) à l'intérieur du tag captant les événements onmouseover (c'est un TD je crois d'après ce que j'ai pu voir), IE devrait propager l'événement reçu par le DIV vers le TD (du fait de l'inclusion)

CF: http://www.anaesthetist.com/mnm/javascript/part7.htm (voir le paragraphe event bubbling)
PMEmail Poster
Top
nygma
Ecrit le : Vendredi 24 Décembre 2004 à 11h17
Quote Post


Pro
*

Groupe : Membre
Messages : 129


Non, ça ne marche toujours pas....

mais je vais lire ce que tu me conseilles
PMEmail PosterUsers Website
Top
Magauss
Ecrit le : Vendredi 24 Décembre 2004 à 11h29
Quote Post


Kid
*

Groupe : Membre
Messages : 12


curieux, pourtant j'avais fait un petit essai avec :

CODE

<html>
<head>
</head>
<body>
<DIV style="Z-INDEX: 1000; LEFT: 10px; POSITION: absolute; TOP: 10px"> MON LAYER</DIV>


<table><tr><td onmouseover="alert('titi')">
MA CELLULE</td></tr></table>
</body>
</html>

et
CODE

<html>
<head>
</head>
<body>


<table><tr><td onmouseover="alert('titi')">
<DIV style="Z-INDEX: 1000; LEFT: 10px; POSITION: absolute; TOP: 10px"> MON LAYER</DIV>
MA CELLULE</td></tr></table>
</body>
</html>



dans le premier cas je me retrouve avec ton problème (impossible d'afficher titi si la souris se trouve sur le layer) dans le sceond cas, le javascript s'éxécute toujours même si la souris se trouve sur le layer. Y'a peut être un paramètre que je n'ai pas pris en compte dans ton problème wall.gif
PMEmail Poster
Top
nygma
Ecrit le : Vendredi 24 Décembre 2004 à 12h45
Quote Post


Pro
*

Groupe : Membre
Messages : 129


là je rentre chez moi en vendée.

je regarderai ça demain, si j'ai pas trop la tête dans le C...

mais bon, en partant d'un cas qui marche, j'arriverai bien à trouver.

Merci ! je vous en tiens au courant.
PMEmail PosterUsers Website
Top
zumba
Ecrit le : Vendredi 24 Décembre 2004 à 12h55
Quote Post


Ouf
*

Groupe : Membre
Messages : 496


J'ai eu ce genre de cas :
moi pour faire ca je met un autre onmouseover sur le <img > qui contient ton gif.
après il faut juste extrapoler en additionnant les coordonées top et left du gif (qui d'ailleurs n'a pas besoin d'être contenu dans un layer, met les css d'élément flottant directement sur le <img>, ca sera plus leger) avec les coordonnées eventX et eventY du mouseover, puisque ce sont des coordonnées relatives à l'intérieur de l'image.


--------------------
Z
PMEmail Poster
Top
nygma
Ecrit le : Vendredi 24 Décembre 2004 à 20h21
Quote Post


Pro
*

Groupe : Membre
Messages : 129


QUOTE (zumba @ 24 Dec 2004, 12:55 )
J'ai eu ce genre de cas :
moi pour faire ca je met un autre onmouseover sur le <img > qui contient ton gif.
après il faut juste extrapoler en additionnant les coordonées top et left du gif (qui d'ailleurs n'a pas besoin d'être contenu dans un layer, met les css d'élément flottant directement sur le <img>, ca sera plus leger) avec les coordonnées eventX et eventY du mouseover, puisque ce sont des coordonnées relatives à l'intérieur de l'image.

QUOTE
je met un autre onmouseover sur le <img > qui contient ton gif.


ben c'est évidemment la première chose que j'ai essayé, et ça ne marchait pas.

QUOTE
après il faut juste extrapoler en additionnant les coordonées top et left du gif avec les coordonnées eventX et eventY du mouseover, puisque ce sont des coordonnées relatives à l'intérieur de l'image.


ok ok ok... je vais essayer demain

merci !

PMEmail PosterUsers Website
Top
La Gloïre
Ecrit le : Vendredi 24 Décembre 2004 à 23h51
Quote Post


Pro
*

Groupe : Membre
Messages : 155


Puis la compatibilité avec Mozilla/Firefox, ce serait bien aussi, hein...
PMEmail PosterUsers Website
Top
nygma
Ecrit le : Samedi 25 Décembre 2004 à 13h14
Quote Post


Pro
*

Groupe : Membre
Messages : 129


j'ai installé firefox et netscape. ils se comportent de la même manière.
donc, je vais prendre le temps de m'occuper de la compatibilité. je voudrais pas perdre des joueurs pour une question de navigateur.... sad.gif

Ah oui : JOYEUX NOEL !!!

ps : Zumba, j'ai maté continent... impressionnant.... thumbsup.gif
PMEmail PosterUsers Website
Top
nygma
Ecrit le : Samedi 25 Décembre 2004 à 18h12
Quote Post


Pro
*

Groupe : Membre
Messages : 129


bon, après plusieurs essais :

1) Magauss : ton exemple ne marche pas. il te donne l'impression de marcher car les zones sont petites.
essaye avec ça : (même code que toi, mais avec + de text)

CODE
<html>
<head>
</head>
<body>
<table><tr><td onmouseover="alert('titi')">
<DIV style="background:white;Z-INDEX: 1000; LEFT: 10px; POSITION: absolute; TOP: 10px">
MON LAYERMON LAYERMON LAYERMON LAYERMON LAYER<br>
MON LAYERMON LAYERMON LAYERMON LAYERMON LAYER<br>
MON LAYERMON LAYERMON LAYERMON LAYERMON LAYER<br>
</DIV>
MA CELLULEMA CELLULEMA CELLULEMA CELLULEMA CELLULEMA CELLULEMA CELLULEMA CELLULE<br>
MA CELLULEMA CELLULEMA CELLULEMA CELLULEMA CELLULEMA CELLULEMA CELLULEMA CELLULE<br>
MA CELLULEMA CELLULEMA CELLULEMA CELLULEMA CELLULEMA CELLULEMA CELLULEMA CELLULE<br>
</td></tr></table>
</body>
</html>


intéressant : si tu ajoutes
CODE
onmouseover="alert('t0t0')"
dans le div, tu remarqueras que l'évènement onmouseover est généré, mais une seule fois par passage de la souris!! lorsque la souris reste sur le layer, alors, c'est comme si la souris étant DEJA sur le layer, l'évenèment 'mouse over' n'a plus lieu d'être remis à jour.

Zumba :
j'ai effectivement remplacé le DIV par un IMG flottant, ça marchera en effet tout aussi bien. Seul hic, j'ai toujours le même problème.
une fois au dessus du gif, l'évenement onmouseover ne se déclenche qu'une seule fois.... j'ai viré la barre d'image IE pour être sur que c'était pas elle qui me gênait. mais non....


CODE
<html>
<head>
<META HTTP-EQUIV="imagetoolbar" content="NO">
</head>
<body>
<table><tr><td onmouseover="alert('titi')">
<IMG SRC="zone3.gif" style="POSITION: absolute; " onmouseover="alert('toto')"> </DIV>
MA CELLULEMA CELLULEMA CELLULEMA CELLULEMA CELLULEMA CELLULEMA CELLULEMA CELLULE<br>
MA CELLULEMA CELLULEMA CELLULEMA CELLULEMA CELLULEMA CELLULEMA CELLULEMA CELLULE<br>
MA CELLULEMA CELLULEMA CELLULEMA CELLULEMA CELLULEMA CELLULEMA CELLULEMA CELLULE<br>
</td></tr></table>
</body>
</html>



Vous remarquerez aussi que le onmouseover sur la cellule ne s'active aussi qu'une seule fois. le onmouseover n'est donc généré qu'au CHANGEMENT de zone, et non à chaque mouvement de la souris.

il faut donc utiliser l'évenement onmousemove tout court, auquel on associe une fonction qui remet à jour la position du layer....

(trop con, j'avais déjà le code javascript pour faire ça, repompé ailleurs, mais j'avais pas pris le temps de plonger dedans. le code en question est dans mydila.js, si ça intéresse des gens....)

bon ben merci quand même, vous m'aurez bien aidé à faire avancer le schmilblick !

nygma
PMEmail PosterUsers Website
Top
Magauss
Ecrit le : Samedi 25 Décembre 2004 à 18h33
Quote Post


Kid
*

Groupe : Membre
Messages : 12


J'ai beau essayer le code que tu indiques, ça fonctionne(essayé sous IE et firefox) ou alors on ne parle pas de la même chose huh.gif. même au dessus du layer la balise <td> capte les événements onmouseover. Par contre en effet, tu as raison, l'utilisation de onmousemove dans ton cas de figure est bien plus judicieux.
PMEmail Poster
Top
nygma
Ecrit le : Samedi 25 Décembre 2004 à 19h31
Quote Post


Pro
*

Groupe : Membre
Messages : 129


ayé !!

bon, pour les firefoxeux, ça donne ça :

http://www.mydila.net/tests/mydilamoz.html



j'ai d'autres petits soucis, (les scrollsbar ont disparues sous firefox) mais je vais chercher.
PMEmail PosterUsers Website
Top
« Sujets + anciens | Design et graphismes | Sujets + récents »

Reply to this topicStart new topicStart Poll