Barre de naviguation (image)

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Barre de naviguation (image)

Message par adrien_69 le Mer 26 Fév 2014 - 20:08

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 !  Wink


Dernière édition par adrien_69 le Jeu 27 Fév 2014 - 11:36, édité 1 fois

adrien_69
****

Masculin
Messages : 233
Inscrit(e) le : 09/02/2005

http://www.passionlachasse.com
adrien_69 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Barre de naviguation (image)

Message par Neptunia le Jeu 27 Fév 2014 - 5:29

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
Right 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).

Neptunia
+ Hyperactif +

Féminin
Messages : 10394
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Barre de naviguation (image)

Message par stefou le Jeu 27 Fév 2014 - 9:09

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.

stefou
*****

Masculin
Messages : 889
Inscrit(e) le : 24/11/2009

http://discussansfrontieres.forumgratuit.fr/forum
stefou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de naviguation (image)

Message par adrien_69 le Jeu 27 Fév 2014 - 11:36

Merci pour vos réponses !

adrien_69
****

Masculin
Messages : 233
Inscrit(e) le : 09/02/2005

http://www.passionlachasse.com
adrien_69 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum