Discussion :

[Galaad]

Bonjour,

Je voudrais réaliser une sorte de menu contextuel dynamique:

J'ai plusieurs images réparties dans une page,
sur le passage de la souris, je voudrais
> afficher un 1er div avec des cathégories
> puis afficher un nouveau div avec des liens (asp).

Bien sur il faudrait que tout cela s'affiche a coté de l'image initiale.

C'est possible comme manip ?
Ce que je vois pas bien c'est comment gérer la position des div.

Merci de votre aide

[denisC]

Ce que je vois pas bien c'est comment gérer la position des div.

J'ai pas bien compris ce que tu cherchais à faire, mais sur ce point, je te conseille:
http://torvalds17.free.fr/partiePubl....php5?script=1

[Galaad]

Merci, pour le tuto

Par contre je débute en Javascript donc je vais pregresser pas a pas.
Dans un 1er tps je voudrais afficher un div sur la position d'une ancre sur un evènement passage de souris...

Si vous avez un exemple...

[Galaad]

ça progresse mais probleme avec les ancres que je n'arrive pas à placer correctement ni dans des tableaux ni dans des div.

C'est d'ailleur peut être pas la meilleur solution ?

Mon code (désolé si c'est pas vraiment pro)

Style:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
div 
  {
  height: 200px; 
  width: 100px;
  background-color:#FFFFFF;
  filter:alpha(opacity=50);
  -moz-opacity:0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
  }

Javascript:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
function AfficheDiv(ID_Ancre,Name_Ancre,ID_Div){
  pos = document.getElementById(ID_Ancre);
  DivLeft = getLeft(pos);
  DivTop = getTop(pos);
  document.getElementById(ID_Div).style.left = pos.offsetLeft;
  document.getElementById(ID_Div).style.top = pos.offsetTop;
  document.getElementById(ID_Div).style.visibility = "visible";
 
  alert("Position Ancre left: "+pos.offsetLeft+ " Top: "+pos.offsetTop);
  //c'est là que c'est pas top dans un div pas de position...
 
}
function MasqueDiv(ID_Div){
  document.getElementById(ID_Div).style.visibility = "hidden";
}
 
function getLeft(MyObject){
  if (MyObject.offsetParent)
    return (MyObject.offsetLeft + getLeft(MyObject.offsetParent));
  else 
    return (MyObject.offsetLeft);
}
 
function getTop(MyObject){
  if (MyObject.offsetParent)
    return (MyObject.offsetTop + getTop(MyObject.offsetParent));
  else
    return (MyObject.offsetTop);
}

Dans le Body:

Code :

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

1
2
3
 
<a href="#" onmouseover="AfficheDiv('Ancre1','Ancre1','MonDiv1');" onblur="MasqueDiv('MonDiv1');">La pour l'ancre</a>
<A id="Ancre" name="Ancre">ancre</A>

Le div:

Code :

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

1
2
3
4
 
<DIV id="MonDiv1" style="position:absolute; visibility: hidden;">
blablabla...
</DIV>

Un pt'tit coup de main svp
Merci.