Afficher / masquer des div

Version imprimable

Bonjour,

Je fais un menu sur 2 div (dossiers, liens), mon problème est le suivant:
Quand je quitte un div je voudrais qu'il se masque, voici mon code:

Javascript:

Code:

1
2
3
4
5
6
7
8
9
 
function AfficheDiv(ID_Ancre,ID_Div){
  document.getElementById(ID_Div).style.left = getLeft(ID_Ancre);
  document.getElementById(ID_Div).style.top = getTop(ID_Ancre);
  document.getElementById(ID_Div).style.visibility = "visible";
}
function MasqueDiv(ID_Div){
  document.getElementById(ID_Div).style.visibility = "hidden";
}

Style:

Code:

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

Body
Appel 1er div:

Code:

1
2
3
 
<a href="#" onmouseover="AfficheDiv(document.getElementById('Ancre5'),'MonDiv1');" onblur="MasqueDiv('MonDiv1');">Corali</a>
<A id="Ancre5" name="Ancre5">&nbsp;</A>

Appel 2ème div:

Code:

1
2
3
 
<a href="#" onmouseover="AfficheDiv(document.getElementById('Ancre2'),'MonDiv2');" onblur="MasqueDiv('MonDiv2');">Dossier 1</a>
<A id="Ancre2" name="Ancre2">&nbsp;</A>

Donc comme ça la transition d'un div sur l'autre se passe bien, mais le 2ème div reste persistant.

Pouvez vous me donner un coup de main svp ?

28/08/2006, 11h16
FremyCompany

utilise style.display ("":"none")
28/08/2006, 16h35
Galaad
Merci FremyCompagny mais je vois pas trop comment utiliser cette commande.

Là ou j'en suis c'est:

Ma page avec plusieurs liens (L1) et ancres,
Au survol d'un lien (L1): ouverture d'un div (D1) avec pusieurs liens (L2) et ancres,
au survol d'un lien(L2): ouverture d'un 2ème div (D2) avec les liens de redirection.

Sur le lien (L1):
Code:

1 2 3 <a href="#" onmouseover="PosAncre(document.getElementById('m1'), 'Menu'); AfficheDiv('Menu');">Truc</a> <A id="m1"> </A>
Sur le div (D1):
Code:

1 2 <DIV id="Menu" style="position:absolute; visibility: hidden;" onmouseover="AfficheDiv('Menu');">
Sur le lien (L2):
Code:

1 2 3 <a href="#" onmouseover="PosAncre(document.getElementById('sm1'), 'SMenu'); AfficheDiv('SMenu');">Dossier 1</a> <A id="sm1"> </A>
Sur le div (D2):
Code:

1 2 <DIV id="SMenu" style="position:absolute; visibility: hidden;" onmouseover="AfficheDiv('SMenu');" onmouseout="MasqueDiv('SMenu');">
Bon le problème c'est que comme ça mon 2ème div reste visible si je passe pas dessus.

C'est un truc a devenir fou, j'ai essayé plein de conbinaisons entre les actions sur les liens et sur les propriétés des div mais rien a faire pour avoir quelque chose de propre c'est super lourd !

Avez vous un exemple svp, je ne trouve rien.
Merci.
28/08/2006, 16h46
raoulchatigre

la reponse de FremyCompany est une bonne solution

dans chacune de tes div, en css ou style="" comme tu préfères, met tes valeurs par défaut.

Code:

visibility:visible;

ou bien

Code:

visibility:hidden;

et ensuite sur l'évènement qui t'intéresse, tu appelles

Code:

document.getElementById('maDivAAfficher').style.visibility = "hidden";

pour faire disparaitre la div tout en gardant son emplacement et sa taille
ou bien

Code:

document.getElementById('maDivAAfficher').style.display = "none";

pour faire disparaitre complétement la div et recalculer les tailles des autres div.

Essayes, c'est le meilleur moyen de voir la solution ;)

Merci de ton aide,

Mais regarde les fonctions sivantes, c'est déja ce que je fais (ou alors j'ai vraiment pas bien pigé) :?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
function AfficheDiv(ID_Div){
  if (ID_Div=='Menu'){
    document.getElementById(ID_Div).style.left = ml;
    document.getElementById(ID_Div).style.top = mt;
  }
  if (ID_Div=='SMenu'){
    document.getElementById(ID_Div).style.left = sml;
    document.getElementById(ID_Div).style.top = smt;
  }
  document.getElementById(ID_Div).style.visibility = "visible";
}
function MasqueDiv(ID_Div){
  document.getElementById(ID_Div).style.visibility = "hidden";
}

28/08/2006, 17h01
raoulchatigre

ok j'étais à coté de la plaque :
peut-être est-ce l'appel de tes évènements en html :
as-tu essayé onmouseout ?

EDIT: autant pour moi j'avais pas vu : tu l'utilises deja :s

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function AfficheDiv(ID_Div){
  if (ID_Div=='Menu'){
    document.getElementById(ID_Div).style.left = ml;
    document.getElementById(ID_Div).style.top = mt;
  }
  if (ID_Div=='SMenu'){
    document.getElementById(ID_Div).style.left = sml;
    document.getElementById(ID_Div).style.top = smt;
  }
  document.getElementById(ID_Div).style.display = "block";
}
function MasqueDiv(ID_Div){
  document.getElementById(ID_Div).style.display = "none";
}

28/08/2006, 17h34
Galaad

Fremy,

Du coup ça affiche plus rien, pas d'erreur sur le lien mais le div ne s'affiche pas...
28/08/2006, 17h43
FremyCompany

|| Code Edité ||
28/08/2006, 21h57
Galaad

C'est bon j'ai trouvé la solution merci de votre aide:D