Barre de naviguation (image)

3 participants

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

Résolu Barre de naviguation (image)

Message par adrien_69 Mer 26 Fév 2014, 14: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, 05:36, édité 1 fois
avatar

adrien_69
****

Masculin
Messages : 414
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 Mer 26 Fév 2014, 23: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

Neptunia
Membre actif

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

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Barre de naviguation (image)

Message par stefou Jeu 27 Fév 2014, 03: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

stefou
*****

Masculin
Messages : 901
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 Jeu 27 Fév 2014, 05:36

Merci pour vos réponses !
avatar

adrien_69
****

Masculin
Messages : 414
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

- Sujets similaires

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