Curseur sur menu = apparition image centrée

Bonjour à toutes et à tous,

Comment est il possible avec le CSS, à partir d'un menu, de faire apparaitre une image au centre de la page?
Je n'ai pas trouvé ce qu'il faut sur le net.

voilà le code html:

<div id="menuz">
<ul>
<li><a href="#1" title="Lien 1">1</a></li>
<li><a href="#2" title="Lien 2">2</a></li>
<li><a href="#3" title="Lien 3">3</a></li>
<li><a href="#4" title="Lien 4">4</a></li>
<li><a href="#5" title="Lien 5">5</a></li>
<li><a href="#6" title="lien 6">6</a></li>
</ul>
</div>

code css

#menuz li a:link, #menu15 li a:visited {
color: black;
display: block;
background: url("../images/menu.gif");
padding: 8px 0 0 30px;
}

#menuz li a:hover {
color: purple;
background: url("../images/menu2.gif") 0 -32px;
padding: 8px 0 0 30px;
}

Merci d'avance.

Salut,

Pourrais tu être plus précis, car là ça manque un peu de clarté

Désolé si je me suis mal exprimé,

j' aimerai qu' au passage du curseur sur le menu, une image apparaisse au centre de ma page.

Salut,

déjà l'élément DIV est inutile : tu peux te contenter de l'élément UL.

Un petit exemple (il faudra affiner pour le centrage) :

#menuz {
	list-style: none;
	padding: 0;
	margin: 0;
}

#menuz li a:link, #menu15 li a:visited {
	color: black;
	display: block;
	background: yellow;
	padding: 8px 0 0 30px;
}

#menuz li a:hover {
	color: purple;
	background: red;
	padding: 8px 0 0 30px;
}

#menuz li a span {
	display: none;
}

#menuz li a:hover span,
#menuz li a:hover span,
#menuz li a:hover span {
	background: none;
	display: block;
	position: absolute;
	left: 400px;
	top: 200px;
	z-index: 10;
}

<ul id="menuz">
	<li><a href="#" title="Lien 1">1<span><img src="image1.jpg" height="200" width="300" alt="" /></span></a></li>
	<li><a href="#" title="Lien 2">2<span><img src="image2.jpg" height="200" width="300" alt="" /></span></a></li>
	<li><a href="#" title="Lien 3">3<span><img src="image3.jpg" height="200" width="300" alt="" /></span></a></li>
	<li><a href="#" title="Lien 4">4<span><img src="image4.jpg" height="200" width="300" alt="" /></span></a></li>
	<li><a href="#" title="Lien 5">5<span><img src="image5.jpg" height="200" width="300" alt="" /></span></a></li>
	<li><a href="#" title="Lien 6">6<span><img src="image6.jpg" height="200" width="300" alt="" /></span></a></li>
</ul>

Modifié par Heyoan (13 Jan 2010 - 15:11)

Merci bien je vais essayer, et en passant avec le système de l' info bulle est ce que ça irait?

kyubidog a écrit :
en passant avec le système de l' info bulle est ce que ça irait?

Hem... il faut vraiment travailler sur la clarté de tes questions !

Qu'est-ce que tu veux dire ?