Barre de naviguation (image)

[adrien_69]

Bonjour à tous,

J'ai une barre de naviguation en haut de mon forum... Une autre image apparaît lors du passage de la souris. Mais quand c'est la première fois, celle ci mets un peu de temps à arriver le temps du chargement.

Je sais qu'il est possible de jouer sur le backround, mais je ne sais pas comment m'y prendre.

Voici mon code dans mon css pour un bouton :

Code:

/*IMAGE SITE*/
.site{
background-image: url('http://passionlachasse.free.fr/passionlachasse.com/barre/site1.png'); /*image si la souris ne survole pas*/
width: 53px; /*Largeur de l'image*/
height: 38px; /*Hauteur de l'image*/
}
.site:hover{
background-image: url('http://passionlachasse.free.fr/passionlachasse.com/barre/site2.png'); /*image si la souris survole*/
width: 53px; /*Largeur de l'image*/
height: 38px; /*Hauteur de l'image*/
}

Merci de votre aide !  

[Neptunia]

Coucou ^^

En fait c'est tout bête :
La première fois qu'on arrive sur ton forum, on n'a pas les images en cache.
- On va afficher la première image et
- On n'a pas la seconde en cache et au survol yaura un temps de latence.

L'astuce c'est d'avoir à l'avance la deuxième image en cache.

Comment ?

En mettant les deux boutons sur la même image
Voir la dernière partie de ce message.

Tu peux voir le résultat en live sur le forum de mon profil, mais j'ai poussé le vice encore plus loin. Ma barre n'est pas découpée et du coup on ne charge qu'une seule image pour tous les boutons (en fait il y a 4 images).

[stefou]

Bonjour,

Je charge les deux background en cache comme ceci

Code:

       /*IMAGE SITE*/
        .site{
        background-image: url('http://passionlachasse.free.fr/passionlachasse.com/barre/site2.png'); /*mise en cache de l'image de survole*/
        background-image: url('http://passionlachasse.free.fr/passionlachasse.com/barre/site1.png'); /*image si la souris ne survole pas*/
        width: 53px; /*Largeur de l'image*/
        height: 38px; /*Hauteur de l'image*/
        }
        .site:hover{
        background-image: url('http://passionlachasse.free.fr/passionlachasse.com/barre/site2.png'); /*image si la souris survole*/
        width: 53px; /*Largeur de l'image*/
        height: 38px; /*Hauteur de l'image*/
        }

Bonne journée.

[adrien_69]

Merci pour vos réponses !