Bonjour,
Voilà, je souhaiterai avoir une petite explication pour réaliser une petite chose.
J'ai une barre de navigation (forum, portail....) avec evidement dans chaque bouton un texte ...
Cependant, je souhaiterai lorsque je passe au dessus d'un des boutons de ma barre de navigation soit que le texte change de couleur ou soit qu'il y ait une lueur. Pour cela, comment dois je m'y prendre ?
Y'a til un code pour réaliser cela ? Faut t'il l'image simple et aussi l'image avec une lueur ?

Merci de vos réponses et de vos explications

(PS; Je ne veux pas un code, mais une explication qui par la suite, si c'est possible, je ferai une demande de code)

D'accord, merci pour la réponse.
J'avais effectivement vu ce tuto, mais cela parle pour un texte écrit et non d'une image =)

Très bien je te remercie pour l'aide
Bizouille =)

Salut!

Sur le système du tuto plus haut, tu peux faire ça :

Code:

a.mainmenu{
display:block;
height:/*hauteur de ton image*/px;
width:/*largeur de ton image*/px;
background: url(http://www.le.lien_de_mon_image.jpg) no-repeat 0 0;
text-indent:-10000px;/*pour virer le texte hors de l'écran, on ne verra plus que l'image, à moins qu'il existe un truc à gérer sur forumActif pour ça, je te laisse voir*/
}

a.mainmenu:hover{
height:/*hauteur de ton image : nécessaire seulement si la taille de l'image change*/px;
width:/*largeur de ton image : nécessaire seulement si la taille de l'image change*/px;
background: url(http://www.le.lien_de_mon_image_au_survol.jpg) no-repeat 0 0;
}

Pour résumer, je dis au lien de se prendre pour un block, de prendre la taille de l'image et de l'insérer en fond sans la répéter et en la plaçant en haut à gauche. Ensuite, j'ordonne au texte de virer hors de ma vue. Le hover est une pseudo-classe qui fait référence au survol, lorsque le curseur de la souris passe dessus. Il est conseillé de prendre des images de même taille (plus pratique), mais si tu ne le fais pas, il faudra redéfinir la taille du a. Et enfin, évidemment, je change l'image en fond.

Bonne journée,
Kiwi

Coucou,
merci pour la réponse mais ce n'est pas tout à fait ça que je veux faire, ou du moins ça me parait compliqué !


et serait-il donc possible de le faire pour la barre de navigation

Lidord a écrit:

Coucou,
merci pour la réponse mais ce n'est pas tout à fait ça que je veux faire, ou du moins ça me parait compliqué !

Voici ce que j'ai trouvé:
http://www.sos-forum.com/t979-css-systeme-de-survol-pour-certains-boutons

et serait-il donc possible de le faire pour la barre de navigation

Hum... C'est exactement le principe dont je t'ai parlé

Je ne dois pas être douée pour les explications? ^^

Kiwi

EDIT : /Facepalm
Ha oui, c'est vrai que ce qui était chiant avec la barre de navigation, c'est de déterminer qui est qui.... Pour ça... Il reste que la solution JavaScript ^^ J'avais trouvé un truc, mais je suis pas sûre d'avoir gardé le code >_<
EDIT2 : Non, je ne l'ai pas gardé... En clair, je me repérai en javaScript selon la destination du href pour savoir dans quel menu j'étais, mais bon...

Massive8despair => J'ai enlevé le lien
Kiwi => D'accord, j'essaierai et je te dirai quoi

Euh presque car il y a juste un petit soucis, c'est le fait qu'il y a un retour à la ligne à chaque fois ou lieu d'avoir la barre de navigation sur une seule ligne ^^'

Code:

a.mainmenu{
display:block;
height:50px;
width:120px;
background: url(http://files.webopload.net/1506120947.test1bn.jpg) no-repeat;
position:left;

}


a.mainmenu:hover{
background: url(http://files.webopload.net/1462680780.test2bn.jpg) no-repeat 0 0;
}

=)

Oui, c'est toujours d'actualité
J'aimerai aussi savoir comment on peut faire ce même effet dans les messages

Bonsoir,

Code:

a.mainmenu{
display:block;
float:left;
height:50px;
width:120px;
background: url(http://files.webopload.net/1506120947.test1bn.jpg) no-repeat;
position:left;

}

J'ai rajouté le float en left pour le positionnement en une ligne. Tu as réussi à gérer indépendamment les images du menu? Car sinon, j'ai repensé à une solution CSS depuis.

Bonne fin de soirée. (ou bonne nuit)

Merci, oui c'est déjà beaucoup mieux
Cependant, l'image reste toujours la même sur chaque forum donc...

Et j'aimerai pouvoir faire ce même effet dans mes postes, donc si vous savez, ce serait super

Citation :

Cependant, l'image reste toujours la même sur chaque forum donc...

Je ne comprends pas trop ce que tu veux dire ^^ Un screen ou un lien peut-être?

Et pour faire ces effets dans tes posts... Tu veux dire des effets "limités", par exemple dans certains posts officiels du staff, ou quelque chose d'accessible à tous? Accessible à tous, ça me paraît compliqué.

Alors, mon print screen ne marche plus mais enfin je vais être clair^^
Sur ma barre de navigation, il y a bien l'image demandé et celle au survol aussi, cependant, cela reste la même pour chaque bouton de la navigation, c'es à dire que c'est toujours:
"forum" => accueil
"forum" => on/off
"forum" => profil
"forum" => faq
...

et je veux qu'à le place de "forum", cela change (suivant mes images) pour cahque bouton de la barre.

Bonsoir,
Pour ça, il faut utiliser en CSS les sélecteurs d'attributs.

Lorsque tu fais ton CSS, tu mets tout sur .mainmenu et .mainmenu:hover, or cette classe englobe tous les liens du menu. Il est impossible de les différencier via template, puisqu'il s'agit d'une zone répétée à l'identique : on ne peut pas mettre d'id. La seule chose de différente, c'est le lien vers lequel le menu pointe.

Donc à la place, tu utiliseras (ira chercher les éléments de class mainmenu dont le href est égal à...) :
.mainmenu[href="/forum"] et .mainmenu[href="/forum"]:hover pour la page d'accueil,
.mainmenu[href="/search"] et .mainmenu[href="/search"]:hover pour la fonction recherche,
.mainmenu[href="/calendar"] et .mainmenu[href="/calendar"]:hover pour le calendrier,
.mainmenu[href="/faq"] et .mainmenu[href="/faq"]:hover pour la FAQ,
.mainmenu[href="/memberlist"] et .mainmenu[href="/memberlist"]:hover pour la liste des membres,
.mainmenu[href="/register"] et .mainmenu[href="/register"]:hover pour le bouton d'enregistrement,
.mainmenu[href="/groups"] et .mainmenu[href="/groups"]:hover pour les groupes,
.mainmenu[href^="/privmsg?folder=inbox"] et .mainmenu[href^="/privmsg?folder=inbox"]:hover pour le bouton messagerie (impossible de faire la différence s'il y a ou pas des nouveaux messages en CSS par contre),
.mainmenu[href^="/login?logout"] et .mainmenu[href^="/login"]:hover pour le bouton connexion.

Mais il y a des liens plus compliqués, comme ceux du profil, ou de déconnexion, qui font appel à des variables selon l'utilisateur, tout ça... Pour ceux-là, on ne précisera que le début du lien, comme ceci (ira chercher les éléments de class mainmenu dont le href est commence par...) :
.mainmenu[href^="/profil"] et .mainmenu[href^="/profil"]:hover pour le profil,
.mainmenu[href^="/login?logout"] et .mainmenu[href^="/login?logout"]:hover pour le bouton déconnexion.

Voilà, j'espère que j'ai réussi à t'expliquer ^^'
Kiwi

C'est parfait !!!
Un grand merci à toi



Maintenant, il ne me reste plus qu'à savoir comment faire ce même effet dans un message ou dans une page html ^^

Pour ça, il me faudrait plus de précision quant au contexte

"Et pour faire ces effets dans tes posts... Tu veux dire des effets "limités", par exemple dans certains posts officiels du staff, ou quelque chose d'accessible à tous? Accessible à tous, ça me paraît compliqué." (et même impossible en CSS)

Et dans une page HTML qu'est-ce qui te bloque pour le refaire? =o

bah il me faudrait un code précis, car je n'arrive pas à le faire via un post et le html (et css^^)

Eh bien, dans une page html, il suffit de créer ton lien, de lui donner une classe, et de réutiliser le même genre de code CSS qu'auparavant (mettre en bloc, donner les dimensions, mettre une image background, et modifier ce background au hover). Pour un post, c'est un peu le même principe.

Par exemple, tu fais un post avec un lien vers un autre topic, et pour cela tu veux utiliser des images, eh bien, tu actives le html, tu mets ton a, ta classe et dans ton CSS le code approprié.

Je ne sais pas trop quoi te dire de plus, désolé si ça ne t'aide pas ^^" Sinon, tu peux me montrer ce que tu as essayé de faire? =o

Kiwi