Menu façon RollOver en CSS

Bonjour,

Je vous écris car j'ai un petit problème avec l'un de mes sites. J'aimerais faire un menu façon RollOver sans passer par le Javascript et donc en utilisant le CSS. J'ai bien vu le tutorial qui existe sur Alsacreation, cependant celui ci propose un menu avec texte, or je ne veux pas de texte. Je vous explique.

J'ai un menu en 3 parties, chaque partie a deux images. Une image avec marquée le nom (par exemple "Accueil") et une autre image (celle qui sert durant le hover) avec tjs marquée le nom mais un petit dessin est rajouté sur le côté. Bref, tout ça pour dire que j'aimerais faire un menu avec simplement deux images, une image mouseOff et une image mouseOn, comment faire ? Sachant que j'ai au total 3*2 images en fait.

PS : Au fait, vaut mieux continuer les <table> ou faire des <div> + <br /> pour le XHTML Strict ?

Merci d'avance et bonne journée.

Merci ! J'ai suivi ça, sauf que j'ai un problème.

En effet, une image (on va l'appeler comme ca) "mouseOn" ne s'affiche pas o_O

Je ne comprends vraiment pas pourquoi.

Le site en question : http://www.garage-vallier.com/index.php

Le CSS : http://www.garage-vallier.com/style.css

Au passage, si quelqu'un pouvait me dire comment centrer le tout, et réduire la taille à 26px de hauteur, j'ai pas réussi.

voici un petit bout de code qui pourrait t'aider:

pour le CSS:

.navi {
	float: right;
	background-color: #cef3ff;
	width: 39px;
	padding-right: 5px;
	height: 35px;
	}
.navi a {
	text-decoration: none;
	height: 35px;
	width: 35px;
	}
.navi a:hover {
	text-decoration: none;
	border: none;
	}
.navi a span {
	display: none;
	}
.navi a img {
	border: 0px;
	}	
.navi a:hover span {
	display: block;
	position: absolute;
	top: 10px;
	left: 105px;
	width: 480px;
	text-align: right;
   	color: #33CCFF;
	}

et pour le code XHMTL:

<div class='navi'><a href='index.php?section=photo'><img src='pix/photo.gif' alt='photo' /><span>Photos</span></a></div>

Tu peux voir ce qui se passe à l'adresse http://maxknopp.free.fr/Site
Bon c'est une autre solution qui permet d'afficher le rollover différement. [code]
Modifié par mamax (16 Mar 2006 - 11:08)