28220 sujets

CSS et mise en forme, CSS3

Image changeante en fontion des éléments du menu survolés

bonjour,
je voudrais créer un menu qui possede une image en dessous des mots cliquables. Cette image change en fontion des mots du menu qui sont survolés avec le pointeur de la souris.
comme ceci en gros:
http://ooobelix.free.fr/up/menu.gif

je ne vois pas trop comment dire en CSS en fontion du survol du mot a tel endroit, on affiche telle image à tel endroit. Smiley decu

Merci de me donner un coup de pouce.
Salut nombril et bienvenu sur le forum

tu peux regarder et surtout t'inspirer de ce tutoriel

Il te suffira juste de changer la taille de ton/tes span et sa position absolue

Si tu débute avec les CSS je te conseille de lire attentivement les tutoriels fait par raphael ils sont géniaux car très bien expliqués

Bonne lecture Smiley biggrin
bon, globalement je suis content. A quelques détails près quand meme car mon <span> ne fontionne pas avec Internet Explorer et j'ai un petit soucis de position de l'image. Voilà la page: http://osiericulture.free.fr/osiericulture.php

mon code CSS
.titre_menu1
{ text-indent:50px;}
.titre_menu2 
{ text-indent:40px;}
.titre_menu3 
{ text-indent:28px;}
.titre_menu4 
{ text-indent:15px;}

ul {
list-style-type: none;
margin:0;
padding:0;
position: relative; 
top: 0px; 
left: 0px;
width:152px;
}

li:hover {background: #d3d8b0;}

.menu a:hover {
color: #411;
color: #fff;
}

.menu a span {     /* définition de la balise <span> inclue dans <a> */
display: none;
}

.menu a:hover span {   /* définition de la balise <span> au survol */
display: block;
position: absolute;
top: 100px;
left: -15px;
width: 154px;       /* largeur de la zone de commentaires, selon la taille du menu */
}


le li:hover ne fontionne pas non plus avec IE.

et le code html
	<ul class="menu">
						<li class="titre_menu1"><a href="index.php">ACCUEIL<span><img src="images/1/mini_menu_accueil.jpg" /></span></a></li>
						<li class="titre_menu2"><a href="vannerie.php">VANNERIE</a></li>
						<li class="titre_menu3"><a href="osiericulture.php">OSIERICULTURE</a></li>
						<li class="titre_menu4"><a href="catalogue.php?debut=0">CATALOGUE<span><img src="images/1/mini_menu_catalogue.jpg" /></span></a></li>
				</ul>


qu'est ce qui ne va pas là dedans?
Modifié par Nombril (06 Jul 2005 - 01:08)
pour IE l'état hover ne fonctionne que sur la balise <a> donc modifie ton code css pour placer la pseudo classe hover sur le lien et pas sur li
Modifié par benny (10 Jul 2005 - 20:25)
Sujet clos
Aller à