Bouton personnalisé de la Barre de Navigation modifiées au passage de la souris

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

Résolu Bouton personnalisé de la Barre de Navigation modifiées au passage de la souris

Message par soul.eater le Ven 27 Sep 2013 - 1:15

Bonjour,

Je fais appel à votre aide concernant l'astuce : "Images de la Barre de Navigation modifiées au passage de la souris.

En effet j'arrive à faire la manipulation sans aucun soucis pour des boutons possédant déjà des identifiants (#i_icon_mini_index, #i_icon_mini_portal, ect). Par contre je n'arrive pas à le faire sur un bouton personnalisé (carte) car je ne trouve pas comment attribuer un identifiant à ce bouton (j'ai tenté avec des div class et en mettant un id mais ça m'a fait des erreurs de code).

Je vous remercie d'avance pour votre aide éventuelle, Cordialement,

Jonas


Dernière édition par soul.eater le Mer 2 Oct 2013 - 14:03, édité 1 fois

soul.eater
**

Masculin
Messages : 66
Inscrit(e) le : 20/06/2013

http://www.lesramollisdelamolette.org/
soul.eater a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton personnalisé de la Barre de Navigation modifiées au passage de la souris

Message par soul.eater le Mar 1 Oct 2013 - 12:45


soul.eater
**

Masculin
Messages : 66
Inscrit(e) le : 20/06/2013

http://www.lesramollisdelamolette.org/
soul.eater a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton personnalisé de la Barre de Navigation modifiées au passage de la souris

Message par Brandys le Mer 2 Oct 2013 - 11:09

Bonjour,

Qu'entends-tu par bouton personnalisé? Dans la barre de navigation?

En règle générale pour changer au survol d'une souris tu utilises l'attribut ":hover" dans le css.

Par exemple
Code:
<div class="bouton1"></div>
Et dans le css tu lui donnes toutes les caractéristiques
Code:
.bouton1{
background-image:url('URL_du_bouton'); /*Url de ton bouton normal*/
height: ??px;
width: ??px;
}
Et tu rajoutes un ":hover" pour que l'image change quand tu passes la souris
Code:
.bouton1:hover{
background-image:url('url_du_bouton'); /*Url de ton bouton quand tu passes la souris*/
}
Je ne sais pas si ça t'aide mais si c'est le cas, ce fut un plaisir

Brandys

Brandys
*

Masculin
Messages : 30
Inscrit(e) le : 11/07/2010

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

Résolu Re: Bouton personnalisé de la Barre de Navigation modifiées au passage de la souris

Message par soul.eater le Mer 2 Oct 2013 - 13:17

Bonjour Brandys,

Oui ça concerne bien la barre de navigation (acceuil, portail, etc), j'ai rajouté dessus un menu carte.

J'avais tenté la même démarche mais dans le cas d'un div class je n'ai pas la place de le mettre en titre de menu et lorsque je le met à la place de l'url de l'image ça me met ceci  : </div>" border="0" hspace="0" alt="Carte" title="Carte" /> (au lieu de l'image indiquée par le css)

Merci beaucoup en tout cas pour votre aide, c'est très gentil de votre part.

Cordialement,

Jonas

soul.eater
**

Masculin
Messages : 66
Inscrit(e) le : 20/06/2013

http://www.lesramollisdelamolette.org/
soul.eater a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton personnalisé de la Barre de Navigation modifiées au passage de la souris

Message par Brandys le Mer 2 Oct 2013 - 13:25

J'essaie de comprendre ce que tu essaies de faire exactement.

Tu veux rajouter un bouton dans le menu au dessus (en plus de ceux existant)?
Dans ce cas là, tu aurais juste à rajouter ce bouton de cette manière :
Panneau d'administration > Affichage > Page d'accueil > En-tête et navigation, ensuite dans "Barre de navigation" tu cliques sur "Ajouter un menu personnalisé". Tu n'aurais plus qu'à le modifier dans le css.

@soul.eater a écrit:</div>" border="0" hspace="0" alt="Carte" title="Carte" /> (au lieu de l'image indiquée par le css)
Peux-tu me donner le code complet de ce que tu écris?

Brandys

Brandys
*

Masculin
Messages : 30
Inscrit(e) le : 11/07/2010

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

Résolu Re: Bouton personnalisé de la Barre de Navigation modifiées au passage de la souris

Message par soul.eater le Mer 2 Oct 2013 - 13:47

Oui c'est bien sa, c'est un bouton que j'ai rajouté dans En-tête & Navigation.

Voici ce que j'ai mis pour ce bouton :


Dans le css j'ai mis le code comme vous l'avez indiqué précédemment :

Code:
.bouton1{
background-image:url('http://image.noelshack.com/fichiers/2013/40/1380714220-tblanc.png'); /*Url de ton bouton normal*/
height: 70px;
width: 50px;
}
.bouton1:hover{
background-image:url('http://image.noelshack.com/fichiers/2013/40/1380714220-torang.png'); /*Url de ton bouton quand tu passes la souris*/
height: 70px;
width: 50px;
}


Et voici ce que ça m'affiche :

soul.eater
**

Masculin
Messages : 66
Inscrit(e) le : 20/06/2013

http://www.lesramollisdelamolette.org/
soul.eater a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Bouton personnalisé de la Barre de Navigation modifiées au passage de la souris

Message par Adam_sfp le Mer 2 Oct 2013 - 13:52

Bonjour

Pour rajouter une ID essayez ceci
Dans la case image essayez en mettant le lien de votre image et votre id de cette manière
Code:
LE LIEN DE VOTRE IMAGE" id="test

Si vous ne mettez pas d'images mettez une image vide
Code:
http://illiweb.com/fa/empty.gif" id="test
Cdt.

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton personnalisé de la Barre de Navigation modifiées au passage de la souris

Message par soul.eater le Mer 2 Oct 2013 - 14:02

Ça fonctionne parfaitement en mettant l'id après le lien d'image, merci beaucoup Adam et Brandys pour votre aide. Very Happy 

Cordialement,

Jonas

soul.eater
**

Masculin
Messages : 66
Inscrit(e) le : 20/06/2013

http://www.lesramollisdelamolette.org/
soul.eater 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