[résolu]Rollover et div

Bonjour,
J'ai un problème concernant un rollover qui ne veut rien entendre. voici le fragment du

 code <div class="bloc1"><a href="#"> <img alt="bla"   width="50" height="50"  src="images/vignette.jpg"/></a></div>
<div class="bloc2"><a href="#"><img alt=""  width="50" height="50"  src="images/vignette.jpg"/></a></div>

<div class="bloc3"><a href="#"><img alt="c"  width="50" height="50"  src="images/vignette.jpg"/></a></div>

.bloc1 {height: 50px;
width: 50px;
margin:   10px 0 0 0;padding-left:120px;

}

.bloc2 {height: 50px;
width: 50px;
margin:   10px 0 0 0;padding-left:120px;

}
.bloc3 {height: 50px;width: 50px; margin:   10px 0 0 0 ;padding-left:120px;
}

Actuellement le lien focntionne, mais pas de rollover avec une autre image.
J'ai bien essayé de mettre

a.bloc1 { /* définition de la classe "bloc1" de la balise <a> */
     display: block; /* la balise a doit être en bloc */
     width: 50px; /* largeur de l'image réactive */
     height: 50px; /* hauteur de l'image réactive */
     background-image: url(image1.gif); /* source de l'image de départ */
     background-repeat: no-repeat;
     }
	 
a.bloc1:hover { /* définition de la classe "image" de la balise <a> au survol */
     background-image: url(image2.gif); /* source de l'image d'arrivée */
     } 

mais rien ne se passe.

Comment dois-je proccéder pour pour obtenir un rollover image et que mes 3 blocs soient bien positionnés?
Merci à toi
Modifié par garden (22 Aug 2005 - 18:57)

Tu aurais un lien pour voir ce que ca donne ?

Peut-être que tes background-images sont décallées. Donc mets déja un no-repeat dans ton a.bloc1:hover

bonjour,
voici un lien si jamais :
http://www.quipa.ch/essai/rol.htm

merci

si je résume, tu as mis une image de fond dans ta balise a, et une image par dessus.

je n'ai pas testé en détail, mais pour moi c'est a cause de ca. l'image de fond change, mais comme tu as une image dessus, on ne voit pas la différence.

Non, je ne crois pas que c'est ça, ça ne change rien, et ça fais même disparaître l'image

normal, car une fois l'image dans la balise <a> enlevée, ta balise <a> n'est plus visible, car trop petite (elle s'adapte à son contenu).

Met une image avec visibility:hidden; par exemple, et ca devrait etre bon !

Salut Sylvain,
Ben je suis peut-être un peu ridicul, mais je ne comprends pas tout
Tu dis que je doit mettre "visibility : hidden"
Dans la css?
à quel niveau ?
Désolé j'suis débutant
merci

Je réexplique en plus clair, c'est vrai qu'il faut savoir bien regarder en profondeur et que je ne suis pas bon orateur !
Si tu as l'image, on ne voit pas le fond d'écran qui change en dessous, car l'image est au dessus, d'accord ?

Si tu n'as pas l'image, la balise <a>, qui s'adapte à la largeur de ton contenu, ne contient rien, et donc prends les dimensions 0;0 (0px de largeur, 0px de hauteur).

On va donc mettre l'image, pour que <a> ait les bonnes dimensions, mais on va la cacher, et ce grace à un visibility:hidden; sur ton image.

Je suis presque certains que le soucis vient de la.

je spécifierais plutot la taille de la balise a

et en prime, je rajouterais un petit span caché dans ton lien, des fois que le css ne soit pas pris en compte par le navigateur ...

<div class="bloc1"><a href="#"><span>texte du lien</span></a></div>

et au css

.bloc1 a {
width: 50px;
height : 50px;
display: block;
}
.bloc1 span {
visibility : hidden
}

solution produisant le même effet que la mienne, si ce n'est qu'elle est plus sémantique.

Une question à ce sujet:

Tu spécifies qu'un texte est bien, même caché.

Normal, pour Google, les handicapés, les navigateurs textes...

Et si, dans un menu, on met des images avec alt="", le résultat est le même que le texte caché ?

Merci ça joue maintenant
Concernant le "alt", je connaissais, mais merci de me le rappeler.Merci à tout le monde
garden