[résolu]Hover particulier sur un menu

Bonjour !

J'aurais besoin d'un petit script pour faire un petit effet mais j'y connais rien en javascript, donc je solicite encore votre aide

En fait, j'ai un menu tout simple sur mon site : une liste à puce alignée à gauche, avec des liens qui changent de couleurs et se soulignent quand on passe dessus. Rien de plus simple donc. Pour egayer un peu la page, j'aurais aimé qu'au passage de la souris un lien, une image à droite de la liste s'affiche. Et que biensûr cette image change en fonction du lien qui est pointé. C'est donc une sorte d'effet de hover, sauf que le css ne me permet pas de le réaliser, puisque quand on pointe sur un lien de la liste, c'est une image d'arrière plan qui change mais dans une autre div positionnée à côté.

Comment on peut réaliser ça ?

Merci d'avance ^^
Modifié par manzelle_bidule (23 Jul 2006 - 19:15)

Pour faire ça il te faut un script, c'est sûr. A priori un javascript.
Tu as une image à mettre et à changer, et plusieurs à référencer, autant que tu as de liens, qui devront remplacer celle qui s'affiche dans la page.
Les images d'un page sont référencées d'office en script :

document.images[0].src = "image0.jpg";

: référence la 1ère image de la page.
On va donc définir des références d'images en array, et remplacer ensuite par celles-ci la référence de l'image affichée.

var imgname=new Array(); 
imgname[0]="a.gif"; 
imgname[1]="b.gif"; 
imgname[2]="c.gif"; 

Après tu crée une fonction :

function changeImg(nim) {
	document.images[0].src=imgname[nim];
	}

Si c'est bien la 1ère image de ta page, c'est bien 0.
Et quand tu passe sur le 2ème lien tu mets

 onmouseover="changeImg(1);"

L'image a.gif étant mise par défaut et remise par le 1er lien.

Alors d'abord merci de m'aider ^^

Par contre je dois t'avouer que je comprend pas grand chose (j'ai aucune base en javascript). J'ai essayé d'utiliser ton script, mais je sais pas trop comment m'y prendre...

Tu pourrais essayé de m'écrire le code en entier s'il te plait ?

Mon code xhtml (shématiquement) :

<div id="image1"></div>
<ul class="menu">

			
					<li><a href="page1.html">Menu 1</a></li>
					<li><a href="page2.html">Menu 2</a></li>
					<li><a href="page3.html">Menu3</a></li>
                                        <li><a href="page4.html">Menu4</a></li>
</ul>

Le code css (je passe la mise en forme de la lsite à puce) :

#image1

{	
        width: 400px;
	height : 400px;
	background : url("../graphismes/graphismes1/image1.jpeg");
	float : right;
	
}

Enfin voilà rien de plus simple A partir de là comment faire afficher image1.jpeg, image2.jpeg, image3.jpeg, image4.jpeg avec le script que tu m'as donné ?
Alors je présice que dans mon code, l'image apparaît en arrière plan d'une div, car je veux pouvoir changer ces images sans toucher au fichier html (les images changeants selon les différents designs que je propose)... Maintenant si les images sont appelées par le sript javasript (c'est possible ça ?) on peut faire autrement, comme mes scripts sont dans des fichiers externes !

Merci d'avance

Bonjour,

manzelle_bidule a écrit :
Bonjour !
C'est donc une sorte d'effet de hover, sauf que le css ne me permet pas de le réaliser, puisque quand on pointe sur un lien de la liste, c'est une image d'arrière plan qui change mais dans une autre div positionnée à côté.

Houla ! Attention aux yeux : ça fait beaucoup de choses qui gigotent, ça

Mais rien n'empêche de le faire tout simplement via CSS, et de cumuler les effets de :hover sur les liens.

Non, ça va je pense, étant donné que c'est le seul élément dynamique de la page, ça devrait pas trop fatiguer les yeux

Par contre je vois pas du tout comment faire ça en css ?

Il y a quelque chose qui ne marche pas dans la réponse que je voulais te donner. Si tu n'as toujoujours pas trouvé, je continuerai demain. Je m'en vais...
Je te mets ça ici, mais ça ne passe pas. ça : = imgname[x];

<style type="text/css">
#image1	{        width: 400px;
	height : 400px;
	background-image : url("courrier.jpg");
	float : right;
	}
</style>
<script type="text/javascript">
var imgname = new Array();
imgname[0] = "courrier.jpg";
imgname[1] = "choristes.jpg";
imgname[2] = "../graphismes/graphismes1/image2.jpg";
imgname[3] = "../graphismes/graphismes1/image3.jpg";
x = 0;
function chgimg() {
document.getElementById('image1').style.backgroundImage = imgname[x];
}
</script>

<div id="image1">ici</div>
<ul class="menu">
	<li><a href="page1.html" onmouseover="x=0;chgimg();">Menu 1</a></li>
	<li><a href="page2.html" onmouseover="x=1;chgimg();">Menu 2</a></li>
	<li><a href="page3.html" onmouseover="x=2;chgimg();">Menu3</a></li>
                    <li><a href="page4.html" onmouseover="x=3;chgimg();">Menu4</a></li>
</ul>

Ah, excuses, j'ai laissé 2 noms d'images que j'ai mis là pour voir le résultat.

Hello,

Je permet de m'imiscer dans la conversation pour compléter Laurent Denis.

Je pense qu'un résultat plus probant pourrait être obtenu.

Si tu donnes un identifiant unique à chacun de tes liens, tu peux aisément avoir un effet de surlignage sur la pseudo classe Hover présélectionnée de l'identifiant même.

#mon_identifiant:hover { /* ce que je désire */ }

Tu peux t'inspirer d'un effet de menu donné dans les tutoriaux.

Et enfin, je me suis entrainé il y a quelques temps à un menu similaire sur une oeuvre virtuelle. J'ai remis les pages en lignes et si tu désires t'inspirer du code source et de la CSS ce sera avec plaisir (regarde uniquement le menu, car le restant n'a pas été remis avec... La présentation est donc totalement superflue).

En espérant que ce soit ce que tu recherches.

G.

Bonjour !

Alors Groumphy, je sais pas si on parle du même effet... en tout cas je ne vois pas l'effet que je veux réaliser (image à côté du menu qui change en fonction du lien survolé) sur ton site ?!
Ceci dit merci quand même ^^

Deny, merci beaucoup pour le script, par contre en effet il y a un problème, chez moi aucune image ne s'affiche (enfin du moins les images ne changent pas) J'ai essayé de modifier quelques trucs mais je trouve pas le problème. Dés que tu as 5 min s tu peux essayer de trouver l'erreur, je t'en saurais très reconnaissante
Modifié par manzelle_bidule (21 Jul 2006 - 14:29)

Bonjour (re)

En CSS (sans javascript donc):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">
<!-- 
ul {
position: relative;
width: 250px;
}
a {
text-decoration: none;
}
a span {
position: absolute;
right: -5000px;
top: 0;
width: 150px;
height: 150px;
}
a:hover {
text-decoration: underline;
zoom: 1;
}
a:hover span {
background: url(images_test/150_150.png) no-repeat left top;
right: 0;
}
-->
</style>
</head>
<body>
<ul>
<li><a href="#">lorem ipsum<span></span></a></li>
<li><a href="#">lorem ipsum<span></span></a></li>
<li><a href="#">lorem ipsum<span></span></a></li>
<li><a href="#">lorem ipsum<span></span></a></li>
<li><a href="#">lorem ipsum<span></span></a></li>
</ul>
</body>
</html>

- Pour simplifier l'exemple, il n'y a pas d'image visible par défaut (il suffit de l'ajouter comme background dans a span {...} et de supprimer le right:-500px qui cache le span). Et la même image est utilisée pour tous les hover (pour différencier selon les liens, ajouter à chaque lien un id et compléter la CSS avec des a#foo1:hover et des a#foo1:hover span).

- Attention, pour appliquer un a:hover span{...}, IE a besoin que l'on ait aussi (et avant) un a:hover.

- Ici, l'image fait 150x150px. Le menu a une largeur fixe arbitraire laissant 100px pour les liens et les 150px de l'image. Naturellement, une gestion fluide de la largeur est préférable, en fonction du reste de la mise en page.

- Le "zoom: 1" est destiné uniquement à Internet Explorer (bug de reflow dû au haslayout), et pourrait être placé dans une CSS en commentaires conditionnels pour valider la feuille de style. Mais il est en tous cas sans danger pour les autres navigateurs.

- pour la gestion de la largeur: veiller à laisser suffisamment de jeu pour que le texte des liens supporte les deux niveaux d'agrandissement des tailles de caractères dans IE Windows, sans superposition avec l'image. Ici, ce n'est pas le cas: testez pour comprendre le problème que rencontreront les utilisateurs ayant besoin d'agrandir

- C'est également pour IE que les <span> contenant l'image sont masqués à l'aide du right: -5000px plutôt que par une technique plus direct (display). C'est encore ce qui lui simplifie le plus les choses. En cas d'image apparente hors survol, cela n'est plus nécessaire.

- Ne faire figurer, bien entendu, aucune information dans l'image, dont le rôle ne peut être que purement décoratif (accessibilité).

A adapter, naturellement, selon la mise en page, les effets et la structure voulues.
Modifié par Laurent Denis (21 Jul 2006 - 20:49)

Salut,

Une petite question...

Le changement d'état au survol étant typiquement un comportement, ne serait-il pas préférable, éthiquement parlant, de privilégier le javascript pour ce genre de chose ?

Bonjour,

koala64 a écrit :
éthiquement parlant

Le terme "éthique" et les termes similaires appliqués aux questions XHTML CSS DOM sont sans objet : il n'y a pas plus d'éthique standard qu'il n'y en aurait si nous fabriquions des boîtes de conserves au lieu de sites Web. Les questions éthiques se situent à autre niveau, non technique.

La question éventuelle est de savoir quel est le choix technique qui répondra à des critères de qualité tels que:
- l'accessibilité à un des niveaux WCAG
- la robustesse du code
- l'évolutivité et la facilité de ré-emploi du code
- l'interopérabilité
- l'économie de charge
- la séparation contenu / présentation-dynamisme
- et similaires selon vos cahiers des charges ou objectifs personnels

Ici, l'effet recherché est réalisable avec CSS ou avec le couple CSS-javascript : le choix pourra varier en fonction de ce que chacun aura comme contrainte sur les critères ci-dessus.
Modifié par Laurent Denis (22 Jul 2006 - 09:31)

éthique n'était pas le bon mot, oui.

Celà dit, on entend souvent dire qu'il est préférable d'utiliser les bons outils pour faire quelquechose de bien. Ce serait donc plutôt d'ordre sémantique...

Si nous visons la portabilité, nous pouvons avoir affaire à des navigateurs interprétant XHTML, CSS et DOM, tout comme d'autres n'interprétant que XHTML et CSS voire pourquoi pas, XHTML et DOM uniquement.

Dans le premier cas, on fait suivant nos besoins. Que ce soit DOM ou CSS, aucun ne remet fondamentalement en cause les critères que tu as cité. En revanche, on a pu voir que la séparation de la structure de la présentation avait du bon en terme d'accessibilité.

Aussi, si je désactive CSS, il n'y pas de raison pour que ma page se comporte différemment au même titre que dans le cas où je désactive le JS, ma mise en page ne devrait pas changer.

Ceci étant dit, si demain on créait un nouveau langage de présentation, faudrait-il obligatoirement lui inclure l'équivalent de la pseudo-classe hover ? Ne pourrait-on pas se contenter de faire de la simple mise en page ?

Un point me semble important... Lorsqu'on attribue une couleur via DOM, on écrit souvent :

var oP = document.getElementsByTagName('p')[0];
oP.style.color = 'red';

et on obtient bien notre paragraphe en rouge. Ce qui pose problème, c'est justement en terme d'évolutivité et de facilité de ré-emploi du code. Si demain, je décide de changer mon CSS, je dois aussi modifier cette valeur dans le JS alors que si je m'étais contenté d'affecter une classe, je n'aurais que le CSS à changer.

Je n'ai pas tous les tenants et les aboutissants mais, dans le doute, je préfère laisser chacun à son rôle.

Dans un sujet proche de celui-ci, je fais état d'un tuto où il était question de menu déroulant. Bien souvent, je vois tout le monde rejeter Javascript en préconisant le tout CSS. Nul doute que c'est surtout dû au fait que le Javascript a été longtemps mal employé. Aussi, dans ces fameux menus déroulants CSS, j'en croise certains qui "ouvrent" les listes via la pseudo-classe hover appliquée à un dl ou un ul. Bon, c'est chouette, sous certains navigateurs tels que Firefox, çà marche mais que se passe-t-il alors ? -> problème d'accessibilité ! Mis à part en désactivant CSS, on a aucun moyen d'accéder aux liens contenus dans chaque liste via la navigation clavier, tout simplement simplement parce que CSS ne donne pas la possibilité de prendre le focus. Dans ce cas précis, je considère donc que c'est mal exploiter CSS.

Pour ce que cherche à faire manzelle_bidule, çà ne prête pas trop à conséquence mais on voit bien que çà peut causer quelques soucis. Même si l'importance est moindre que la séparation structure/présentation-comportement, je pense qu'une des bonnes pratiques est aussi de faire la séparation présentation/comportement.

C'est un peu ce qui fait grimacer quant à ces fameuses pseudo-classes qui débordent parfois du rôle qu'on attribue au CSS.

Re-bonjour !

Alors j'ai essayé avec le css que tu m'as donné Laurent Denis, et ça marche impec, merci, j'y aurais pas pensé toute seule
Il me manque encore quelques réglages pour que tout s'affiche bien positionné et tout, mais ça je pense y arrive..

Le seul truc (bah oui, il fallait bien qu'il y ait un problème ) c'est que pour je ne sais quelle raison, IE n'affiche plus les puces des listes à puces (sur le test de Laurent Denis, quand on regarde sous IE, ça fait déjà ça)

D'où ça peut venir à votre avis ce bug là ?

Bon en fait j'ai compris, c'est encore un truc bizarre de Layout
Comme on a définit une largeur à <ul>, ça lui donne le Layout, et ça fait donc disparaître les puces (tout à fait logique )

Du coup pour régler le problème j'ai englobé tout le menu dans une <div> et c'est à cette div que j'ai donné une largeur... Ceci dit s'il y d'autres solutions qui m'éviteraient de créer une div inutile, je suis preneuse !

Salut,

Tu peux sans doute faire tes propres puces avec des images background sur les <li>.

Cela dit à partir du moment où la présence d'un div est déduite (comme dans ton cas) alors il n'y a pas à parler de div inutile.

De toute façon du point de vue "html addict", oui c'est la pathologie que je me suis diagnostiqué tous les div sont inutiles.

alors pas la peine de trop se prendre la tête

Bonjour (re et en coup de vent)

Pour la beauté du sport et surtout, tant qu'à faire, pour laisser le libre choix : solution javascript+CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">
<!-- 
 
#menu	{
width: 25%;
min-height: 150px;
min-width: 250px;
background-position: right center;
background-repeat: no-repeat;
}
.default	{
background-image: url(images_test/150_150.png);
}
.item1 {
background-image: url(images_test/150_150_blue.png);
}
.item2 {
background-image: url(images_test/150_150_green.png)
}
.item3 {
background-image: url(images_test/150_150_orange.png)
}
.item4 {
background-image: url(images_test/150_150_purple.png)
}
.item5 {
background-image: url(images_test/150_150_red.png)
}
.item6 {
background-image: url(images_test/150_150_yellow.png)
}
-->
</style>
<script type="text/javascript">
window.onload = function() {
var menu = document.getElementById('menu').getElementsByTagName('A');
  for (var i = 0; i<menu.length; i++) {
  var onOver = new Function("","document.getElementById('menu').className = 'item"+(i+1)+"';");
    if(window.addEventListener){
      menu[ i].addEventListener('mouseover', onOver, false);
      menu[ i].addEventListener('mouseout', onOut, false);
    } else if(window.attachEvent){
      menu[ i].attachEvent('onmouseover', onOver);
      menu[ i].attachEvent('onmouseout', onOut);
    }
  }
}
function onOut() {
document.getElementById('menu').className = 'default';
}
</script>
</head>
<body>


<ul id="menu" class="default">
  <li><a href="#">lorem ipsum</a></li>
  <li><a href="#">lorem ipsum</a></li>
  <li><a href="#">lorem ipsum</a></li>
  <li><a href="#">lorem ipsum</a></li>
  <li><a href="#">lorem ipsum</a></li>
  <li><a href="#">lorem ipsum</a></li>
</ul>
</body>
</html>

Attention: c'est du vite fait-mal fait et si un codeur DOM scrupuleux peut repasser dessus, il y a à améliorer.

Il manque également une CSS en commentaires conditionnels pour IE Windows et la gestion des dimensions du <ul> (il ne connaît ni min-height ni min-width, qu'on remplace pour lui par width et height).

Quelques précisions:

- ce Sgmbl%!^^ de forum déforme la syntaxe du script. Pour l'éviter , on a écrit menu[ i] avec un espace avant le i, à supprimer évidemment.

- le passage par des classes répond à la volonté de sortir les url d'images du script, et de les placer dans une CSS. Tout simplement parce que l'expérience semble m'indiquer qu'un client préfèrera avoir à modifier une CSS spécifique à son bidule (externe ou plus souvent interne) plutôt qu'un script, ou des variables de script dans un élément <script> interne. Côté intégration CMS, c'est une voie souvent plus facile.

- la répartition des propriétés de background entre les blocs #menu et .default n'est pas la voie la plus élégante côté syntaxe CSS; Mais c'est celle qui ne pose pas de soucis à IE Windows.

- mêmes remarques que la solution CSS précédente pour la nature des images, la gestion des largeurs de menus, etc.

- je code comme un cochon en javascript

Améliorations bienvenues
Modifié par Laurent Denis (22 Jul 2006 - 16:24)

Merci pour le script mais personnellement, je préfère le faire en css parce qu'au moins je comprend ce que je fais, alors que le javascript comme je sais pas comment ça marche, bah je copie bêtement et après je sais pas comment le modifier

Par contre, le css je croyais que ça allait bien et non il y a un bug. Sur tous les navigateurs que j'ai en plus.

En fait c'est quand j'essai d'indiquer un background par défaut (donc j'enlève le right : 5000px et je met right : 0px à la place)... Le background ce met, sauf qu'après les autres backgrounds n'apparaissent pas quand on survol les liens, sauf quand on survol le dernier (aller savoir pourquoi ! )
Je présise que ce n'est pas un problème de liens relatifs vers les images mal indiqués, car pour tester j'ai mis des couleurs en background histoire d'être sûr de ne pas me tromper.

keskecékeça ?


Merci d'avance !

manzelle_bidule a écrit :
alors que le javascript comme je sais pas comment ça marche, bah je copie bêtement et après je sais pas comment le modifier

A priori, tu n'aurais pas besoin de modifier la partie javascript, mais uniquement la CSS qui lui est associée.

Le script est indépendant du nombre de liens, de leur id, classes ou autres particularités. La seule modification éventuellement nécessaire aurait lieu si tu changes l'id du menu (<ul id="menu">), puisque celle-ci est utilisée par le script. Il suffit alors de modifier getElementById('menu') en conséquence.

Une remarque, d'ailleurs: en fonction de tes critères de précision au pixel près, le problème rencontré ci-dessous dans IE avec la solution full CSS peut-être justement une raison d'opter pour la solution javascript+CSS.

manzelle_bidule a écrit :

En fait c'est quand j'essai d'indiquer un background par défaut (donc j'enlève le right : 5000px et je met right : 0px à la place)... Le background ce met, sauf qu'après les autres backgrounds n'apparaissent pas quand on survol les liens, sauf quand on survol le dernier (aller savoir pourquoi ! )

C'est normal (j'aurais dû le préciser ci-dessus) : les backgrounds successifs sont empilés les uns sur les autres dans l'ordre du code HTML. Le dernier <span> est sur le dessus de la pile.

Pour que les autres <span> puissent apparaître, il faut, au :hover, leur donner une valeur de z-index supérieure à 0. Ce qui donne :

ul {
position: relative;
width: 250px;
}
a {
text-decoration: none;
}
a span {
position: absolute;
right: 0;
top: 0;
width: 150px;
height: 150px;
background: url(images_test/150_150.png) no-repeat left top;
}
a:hover {
text-decoration: underline;
}
a:hover span {
z-index: 1;
}
a#item1:hover span {
background-image: url(images_test/150_150_blue.png);
}
a#item2:hover span {
background-image: url(images_test/150_150_green.png);
}
a#item3:hover span {
background-image: url(images_test/150_150_orange.png);
}
a#item4:hover span {
background-image: url(images_test/150_150_purple.png);
}
a#item5:hover span {
background-image: url(images_test/150_150_red.png);
}

Avec comme HTML:

<ul>
<li><a href="#" id="item1">lorem ipsum<span></span></a></li>
<li><a href="#" id="item2">lorem ipsum<span></span></a></li>
<li><a href="#" id="item3">lorem ipsum<span></span></a></li>
<li><a href="#" id="item4">lorem ipsum<span></span></a></li>
<li><a href="#" id="item5">lorem ipsum<span></span></a></li>
</ul>

Détail amusant: IE5.x - 6.0 windows ne peut pas modifier l'ordre d'empilement au :hover comme attendu (le bug est corrigé dans IE7).

Il faut donc procéder autrement avec lui, en lui réservant le code CSS nécessaire par une feuille de style en commentaires conditionnels (voir la FAQ du forum et cet article pour plus de détails.

Grosso modo, pour IE, ce sont les liens eux-mêmes qui vont être réempilés au survol. Ce qui va également nécessiter leur déplacement vertical.

La CSS additionnelle pour IE, à lier après la CSS "normale", sera du type:

a:hover {
position: relative;
z-index: 1;
}
a#item2:hover span {
top: -1.1em;
}
a#item3:hover span {
top: -2.2em;
}
a#item4:hover span {
top: -3.3em;
}
a#item5:hover span {
top: -4.4em;
}

Le déplacement des liens est indiqué ici en em, grossièrement, sur la base d'une hauteur de ligne par défaut. En fonction de la présentation exacte de ton menu, il sera nécessaire d'ajuster ces valeurs en sachant qu'il y aura de légères différences de résultat d'un pixel en plus ou en moins selon les configurations utilisateurs : la conversion em->px entraîne un arrondi variable.

Pour éviter ces différences et obtenir l'effet au pixel près pour tous les utilisateurs, il faut gérer les hauteurs de liens et leurs déplacement directement en px.

Enfin, dernier détail: IE7 ne doit pas recevoir cette CSS corrective. Attention donc à bien utiliser la condition if lte IE 6.
Modifié par Laurent Denis (23 Jul 2006 - 06:24)

Hello,

Tout d'abord, désolé d'avoir perturbé le fil de la discussion.

Si on ne reste qu'en CSS, le plus simple reste effectivement d'affecter une classe ou un identifiant sur chacun des liens pour les différencier... Personnellement, j'intégrais les images comme ceci :

*
{
	padding: 0;
	margin: 0;
}
body
{
	font: 90% "Palatino linotype","Times New Roman",serif;
}
ul#menu
{
	padding: 10px 0 0 20px;
}
ul#menu li
{
	list-style-position: outside;
}
ul#menu li a
{
	font-size: 1em;
	line-height: 2.3em;
	width: 8.5em;
	height: 2.3em;
	display: block;
	color: #008;
	background-color: #FFF;
}
ul#menu li a:hover
{
	color: #A00;
}
ul#menu li a.item0:hover
{
	background: url(gloomith.gif) 100% 0 no-repeat;
}
ul#menu li a.item1:hover
{
	background: url(gloomith_2.gif) 100% 0 no-repeat;
}
ul#menu li a.item2:hover
{
	background: url(gloomith_3.gif) 100% 0 no-repeat;
}
ul#menu li a.item3:hover
{
	background: url(gloomith_4.gif) 100% 0 no-repeat;
}
ul#menu li a.item4:hover
{
	background: url(gloomith_5.gif) 100% 0 no-repeat;
}

<ul id="menu">
	<li><a href="#" class="item0">Lorem Ipsum</a></li>
	<li><a href="#" class="item1">Lorem Ipsum</a></li>
	<li><a href="#" class="item2">Lorem Ipsum</a></li>
	<li><a href="#" class="item3">Lorem Ipsum</a></li>
	<li><a href="#" class="item4">Lorem Ipsum</a></li>
</ul>

Exemple de rendu

Je n'ai pas vu l'utilité d'ajouter des span en fait. Peut-être y'avait-il une raison particulière ? mmh... et le bug... où apparait-il ? Je n'ai pas eu affaire à lui. Si on différencie les id ou class, pourquoi cette notion d'empilement ? Je m'en vais lire l'article.

A part çà... pour le mélange CSS/Javascript, ben... Je n'y arrive pas sur IE ! J'aurais mieux fait de me taire... Comme l'a dit Laurent :

a écrit :
- la répartition des propriétés de background entre les blocs #menu et .default n'est pas la voie la plus élégante côté syntaxe CSS; Mais c'est celle qui ne pose pas de soucis à IE Windows.

J'ai tenté de faire sans le mélange id/class mais non, çà bloque.
J'obtenais ceci qui, comme tu peux le voir, fonctionne sur Firefox ou Opera mais pas IE.

Comme quoi, le hover en CSS, çà dépanne...

PS: Les petites bestioles qui bougent dans mes pages, c'est pour l'exemple, mais il est préférable de rester plus... conventionnel !