Discussion :

[hellspawn_ludo]

Bonjour,

J'ai créé mon menu sans soucis mais maintenant je cherche le moyen d'avoir un petit signe, en l'occurence un " . ", qui permet de signaler que la souris est sur tel ou tel élément de ma liste.

Voici une copie-écran de ce que je voudrais faire :


Pourriez-vous me dire comment ceci est réalisable ou me renvoyer sur un lien internet qui pourrait me l'expliquer ?

Merci à vous.

[Kerod]

Il existe les pseudo-classes mais elles sont pas compatibles tous navigateurs.Il va falloir que tu utilises un background ou que tu utilises du JS. Personnellement ce serait background (image).

[hellspawn_ludo]

Bonjour et merci à toi pour ta réponse.

Ne voyant pas le principe de fonctionnement avec le background ou le javascript, pourrais-tu m'expliquer le principe svp ?

Les idées me viendront sûrement après une petite explication.

Merci à toi.

[Er3van]

Avec JS, JavaScript, tu peux gérer les évenement onmouseover et onmouseout, c'est à dire, quand t'as souris vient sur ta zone, et quand elle en sort.

Pour la technique des background, c'est avec css.

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#maDiv {
background-color : #00FFFF ;  // Ou ton image sans un point
}
 
#maDiv :hover {
background-color : #FFFF00 ;  // Ou ton image avec un point
}

Mais ce n'est pas bien géré par IE6.
Par contre, si ce sont des liens, le a :hover fonctionne très bien.
Ce qui donnerait :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#maDiv a:link {
background-color : #00FFFF ;  // Ou ton image avec sans point
}
 
#maDiv a:hover {
background-color : #FFFF00 ; // Ou ton image avec un point
}

[hellspawn_ludo]

Mon menu est en effet sous forme de lien ce qui me permet d'utiliser déja le hover. J'y ai rajouté la propriété background-image et ça roule impeccablement.
Un grand merci à vous deux pour cette rapidité d'exécution.

Puis-je me permettre d'abuser de vos compétences en vous posant une dernière question ?
Comment dois-je faire pour conserver, une fois que l'on a cliqué sur un élément, le background-image sur l'élément sélectionné ?

Merci.

[Kerod]

Mais ce n'est pas bien géré par IE6.

Tu es bien généreux avec IE6. Tu veux pas dire que ce n'est pas géré par IE6 ? Car c'est quand même le cas.

[Er3van]

Comment dois-je faire pour conserver, une fois que l'on a cliqué sur un élément, le background-image sur l'élément sélectionné ?

Il ne me semble pas que le a:active réponde à ton problème, t'es obligé de passer par autre chose que CSS à mon avis.

Tu es bien généreux avec IE6. Tu veux pas dire que ce n'est pas géré par IE6 ? Car c'est quand même le cas.

J'en ai tellement marre de FF2 ( à quand le 3 ??? ) que ça me coûte d'admettre que IE6 à des lacunes face à ce dernier

[hellspawn_ludo]

Quand tu dis autre chose que du CSS, tu fais allusion à du javascript ?

Tu pourrais ou vous pourriez m'expliquer les grandes lignes ?

[Er3van]

Dans tous les cas un langage de programmation, soit JS soit PHP.
C'est pas bien compliqué, tu peux simplement tester si le href de ton lien correspond à l'url de la page en cours, et dans ce cas tu met un "style=\'background : url(images/xxx.jpg) ;\'".

Avec PHP pour l'url de la page en cours ça passe par $_SERVER['REQUEST_URI'] il me semble, en JS à toi de trouver, Google est ton ami ^^

[hellspawn_ludo]

Je pensais à la même chose. C'est-à-dire de vérifier l'url car j'y ai mis une variable. Et grâce à celle-ci, je pourrais en fonction de sa valeur afficher le background-image sur le bon élément de mon menu.

Je passe le post en résolu. Si j'ai des soucis, je le réouvrirai.

Encore merci à vous.