28172 sujets

CSS et mise en forme, CSS3

Rollover CSS, précharger image pour éviter "l'effet blanc"

Salut à tous,

Voilà, je me demande comment faire pour précharger une image de menu, pour éviter qu'au moment où la souris passe dessus, elle se charge à ce moment là, et j'ai droit à un magnifique "clignotement" avant que la deuxième image n'apparaisse.

(Quand je passe sur l'image, l'image 1 disparaît, c'est blanc le temps de charger l'image (le temps d'un clignotement) et l'image 2 apparaît.)


xHTML :

<a href="locations.html" class="img1"></a>
<a href="contact.html" class="img2"></a>
<a href="dossier.html" class="img3"></a>


CSS:
.img1 {
 background: url(locations.png) top center;  
 display: block;  
 width: 292px;  
 height: 69px;
 margin-bottom: 15px; }

.img1:link {
 background: url(locations.png) top center;  
 display: block;  
 width: 292px;  
 height: 69px;
 margin-bottom: 15px; }

.img1:hover {
 background: url(locations_h.png) top center;  
 display: block;  
 width: 292px;  
 height: 69px;
 margin-bottom: 15px; }

.img2 {
 background: url(contact.png) top center;  
 display: block;  
 width: 292px;  
 height: 69px;
 margin-bottom: 15px; }

.img2:link {
 background: url(contact.png) top center;  
 display: block;  
 width: 292px;  
 height: 69px;
 margin-bottom: 15px; }

.img2:hover {
 background: url(contact_h.png) top center;  
 display: block;  
 width: 292px;  
 height: 69px;
 margin-bottom: 15px; }

.img3 {
 background: url(dossier2.png) top center;  
 display: block;  
 width: 292px;  
 height: 69px;
 margin-bottom: 15px; }

.img3:link {
 background: url(dossier2.png) top center;  
 display: block;  
 width: 292px;  
 height: 69px;
 margin-bottom: 15px; }

.img3:hover {
 background: url(dossier2_h.png) top center;  
 display: block;  
 width: 292px;  
 height: 69px;
 margin-bottom: 15px; }
Hum et dire que j'ai lu 3 fois ce tuto sans y prêter attention...

Merci, je regarde ça, ça devrait marcher^^
Salut,

+1 pour 6l20 mais tout de même quelques remarques :

* en l'état tes liens sont tout simplement inaccessibles puisqu'il suffit de désactiver les images ou les css pour qu'ils n'existent plus dans ta page. Pour rappel le contenu doit être dans le code html et la présentation dans le code css. Donc soit tu mets du texte dans le lien et tu modifies l'image en background css sur le :hover
<a href="locations.html" class="img1">Locations</a>
soit tu gardes tes images actuelles mais dans ce cas il faut utiliser un élément IMG directement dans ton code et effectuer le rollover en JavaScript
<a href="locations.html" class="img1"><img src="locations.png" width="292" height="69" alt="Locations" /></a>
* d'autre part tes déclarations css sont redondantes : tu aurais pu faire
.img1 {
 display: block;  
 width: 292px;  
 height: 69px;
 margin-bottom: 15px; 
}
.img1:link {
 background: url(locations.png) top center no-repeat;  
}
.img1:hover {
 background: url(locations_h.png) top center no-repeat;
}

Modifié par Heyoan (28 Feb 2009 - 13:48)
Ah oui ! J'oubliais : le :hover ne se déclenchant qu'au survol de la souris c'est une bonne idée de prévoir également la navigation au clavier et de mettre
.img1:hover,
.img1:focus,
.img1:active {
 background: url(locations_h.png) top center no-repeat;
}

Modifié par Heyoan (28 Feb 2009 - 13:39)
Sujet clos
Aller à