Discussion :

[LanfeustXIII]

Bonjour,

Je rencontre un problème car je souhaite ajouter l'évènement onMouseOver sur des éléments "div" cachés sous un autre.
En effet j'ai un div qui couvre la quasi totalité de l'écran et plusieurs "div" plus petits au même niveau.
Mon objectif est de savoir quel objet de mon grand "div" est survolé par la souris. Pour cela, j'ai créer un certain nombre de "div" qui recouvrent chacun un objet appartenant à mon grand "div". Ainsi en ajoutant l'évènement onMouseOver sur chaque petit "div", j'étais capable de détecter sur quel objet de mon grand "div" la souris se trouve.
Le problème est que mon div principale cache les autres et donc inactive le onMouseOver sur ces derniers.
Est-il possible de contourner ce problème en réactivant les évènements sur ces div cachés d'une quelconque façon SVP ?

Je fonctionne de cette manière car je ne peux pas directement scinder le contenu de mon grand div en plusieurs div plus petits, pas de faux débats ^^

Merci de vos réponses

Cordialement

[Invité]

Bonjour,
L'utilisation de <map> et <area> semble plus approprié que des div cachées.

[LanfeustXIII]

<area> et <map> semblent être une bonne idée merci
A ce que j'ai pu comprendre il faut spécifier les coordonnées des area en chiffré absolu. Quel est le référentiel pour ces coordonnées ? Le coin supérieur gauche de l'objet map ou de la page ?

N'est il pas possible de donner des coordonnées relative?

Indiqué par exemple que la première area prendra 33% de map en largeur et 50% de map en hauteur.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
area1
{
	width : 33.3%;
	height : 50%;
	display: inline-block;
	position: absolute;
	right: 0%;
	Top: 0%;
}

[SpaceFrog]

les areas se positionnent en coordonnées par rapport au coin supérieur gauche de l'image et l'unité n'est pas précisée mais ce sont des pixels.

[Invité]

Mode d'emploi :
=> HTML <map> Tag
=> HTML <area> Tag

Voici un exemple d'utilisation.
Dans ton cas, des zones rectangulaires (ou polygonales ?) seraient plus adaptées :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

    <area shape="rect" coords="X1,Y1,X2,Y2" title="" alt="" href="" />

[SpaceFrog]

Selon la théorie on devrait pouvoir mettre des pourcentages, dans la pratique aucun des browsers communs que j'ai pu tester ne comprennent les % et les interprètent comme des pixels ...

[LanfeustXIII]

D'accord, mais dans ce cas, si je positionne mes objets <area> au sein de mon objet <map> avec des coordonnées chiffrées, si ma fenêtre est réduite, ou si j'ouvre mon application sur une tablette android ou un téléphone par exemple, tout vas être décalé, déformé, caché ou mal ajusté ?

[SpaceFrog]

non
sauf si tu redimensionnes l'image

[LanfeustXIII]

j'essaie donc d'utiliser map comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<img id="viewers" usemap="#viewersMap"/>		
 
<map name="viewersMap" id="viewersMap">
	<area id="viewer1" SHAPE="rect" coords="0,0,510,239" title="" alt="" href=""></area>
	<area id="viewer2" SHAPE="rect" coords="0,239,510,478" title="" alt="" href=""></area>
	<area id="viewer3" SHAPE="rect" coords="510,0,1020,478" title="" alt="" href=""></area>
	<area id="viewer4" SHAPE="rect" coords="1020,0,1700,239" title="" alt="" href=""></area>
	<area id="viewer5" SHAPE="rect" coords="1020,239,1700,478" title="" alt="" href=""></area>
</map>

J'ajoute alors un évènement sur une area comme suit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.getElementById('viewer3').addEventListener('mouseover', function() {console.log('HEHO');}, false);

Mais ça ne marche pas, rien se passe quand je survole l'objet .. d'après vous qu'est ce que j'ai manqué ou pas compris ?

[SpaceFrog]

le mouseover ne peut se binder qu'a l'img ou aux areas, pas au map !

[LanfeustXIII]

Justement mon objet viewer3 est une area pas une map non ?

[Invité]

Où est l'image ? + ses dimensions ?
<img id="viewers" usemap="#viewersMap" src="???" alt="" />

[Willpower]

Quel intérêt de positionner des petits DIV en dessous d'un grand ?

- Si le grand est opaque, on ne verra pas ceux en dessous et on ne pourra pas y effectuer d'action, quel intérêt donc ?
- Si le grand est transparent, pourquoi à t'il besoin d'être au dessus et non en dessous ?


--

La solution que j'utilise en général, (car j'ai remarqué que rajouter beaucoup d’évènements sur beaucoup d’éléments du dom peut faire laguer la gestion de ceux-ci) j'ai pour habitude de placer un gros div en arrière plan et les décors par dessus.

Je n'assigne qu'un seul évènement au grand DIV, les petits DIV n'ayant pas de gestion d’évènements laissent ces derniers se propager jusqu'au grand DIV.

Après 2 solutions pour savoir quel élément a été cliqué:
- soit s'il s'agit d'une carte image (genre pour un jeu) sans petit div par dessys je peux stocker les éléments selon leurs position X et Y. (relative si la carte est "draggable")
- soit si j'ai placé des petits div par dessus, je récupère l'élément cliqué grâce à la variable "event" et s'il possède une action associée, je la déclenche, sinon je remonte dans ses parents jusqu'à mon grand DIV à la recherche d'action : voici un petit exemple tout simple

Edit: dans mon exemple, j'utilise l'attribut "id", mais évidement, tu peux te servir de n'importe quel autre attribut, comme "class" par exemple car un "id" doit être unique. (tu peux aussi utiliser "name" ou des attributs inventés mais fait attention à respecter les normes, enfin tu peux lors de l'initialisation attacher des propriétés à l'objet javascript associé à l'objet du DOM.)




edit2: Si tu veux juste afficher un objet au passage de la souris, du simple css suffit : http://jsfiddle.net/w3qgL/1/

[LanfeustXIII]

Où est l'image ? + ses dimensions ?
<img id="viewers" usemap="#viewersMap" src="???" alt="" />

C'est plus compliqué que ça, c'est pour ça que j'avais mis pas de faux débats ^^ étant que le problème est plus particulier qu'à la normale. Je m'explique.
En réalité je fais du WebGL (3D dans le navigateur), j'utilise pour cela un pluging nommé three.js. Ce dernier permet d'afficher plusieurs vues de ma scène 3D dans un seul conteneur. Il n'est actuellement pas possible d'avoir plusieurs vues d'une même scène dans plusieurs conteneurs différents.
De ce fait j'ai un conteneur contenant mes plusieurs vues et j'aimerais associer les interactions de la souris à une vue en particulier. J'ai donc besoin de savoir où la souris se trouve. D'où l'idée des div placés au niveau des vues contenues par le grand div. Si j'avais été capable de détecter l'entrée de la souris sur les petits div j'était capable de détecter sur quelle vue j'étais et associer l'évènement à la vue en question .

[SpaceFrog]

tu peux avoir plusieurs maps et les switcher selon la vue ...

[LanfeustXIII]

Pouvez vous développer un peu votre idée svp ?

[Invité]

On peut avoir une copie d'écran ou pas ?

S'il s'agit juste de "découper" virtuellement une image en 3 tiers verticalement et (?) en 2 verticalement, c'est peut-être plus simple de mettre la vue en arrière (pas en background), et des div par dessus, dimensionnés en %, avec z-index:999;

Le problème du calcul/interprétation des % (par le navigateur) : % de quoi ?
(% de la largeur de la fenêtre ? % de la largeur du conteneur parent ?)

[Willpower]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
document.getElementById('viewers').onmousemove = function(evt){
    evt = evt || event;
    var x = evt.offsetX, y = evt.offsetY;
    if(x>510 && x<1020 && y>0 && y<478){
        // dans la zone voulue
    }
    return true;
};

[LanfeustXIII]

Je pensais pouvoir faire simple avec mes div mais en fin de compte elle s'avère plus compliqué. La solution de WillPower pour localiser la position de la souris me parait la bonne merci

[LanfeustXIII]

S'il s'agit juste de "découper" virtuellement une image en 3 tiers verticalement et (?) en 2 verticalement, c'est peut-être plus simple de mettre la vue en arrière (pas en background), et des div par dessus, dimensionnés en %, avec z-index:999;

Je ne connaissais pas z-index, cette solution semble être intéressante aussi