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é ?