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

[soul.eater]

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

[soul.eater]

[Brandys]

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

[soul.eater]

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

[Brandys]

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.

</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

[soul.eater]

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 :

[Adam_sfp]

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://2img.net/i/fa/empty.gif" id="test

Cdt.

[soul.eater]

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

Cordialement,

Jonas