menu horizontal images

**newmar** · 21/04/2008, 21h05

Bonjour, je cherche un menu horizontal, dans les rubriques principales sont des images, et lorsque je clique sur la rubrique je change l'image, j'ai deja les images necessaires, il me faut juste le modèle, j'ai trouvé énormément d'exemple mais je peux pas utiliser mes images ?

merci pour votre aide !!!

**le_chomeur** · 21/04/2008, 23h43

montre nous tes exemples on verra pour t'aider a les adapter

**newmar** · 21/04/2008, 23h59

voila un qui me plait enormément : http://youngpup.net/projects/transmenus/demos/photos/#

**newmar** · 26/04/2008, 01h37

aucune proposition

**newmar** · 26/04/2008, 02h27

Bonjour,
enfin j'ai pu faire un modeste model, QUI ME PLAIT PAS MAIS QUI REPOND A Mon BESOIN, c'est un simple menu avec du html et du javascript mais puisque je suis pas doué en javascript je suis un peu bloqué :

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<html>
<head><title>Menu déroulant</title>
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
  if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css">
<!--
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
}
 
#menu dt {
cursor: pointer;
text-align: center;
}
#menu dd {
border: 1px solid #003399;
background:#00CCFF;
}
#menu li {
text-align: center;
background:#0099CC;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
 
}
#menu li a:hover, #menu dt a:hover {
background:#003399;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
}
-->
</style>
</head>
 
<body>
<div id="menu">	
	<dl>  	
  <dt onmouseover="javascript:montre('smenu1');" onMouseOut=""><img src="images/a.jpg"/></dt>
  <dd id="smenu1">
  	<ul>
    <li><a href="#">Sous-Menu 1.1</a></li>
    <li><a href="#">Sous-Menu 1.2</a></li>
    <li><a href="#">Sous-Menu 1.3</a></li>
  	</ul>
  </dd>
	</dl>
	<dl>	
  <dt onmouseover="javascript:montre('smenu2');"><img src="images/b.jpg"/></dt>
  <dd id="smenu2">
  	<ul>
    <li><a href="#">Sous-Menu 2.1</a></li>
    <li><a href="#">Sous-Menu 2.2</a></li>
    <li><a href="#">Sous-Menu 2.3</a></li>
  	</ul>
  </dd>
	</dl>	
</div>
 
 
</body>
</html>

J'ai 3 problème le premier c'est que lorsque je quitte le menu, le menu que j'ai visité le dernier reste ouvert alors qu'il doit se fermer,

mon deuxième problème c'est que je veux lorsque je pointe sur l'un des menu, l'image change aussi(du menu)

la distance entre les sous menu j'ai pas pu la changer, elle est relativement grande

mon dernier problème : les sous menu qui s'affiche prends la taille de l'image toute entiere alors que je prefere qu'elles prenne uniquement la taille du parallélo-gramme a l'interieur de l'image?

Merci, je reste à votre disposition si vous avez des propositions et merciiiiiiii pour l'aide