Menu déroulant

**microatlantic** · 31/07/2009, 17h33

Bonjour,

Je recherche de l'aide pour associer un menu Javascript à un bouton.

Voici le code où se trouvent les boutons :

Code :

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

1
2
<img border="0" src="A_propos.gif"><img border="0" src="Matiers.gif"><img border="0" src="Offres_transverses.gif"><img border="0" src="Partenaires.gif"><img border="0" src="Support.gif"><img border="0" src="Contactez_nous.gif"></td>
</tr>

Je souhait associé aux boutons Métiers.gif et Offres_transverses.gif

ce menu :

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
<BODY topmargin="0" leftmargin="0">
<TABLE class=clsLeftMenu border=0 cellPadding=0 cellSpacing=0 >
<TBODY>
<TR>
<TABLE border=0 cellPadding=0 cellSpacing=0>
<TBODY> 
<td> 
<TABLE border=0 cellPadding=0 cellSpacing=0 onmousedown=ButtonDown(); onmouseover=ButtonOver(); onmouseup=ButtonUp(); onmouseout=ButtonOut();>
<TBODY>
<TR>
<TD >
<A href="" target="fraContents">
<SPAN class=menuL22Off buttonType="menuL22">xxxxxxx</SPAN></A><BR>
<IMG alt="" border=0 height=1 src="" width=140><BR>
</TD>
</TR>
<TR>
<TD>
<A href="" target="fraContents">
<SPAN class=menuL22Off buttonType="menuL22">xxxxxxx</SPAN></A><BR>
<IMG alt="" border=0 height=1 src="" width=140><BR>
</TD>
</TR>
</TBODY>
</TABLE>
</BODY>

(Fichiers CSS et Js créé)

En vous remerciant par avance pour votre aide

**emmanuel.remy** · 31/07/2009, 19h26

Salut,

Bienvenue sur les forums de developpez.com

Ton code est un peu complexe et pas très clair

(manque des guillemets, ...) donc je te propose cette piste qui colle à ta démarche de tableau. A toi d'adapter selon ton besoin. Tu cliques sur l'image et le menu constitué par le tableau apparait.

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <style type="text/css">
   a {text-decoration:none}
   a:hover{background-color:yellow}
  </style>
  <script type="text/javascript">
function dispManu(event) {
 
  var el, x, y;
 
  var el = document.getElementById("menu");
 
  if (window.event) {
    x = window.event.clientX + document.documentElement.scrollLeft
      + document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
  }
  else {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
  }
  x -= 2; y -= 2;
  el.style.left = x + "px";
  el.style.top  = y + "px";
  el.style.display = "";
}
 
 
  </script>
 
  </head>
  <body>
 
  <img src="http://javascript.developpez.com/template/images/logo.gif" onclick="dispManu(event);"/>
 
  <table id="menu" style="display:none; position:absolute" border="1" >
   <tr>
    <td><a href="">Menu 1</a></td>
   </tr>
   <tr>
    <td><a href="">Menu 2</a></td>
   </tr>
   <tr>
    <td><a href="">Menu 3</a></td>
   </tr>
  </table>
  </body>
</html>

je te confirme avoir testé le code avec IE8, FF3, Chrome et si tu cliques bouton gauche sur l'image, l'exemple de "menu" doit apparaitre.

Bon dev,

ERE

Menu déroulant

JavaScript

Vue hybride

Discussions similaires

Partager

Partager