Modification image barre de navigation au passage de la souris

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

Résolu Modification image barre de navigation au passage de la souris

Message par MlleAlys le Dim 28 Oct 2012 - 18:17

Tout d'abord, je suis désolée si je ne poste pas dans la bonne section =S

Voilà, j'ai installé le code de ce tutoriel sur mon css (tout fonctionne très bien), et à la fin il est question de :
@Narumi a écrit:Pour un remplacement immédiat sans temps de chargement ( la première fois ), vous pourriez avoir l'image et son remplacement sur la même "image" et utiliser la propriété background-position dans le CSS pour faire apparaître l'une ou l'autre.
J'ai bien compris le but, mais quelqu'un pourrait-il m'expliciter cela ? Je ne comprends ce qu'il faut faire exactement... ^^"

Merci d'avance ! Very Happy


Dernière édition par MlleAlys le Sam 3 Nov 2012 - 21:38, édité 3 fois

MlleAlys
+ Hyperactif +

Messages : 4404
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification image barre de navigation au passage de la souris

Message par MlleAlys le Lun 29 Oct 2012 - 18:22

up

MlleAlys
+ Hyperactif +

Messages : 4404
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification image barre de navigation au passage de la souris

Message par MlleAlys le Mar 30 Oct 2012 - 18:27

up

MlleAlys
+ Hyperactif +

Messages : 4404
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification image barre de navigation au passage de la souris

Message par MlleAlys le Mer 31 Oct 2012 - 23:06

up

MlleAlys
+ Hyperactif +

Messages : 4404
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification image barre de navigation au passage de la souris

Message par MlleAlys le Ven 2 Nov 2012 - 12:26

up

MlleAlys
+ Hyperactif +

Messages : 4404
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification image barre de navigation au passage de la souris

Message par MlleAlys le Sam 3 Nov 2012 - 15:09

up

MlleAlys
+ Hyperactif +

Messages : 4404
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification image barre de navigation au passage de la souris

Message par loupbrave le Sam 3 Nov 2012 - 16:34

Il faut 2 images par catégories:

Exemple: Pour le portail, il faut 1 image (qui sera affichée lorsqu'on est sur le forum) et 1 autre qui changera lorsqu'on passera dessus avec le pointeur de la souris.

Pour l'index ça donnerait par exemple:
Code:
/*IMAGE INDEX*/
        #i_icon_mini_index{
          background-image:url(http://i49.servimg.com/u/f49/17/69/03/92/forum_10.png); /*image si la souris ne survole pas*/
          width:100px; /*Largeur de l'image*/
          height:40px; /*Hauteur de l'image*/
        }
        #i_icon_mini_index:hover{
          background-image:url(http://i49.servimg.com/u/f49/17/69/03/92/forum_11.png); /*image si la souris survole*/
          width:100px; /*Largeur de l'image*/
          height:40px; /*Hauteur de l'image*/
        }

Tu change les adresses des url par les images que tu aura préparé, et pour chaque catégories, tu fais la même chose.

Au final, ça donne:

www.carpenoctem.wowjdr.com

Bon courage. Smile

loupbrave
Nouveau membre

Messages : 3
Inscrit(e) le : 03/09/2012

http://carpenoctem.wowjdr.com/
loupbrave a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification image barre de navigation au passage de la souris

Message par AenigmA le Sam 3 Nov 2012 - 17:18

Bonsoir,
Ca marche avec deux images mais aussi avec une seule MlleAlys

Pour ta citation de Narumi, il parle d'une seule image de ce type :

Qui contient les 2 sur une seule et que l'on positionne par le css.

La seule chose que tu as à choisir c'est une des deux solutions, ce que tu as fait.

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification image barre de navigation au passage de la souris

Message par paolo18pp le Sam 3 Nov 2012 - 17:52

Vous Pouvez utilisez sa

paolo18pp
***

Messages : 112
Inscrit(e) le : 19/05/2012

http://swagg.frbb.net/
paolo18pp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification image barre de navigation au passage de la souris

Message par MlleAlys le Sam 3 Nov 2012 - 21:15

@AenigmA : aaaaah ! ok, je vois le principe maintenant !! Thanks


(@loupbrave : oui merci, c'est déjà ce que j'ai fait avec le tuto =P Mais je vois sur ta page que tu as aussi le temps de chargement qui laisse un blanc, ce que je voulais résoudre ^^

@paolo18pp : merci, mais si j'ai bien compris, ça revient à ce que j'ai fait avec le tuto ^^)


Je passe le sujet en résolu !



EDIT : ça marche impec, merci encore !

MlleAlys
+ Hyperactif +

Messages : 4404
Inscrit(e) le : 12/09/2012

MlleAlys 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