Tester si la souris survole un DIV

Bonjour,

Je cherche à tester si un div est survoler par la souris.



Il y a plusieurs possibilités mais j'aimerais trouver quelque chose de plus simple


Méthode 1

Mettre sur le div onMouseOut et onMouseOver. Dans le over on crée une variable qu'on met à on et quand on sort on remet la variable à off. Comme ça quand on veut savoir si la souris est dedans, on test la variable.


Défaut : c'est lourd de mettre onMouseOut et onMouseOver

Méthode 2

Par rapport aux posisitions. On prend les coordonnées du DIV et ses dimensions et on vérifie si la position du curoseur se trouve dedans. Mais

Défaut: hélas, cette solution ne tient pas compte des éventuellements éléments positionné en aboslute et étant position à l'extérieur du div conteneur.


Méthode 3 (Prototype)

Utiliser $$() qui utilise les propriétés CSS pour identifer un ou plusieurs élements.

Si je fais $$('#monDiv'), il me retourne l'element en question. Donc je me suis dit pourquoi pas faire $$('#monDiv:hover') si il ne retourne rien c'est que l'élement n'est pas survolé. Hélas il me tourne toujours l'élément même s'il n'est pas survolé.

Je sais que $$('#monDiv:empty') fonctionne. Il retourne l'élement si seulement il est vide.


Donc ma question concerne la méthode 3... comment puis-je utiliser $$('#monDiv:hover') ?


Merci,

Citation:

---

Envoyé par vodnok

Bonjour,
Défaut : c'est lourd de mettre onMouseOut et onMouseOver

---

en quoi est ce lourd ???

Citation:

---

Envoyé par vodnok

Par rapport aux posisitions. On prend les coordonnées du DIV et ses dimensions et on vérifie si la position du curoseur se trouve dedans. Mais

---

ça c'est lourd :)

Citation:

---

Envoyé par vodnok

Je sais que $$('#monDiv:empty') fonctionne. Il retourne l'élement si seulement il est vide.

---

normal ... tu es sur une div si elle contient des éléments le out se déclenchera :)

donc au final 2 solutions :

- annihiler les évènements de tous les éléments a l'intérieur de ta div :aie:
- utiliser ta méthode n° ( pt la plus simple :yaisse2: )


bon appétit :)

Citation:

---

Envoyé par le_chomeur

normal ... tu es sur une div si elle contient des éléments le out se déclenchera :)

---

Je disais ça car div:hover ne fonctionne pas ! Alors que div:empty oui. div:empty c'est du CSS3 non ? Etrange que le hover ne donne pas le résultat escompté car alors c'est beaucoup plus facile. Il suffit de faire if($$('#divId:hover').length>0) return true else return false; Ca c'est ce que j'appel quelque chose de léger

Citation:

---

Envoyé par le_chomeur

donc au final 2 solutions :

- annihiler les évènements de tous les éléments a l'intérieur de ta div :aie:
- utiliser ta méthode n° ( pt la plus simple :yaisse2: )
bon appétit :)

---

Oui c'est ce que je vais sans doute faire. Je trouve ça lourd car ca allourdi le code. Mais je vais tanter d'ajouter les 2 évenements via un code js. Genre function watchMouseOnEleme(id){...} qui va ajouter les évenements et gérer un tableau qui contient l'info y ou n en fonction d'ou se trouve la souris.


Merci de ta réponse.

étudie ce code =>
http://www.developpez.net/forums/d63...r/#post3731399

tu auras la méthode de limite , et la méthode pour al souris après a toi de gérer les conditions si dedans ou dehors ;)

Haaa merci. Je me demandais comment faire

Code:

---

1 2 3

x.onmousemove=function fnc1(e) { // ... }

---

Je vais tester les différentes possibilités qui se trouve dans le topic. Mais il y a aussi les events prototype.



Mais bon c'est ennuyant que

Code:

---

if($$('#divId:hover').length>0) return true else return false;

---

Ne fonctionne pas

ne connaissant pas prototype je ne peux te répondre le pourquoi du comment a ce sujet ....

Ok j'ai ma réponse

Citation:

---

supported from v1.5.1
Virtually all of CSS3 is supported, with the exception of pseudo-elements (like ::first-letter) and some pseudo-classes (like :hover).

---

C'était trop facile sinon :aie: va pour la solution pisseuse de code :evilred::yaisse2:

Citation:

---

Envoyé par vodnok

Bonjour,

Je cherche à tester si un div est survoler par la souris.

---

Si c'est pour de simple raison comme modifier le type de curseur ou modifier la background de la div ou du truc de ce genre , je te conseille de faire sa en css en quelque ligne sans ni tester la taille ni gaspiller plein de temps si c'est pour autre chose alors je te dis bon courage , pour le $$ c est pas le framework prototype que tu utilise ?. si c'est le cas , c'est $(nom) qui remplace Document.getElementById(... je pense ,


bon courage.

Citation:

---

Envoyé par mehdi_scofield

Si c'est pour de simple raison comme modifier le type de curseur ou modifier la background de la div ou du truc de ce genre , je te conseille de faire sa en css en quelque ligne sans ni tester la taille ni gaspiller plein de temps si c'est pour autre chose alors je te dis bon courage , pour le $$ c est pas le framework prototype que tu utilise ?. si c'est le cas , c'est $(nom) qui remplace Document.getElementById(... je pense ,


bon courage.

---

Non non prototype permet d'utiliser $$() et à l'interieur tu peux y mettre beaucoup de chose comme des identificateurs CSS

$$('.sub') te retourne un tableau avec tous les élements ayant la class .sub
$$('#sub') te retourne un tableau avec tous les élements ayant comme id sub

Tu peux également faire des trucs sympas comme

$$('#monDiv .sub') qui te retourne tous les éléments ayant la class .sub contenu dans #monDiv

ou encore

$$('#monDiv .sub:empty') qui te retourne tous les éléments "vide" ayant la class .sub contenu dans #monDiv

Mais hélas :hover ne fonctionne pas

Non ce n'est pas pour "juste" modifier le curseur mais pour y affecter un évennement plus complexe.


Si tu veux plus d'info sur $$ dans prototype va voir ceci :king:


J'ai créer ma fonction dynHoverWatch(id) qui surveille l'état de survole d'un div et une fonction dynHoverWatchIs(id) qui retourne true ou false

Dans dynHoverWatch je crée deux évenements (over, out) qui change l'état de l'id dans un tableau. dynHoverTab[id]='y' ou dynHoverTab[id]='n'

Donc ça fonctionne :king::mrgreen::yaisse2:

Citation:

---

Envoyé par vodnok

Si tu veux plus d'info sur $$ dans prototype va voir ceci :king:

---

Merci , mais je voulais juste te dire que tout mon PFE( Projet de Fin d'Etude ) j'ai travaillé avec Prototype , et un autre script pour faire le drag & drop (faire un peu d'interactivité sans utilisé le Flash).

Prototype peut meme faire de l'ajax avec des fonction simple et a plusieur fonction tres utiles qui sont simple à utilisé.

Pas besoin de me convaincre, je l'utilise aussi depuis plus d'un an :yaisse2: :king: et ça m'a changé la vie. Je débutais en javascript depuis 2-3 mois et prototype à radicalement accélérer la vitesse de développement. C'est bien simple à ce jour, je n'ai jamais été bloqué ou limité par javascript.

J'utilise scryptacoulous pour le drag&drop. J'avais fait un drag home made qui fonctionnait bien mais j'ai finalement préféré opter pour scrypta car il est plus complet que ma solution proposée et comme j'avais également besoin d'effet comme slide, fade etc.

Je n'aime pas le flash et je crois qu'avec du simple html , javascript (avec prototype) ainsi qu'un peu d'imagination on peut faire des merveilles et bien plus léger que du flash. Et comme flash n'est pas surporté sur tous les supports...


La seule limite actuellement est HTML. Vivement l'apparition des diagonales pour pouvoir faire des perspectives et effet 3D avec de bêtes DIV :mouarf: Mais je crois que ça va venir dans la prochaine version d'HTML avec également le support de la musique et video. Je crois aussi une sorte d'ajax intégré.

Enfin là c'est du HS mais comme le problème initiale au post est réglé on peut y aller :aie:

Citation:

---

Envoyé par vodnok

Pas besoin de me convaincre, je l'utilise aussi depuis plus d'un an :yaisse2: :king: et ça m'a changé la vie. Je débutais en javascript depuis 2-3 mois et prototype à radicalement accélérer la vitesse de développement. C'est bien simple à ce jour, je n'ai jamais été bloqué ou limité par javascript.

J'utilise scryptacoulous pour le drag&drop. J'avais fait un drag home made qui fonctionnait bien mais j'ai finalement préféré opter pour scrypta car il est plus complet que ma solution proposée et comme j'avais également besoin d'effet comme slide, fade etc.

Je n'aime pas le flash et je crois qu'avec du simple html , javascript (avec prototype) ainsi qu'un peu d'imagination on peut faire des merveilles et bien plus léger que du flash. Et comme flash n'est pas surporté sur tous les supports...


La seule limite actuellement est HTML. Vivement l'apparition des diagonales pour pouvoir faire des perspectives et effet 3D avec de bêtes DIV :mouarf: Mais je crois que ça va venir dans la prochaine version d'HTML avec également le support de la musique et video. Je crois aussi une sorte d'ajax intégré.

Enfin là c'est du HS mais comme le problème initiale au post est réglé on peut y aller :aie:

---

Moi aussi je suis fan de Prototype , voila le site depuis lequel j'ai pris un script de drag and drop que j'ai par la suite modifié selon mes besoins http://www.dhtmlgoodies.com

Vous pouvez trouver plein d'autre script comme des calendrier et plein d'autre truc , voila un demo sur le drag and drop http://www.dhtmlgoodies.com/scripts/...p-quiz-d2.html