[débutant] affichage d'un sous-menu

Version imprimable

bonjour,

je suis entrain de réaliser un petit menu classique.. je débute vraiment.
et donc je réalise quelque chose de très simple
vous me direz des scripts de menu js y'en a partout sur google mais je préfère le faire moi meme.

contexte j'ai deux image associé a des <div >. quand je passe sur l'image"titre du menu" un div contenant les sous menu apparait en dessous à l'aide d'un onmoussover .
pour le moment les div apparaisse bien :yaisse2: mais ne partent plus ..:?.

bref mon code pour illustrer
Code:

1 2 3 <td background="images/Gestionnn_04.gif" width="116" height="36" alt="" onmouseover="document.getElementById('menu1').style.display='';" > //je fais apparaitre le div contenue dans l'image en dessous
image du dessous:
Code:

1 2 3 4 5 6 7 8 9 10 <td colspan="2" background="images/Gestionnn_08.gif" width="117" height="70" alt="" > <div id="menu1" style="position:relative;display:none" > <a href="Gestionnn2.php?page=formulaire">Saisie d'un visiteur</a> <a href="Gestionnn2.php?page=blacklister">Mettre sur liste noire</a> </div> </td>
rien de bien savant.
Si vous pouviez m'expliquer comment faire . C'est simple certe mais je cherche a comprendre ce que je fais.
Donc si quelqu'un à la patience de m'expliquer.
je cherche aussi à le rendre un peu plus jolie donc n'hésitez pas a me faire par d'effet de style.
d'avance mERCI

11/02/2009, 13h25
le_chomeur

onmouseover pour gèrer l'affichage du menu et onmouseout pour le masquer ...

pour les effet d'apparition regarde du coté des effet de fading :)
11/02/2009, 13h55
Nicow57

oui j'avais bien essayer avec un onmousseout mais cela ne marche pas non plus a moins que je mis prenne mal.

si on schématise:

Image A => onmousseover => apparition de la div sur image B

et si je mets un onmousseout comme j'avais prévu sur image B

image B => onmouseout => impossible d'allé sur la div car quand je passe de l'image a a l'image B je passe d'abord par la zone onmousseOut de l'image B ce qui déclenche la disparition de mon Div

Enfin c 'est comme ça que j'ai interprété mon soucis... Mais je suis peux être dans le faux...

La seule solution que j'ai trouvé pour le moment qui n'en est pas une serait de mettre un onmouseover avec un display:'none' sur tout les autres images de mon design ... pas super je pense

Autre solution?

aide plz
11/02/2009, 15h49
le_chomeur

ton code complet :) ?

Bien le code complet:

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
 
<table id="Tableau_01" width="593" height="901" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="2" rowspan="5">
			<img src="images/Gestionnn_01.gif" width="177" height="288" alt="" onmouseover="document.getElementById('menu1').style.display='none';" ></td>
		<td colspan="7">
			<img src="images/Gestionnn_02.gif" width="414" height="143" alt=""></td>
		<td rowspan="7">
			<img src="images/Gestionnn_03.gif" width="1" height="900" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="143" alt=""></td>
	</tr>
	<tr>
		<td background="images/Gestionnn_04.gif" width="116" height="36" alt="" onmouseover="document.getElementById('menu1').style.display='';" >
 
 
             </td>
		<td colspan="2">
			<img src="images/Gestionnn_05.gif" width="2" height="36" alt=""></td>
		<td background="images/Gestionnn_06.gif" width="156" height="36" alt="" onmouseover="document.getElementById('menu2').style.display='';" >
 
        </td>
		<td colspan="3" background="images/Gestionnn_07.gif" width="140" height="36" alt="" onmouseover="document.getElementById('menu3').style.display='';" >
                 </td>
		<td>
			<img src="images/spacer.gif" width="1" height="36" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" background="images/Gestionnn_08.gif" width="117" height="70" alt="" >
                <div id="menu1" style="position:relative;display:none" >
 
                  <a href="Gestionnn2.php?page=formulaire">Saisie  visiteur</a>
                  <a href="Gestionnn2.php?page=blacklister">Mettre sur liste noire</a>
 
                </div>
 
        </td>
		<td colspan="2" background="images/Gestionnn_09.gif" width="157" height="70" alt="" >
                <div id="menu2" style="position:relative;display:none" >
                    <a href="Gestionnn2.php?page=lstvisit">Historique des Visites</a>
                    <a href="Gestionnn2.php?page=blcList">Blacklist</a>
                    <a href="Gestionnn2.php?page=lstvisitPres">Liste Presents</a>
 
                 </div>
        </td>
 
		<td rowspan="3">
			<img src="images/Gestionnn_10.gif" width="1" height="109" alt=""></td>
		<td colspan="2" rowspan="2" background="images/Gestionnn_11.gif" width="139" height="71" alt="">
              <div id="menu3" style="position:relative;display:none" >
                    <a href="Gestionnn2.php?page=StatPrRes">Statistiques Par résident</a>
                    <a href="Gestionnn2.php?page=FreqVisi">Fréquence des visites</a>
            </div>
		</td>

donc pour resumer sur 1 exemple

j'appelle le javascript sur "<img src="images/Gestionnn_01.gif""
ca fait apparaitre

Code:

1
2
3
4
5
6
div id="menu1" style="position:relative;display:none" >
 
                  <a href="Gestionnn2.php?page=formulaire">Saisie  visiteur</a>
                  <a href="Gestionnn2.php?page=blacklister">Mettre sur liste noire</a>
 
                </div>

mais pour le moment une fois que ça apparait ça reste...
voila
si tu as d autre question n'hésite pas je suis co toute la journée ^^