[résolu] Liste à puce graphique et rollover

Bonjour,
J'ai une liste de lien toute simple de ce style :

<ul>
<li><a href="">lien 1</a></li>
<li><a href="">lien 2</a></li>
<li><a href="">lien 3</a></li>
</ul>

Cette liste a des puces graphiques. Je voudrais que la puce graphique change lorsque je fais un rollover sur les liens (en même temps qu'un changement de couleur du lien).

Est-ce possible en CSS ou dois-je passer par du JavaScript ?
Modifié par terzag (13 Nov 2006 - 13:28)

Bonjour,

Cela est tout àfait possible en CSS.
Et le principe est tout ce qu'il y a de plus simple

1/ Tu affectes une couleur et une image d'arrière-plan (ta puce) à chacun de tes lien.
2/ Et au survol (instruction a:hover) tu modifies simplement ton arrière-plan et la couleur de tes liens ...

J'ai oublié de préciser que j'avais déjà essayé cette méthode, mais elle ne me convient pas tout-à-fait : la puce en arrière-plan étant placée à des coordonnées précises, elle n'est plus alignée avec le texte si la typo change (si l'utilisateur change sa taille, si elle est différente sur un autre système, etc.).

Je préférerais que l'image de la puce reste toujours alignée avec le texte du lien, d'où l'utilisation d'une vraie puce plutôt que d'un arrière-plan.

Le problème c'est que tu choisisses de placer une puce en background ou de mettre une puce intégrée dans le code HTML directement, tu te retrouveras avec le même problème de positionnement. Si l'utilisateur agrandit sa police via son navigateurs ou si ses préférences vont à l'encontre de tes instructions, tu ne pourras rien y changer...

Certes, mais une puce reste toujours alignée sur la police lorsque celle-ci change de taille, non ?

Finalement, je suis repassé à la méthode "image de fond" parce qu'IE 6 ne m'affichait pas les puces personnalisées. Je ne suis pas complètement satisfait, mais je pense qu'il n'y aura pas mieux.

Salut,

Je ne comprends pas ton problème. Si tu centres ton image de fond verticalement, elle sera toujours alignée avec le texte, non ?

En fait, oui.

Pour tout dire, ça m'a traversé l'esprit mais je n'ai même pas essayé, pensant que le haut de l'image (et non son centre) allait être aligné avec le milieu du texe, comme c'est le cas si on place un bloc en position absolue à 50% (placement par rapport au coin supérieur gauche et non au centre).

Effectivement, comme ça, ça marche.

terzag a écrit :
Effectivement, comme ça, ça marche.

Héhé

En fait, pour les backgrounds, si tu spécifies x% pour la position verticale ou horizontale, cela signifie que le point à x% de ton image sera placé au point à x% de l'élément sur lequel tu appliques le background. Le cas "center" est en fait équivalent à 50%.

terzag a écrit :
Effectivement, comme ça, ça marche.

Ceci est donc un sujet [Résolu] alors...
Modifié par Cygnus (13 Nov 2006 - 13:20)

Je me suis intéressé aussi au principe de la puce qui change par rollover.
Le code suivant fonctionne parfaitement sur FF2, mais pas sur IE6 où la puce n'est absolument pas modifiée (je ne peux malheuresement pas tester sur FF1 et IE7 ici )

<ul id="links">
	<li><a href="#">Lien 1</a></li>
	<li><a href="#">Lien 2</a></li>
</ul>

ul#links li { list-style-image:	url( puce_out.gif ); }
ul#links li:hover { list-style-image: url( puce_over.gif ); }

J'ai effectué quelques recherches sur google, mais le seul résultat pertinant que j'ai trouvé est ce post, dans lequel malheuresement n'est présent aucun code ^^

En vous remerciant d'avance de votre aide =)


EDIT: J'ai également testé la technique du background, mais de la même façon, il n'est pas modifié sous IE6, bien que cela fonctionne sous FF2.
Modifié par Zed-K (16 Nov 2006 - 12:35)

Salut, le :hover n'est interprété que sur les lien par IE6

A+

Merci pour la réponse rapide =)
Ca confirme ce que je craignais malheuresement

ul#links li a:hover { list-style-image:	url( puce_over.gif ); }

En mettant le changement de style sur le :hover des liens, je ne peux malheuresement pas modifier le list-style-image (attribut du li et non du a).
Est-ce qu'il y aurait une possibilité pour cibler le li ?

Je ne vois pas d'autre possibilité, à part en dernier recours l'utilisation de javascript dont je me passerais bien à vrai dire



EDIT: Je viens d'essayer la technique du background sur le <a> (j'avais mal compris les posts précédents), et pour l'instant cela fonctionne sous IE 6. Mais plus sous FF2 ^^;

ul#links li a {
	background-repeat: no-repeat;
	background-image: url( puce_out.gif );
};
		
ul#links li a:hover {
	background-image: url( puce_over.gif );
	background-color:#009999;
}

J'ai l'impression que le hover ne se fait même pas sous FF en fait, j'ai rajouté le background-color pour vérifier cette hypothèse, et en effet la couleur de fond du lien n'est pas modifiée.
Modifié par Zed-K (16 Nov 2006 - 14:24)

Si ça peut t'aider, voilà mon code :
HTML

<ul>
<li><a href="">Lien inactif</a></li>
<li><a class="actif" href="">Lien actif</a></li>
</ul>

CSS

a:link,a:visited,a:active{
background: url("i/puce.png") 12px 50% no-repeat;
padding: 0 30px;
}
a:hover,a.actif{
background: url("i/puce_sel.png") 12px 50% no-repeat;
color: #f00;
}

Ça marche sous Firefox 2 (je ne sais plus si j'ai testé sous Ff 1.5.0.8 mais à priori pas de problème), IE 6, IE 7, Opera 9, Konqueror je-sais-pas-combien et Safari je-sais-pas-combien-non-plus.
Modifié par terzag (16 Nov 2006 - 15:12)

En effet, ça fonctionne.
Shame on me, j'avais mis (me demandez pas pourquoi) un point-virgule après ma première accolade fermante ^^;

Ca ne dérangeait pas Internet Explorer, mais Firefox n'aimait pas ^^
Du coup tout fonctionne parfaitement.

Merci encore =)