Gestion dynamique balise div

Version imprimable

24/08/2006, 11h55
Galaad

Gestion dynamique balise div

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
24/08/2006, 12h52
denisC

Citation:

Envoyé par Galaad

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
24/08/2006, 15h22
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...

ç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:

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:

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:

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:

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

Un pt'tit coup de main svp
Merci.