bonjour, sur la base de votre menu deroulant vertical, j'ai adapté a mon site, avec des images pour le fond, inserées en css.. mais je voudrais que cette image change pour une autre quand la souris passe sur la section (chose facile lorsqu'il n'y a pas de sous section, vu que c'est un lien... chose différente lorsqu'on a des sous sections et dans ce cas la section mere n'est pas un hyperlien)
voici le code.. des idées sur la voie a prendre? merci!
Modifié par jay¤ (22 Oct 2005 - 23:51)
voici le code.. des idées sur la voie a prendre? merci!
<head>
<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" media="screen">
<!--
body {
margin: 0;
padding: 0;
background: #3F8DDD;
font-family: Arial, Helvetica, sans-serif
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
}
#menu {
width: 200px;
}
#menu dt {
cursor: pointer;
margin: 0px 0;
height: 36px;
line-height: 36px;
text-align: right;
font-weight: bold;
color: #FFF;
}
#menu dd {
border: 1px solid #3F8DDD;
}
#menu li {
text-align: right;
background: #1D5792;
}
#menu li a, #menu dt a {
color: #FFF;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#sect1 {
background-image: url(images/Smenu1b.gif)
}
#sect1 a:visited {
background-image: url(images/Smenu1b.gif)
}
#sect1 a:hover {
background-image: url(images/Smenu1o.gif)
}
#sect2 {
background-image: url(images/Smenu2b.gif)
}
#sect3 {
background-image: url(images/Smenu3b.gif)
}
#sect4 {
background-image: url(images/Smenu4b.gif)
}
-->
</style>
</head>
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="54"> </td>
</tr>
<tr>
<td><dl id="menu">
<dt id="sect1" onclick="javascript:montre();"><a href="#">section menu 1</a></dt>
<dt id="sect2" onclick="javascript:montre('smenu2');">section menu 2</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>
<dt id="sect3" onclick="javascript:montre('smenu3');">section menu 3</dt>
<dd id="smenu3">
<ul>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
</ul>
</dd>
<dt id="sect4" onclick="javascript:montre('smenu4');">section menu 4</dt>
<dd id="smenu4">
<ul>
<li><a href="#">Sous-Menu 4.1</a></li>
<li><a href="#">Sous-Menu 4.1</a></li>
</ul>
</dd>
</dl></td>
</tr>
<tr>
<td height="108"> </td>
</tr>
</table>
Modifié par jay¤ (22 Oct 2005 - 23:51)
.