|
|
|
|
Bonjour,
Soit un menu css avec sous et sous-sous-menu du style :
extrait html :
<div id="menu">
<ul class="niveau1">
<li class="sousmenu"><a href="menu 1">xxxxxx</span></a>
<ul class="niveau2">
<li><a href="Sous menu 1.1">yyy</a></li>
</ul>
</li>
<li class="sousmenu"><a href="menu 2">xxxxxxx</a>
<ul class="niveau2">
<li class="sousmenu"><a href="Sous menu 2.1">yyyy</a>
<ul class="niveau3">
<li><a href="Sous sous menu 2.1.1">zzzzz</a></li>
</ul>
</li>
<li class="sousmenu"><a href="Sous menu 2.2">yyyyy</a>
<ul class="niveau3">
<li><a href="Sous sous menu 2.2.1">zzzzzzz</a></li>
<li><a href="Sous sous menu 2.2.2">zzzzzzz</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
extrait css :
div#menu a {
color:#000000
}
div#menu li:hover {
background: #EDD
}
div#menu li a {
text-decoration: none;
padding: 4px 0 4px 8px;
display:block; border-left:
8px solid #BBB; width:84px
}
div#menu li a:hover {
border-left-color: red;
}
}
div#menu ul ul li a:hover {
border-left-color: #00FF00;
}
Ca fonctionne bien mais je voudrais qu'au survol de mes liens, une image (différente à chaque lien...) apparaisse ailleurs dans ma page. L'un de vous pourrait-il éclairer ma lanterne?
D'avance merci pour toute suggestion css, javascript... (le javascript ne dérange pas car l'apparition d'images est purement décorative et ne gène en rien la navigation.).
Merci
Salut,
<html>
<head>
<title>test pijaku</title>
<script type="text/javascript"><!--
div = {
show: function(elem) {
document.getElementById(elem).style.visibility = 'visible';
},
hide: function(elem) {
document.getElementById(elem).style.visibility = 'hidden';
}
}
--></script>
<style type="text/css"><!--
div {visibility:hidden}
--></style>
</head>
<body>
<ul>
<li onMouseOver="div.show('div1')" onMouseOut="div.hide('div1')">lien 1</li>
<li onMouseOver="div.show('div2')" onMouseOut="div.hide('div2')">lien 2</li>
<li onMouseOver="div.show('div3')" onMouseOut="div.hide('div3')">lien 3</li>
</ul>
<div id="div1">
<img src="" alt="image 1" />
</div>
<div id="div2">
<img src="" alt="image 2" />
</div>
<div id="div3">
<img src="" alt="image 3" />
</div>
</body>
</html>
Bon courage ! Pour des explications sur mon code, n'hésite pas à demander ;)
|
Et supposons que le javascript soit désactivé ???
|
@css mania : tu comptes t'en sortir avec les pseudo-classes ? Là, il s'agit de faire apparaître un autre élément, et puisque tu as l'air de bien connaître le css tu dois savoir, je pense, que le css 2.1 ne permet pas de faire ça.
|
Bonjour, je me permets de poser une question dans ce topic car j'utilise la fonction javascript donnée par Groarh ici mais j'ai un problème :
|
Desolé du deterage
|
Afficher 0 div/0! Afficher div onchange Afficher div onchange ajax Afficher dossier caché Afficher text survol image Afficher texte survol souris Div javascript Fichiers cachés ne s'affichent pas Flash afficher image survol Fonction javascript masqué affiché div Html survol souris affichage image Le pilote d'affichage ne répondait plus et a été récupéré Lien emule Lien html Powerpoint lien afficher image Problème d'affichage facebook Vba affichage donnée survol souris Word afficher lien internet
