Bonjour à tous !
 
Je suis entrain de bâtir un site internet et je n'ai pas pratiqué depuis un bout de temps. Là je bute sur un problème que des gens trouvent simple dans d'autres forums mais se contentent de se moquer plutôt que m'indiquer une voie ou une solution.
 
Je vous explique :
 
Je souhaite bâtir le site au maximum en utilisant CSS, PHP, xHTML.
Il se compose de 3 colonnes élastiques (longueur définie en 'em'), donc une gauche, une centrale, une droite.
Celle du centre est plus large que les 2 autres (environ le double).
Dans cette colonne centrale j'y met une image de fond par défaut (on dira une chaussure)
Dans les colonnes droites et gauches, chacune possède un menu avec des liens (<ul><li><a href="#">blabla</a></li></ul> ).
 
Ce que je souhaite :
 
Lorsque l'on survole un lien dans l'un des menus (colonne gauche ou droite) l'image de la colonne centrale se modifie en fonction du lien.
 
Par exemple : je survole le lien 2 dans la colonne de gauche, l'image de la colonne centrale se modifie pour laisser place à une autre image qui correspond à celle du lien 2.
Et chaque lien aura une image différente à faire afficher au centre.
Quand aucun lien n'est survolé par la souris, l'image du centre retourne à sa fonction 'Default' et on revoit une chaussure.
SVP : S'il est possible de boucler ça juste avec du CSS j'en serai ravi, cependant je ne cracherai pas sur des infos même en JS.
 
Je vous remercie beaucoup par avance de l'aide que vous pourriez m'apporter
 

je t'aide un peu c'est un lien hover j'ai recherché sur le net pour savoir car ca m'intéressait un peu après je vais regarder de plus près.
 
edit:  
 
voila en approfondissant mes recherches j'ai touvé ca :  
http://css.mammouthland.net/rollov [...] .php#appfd

J'avais cherché à faire un truc similaire pour m'amuser, tout en css.
Ya surement d'autres méthodes et j'ai surement rien inventé mais ça marche (à voir pour le support du :hover sur IE)

http://sifr.free.fr/Gfx/html/menu_image.html

Pour le support du :hover, mettre une <a> plutôt qu'une <div>, et la transformer en block dans le CSS (display:block)...
C'est sémantiquement super crade, mais je pense que ça marchera...

EDIT :
J'oubliais, mais il y a le selecteur CSS "+" qui permet de selectionner un élémént adjacent...
Exemple : a:hover + img{} => style de la balise image qui suit directement un lien survolé...
C'est du CSS2 je crois, donc IE 6 ne le gobera pas forcément, à tester...

je pense pas, le a:hover qui viendra remplacer la dernière ligne du CSS n'affecteras pas le contenu du div.
J'ai cherché rapido, si j'en crois ce que j'ai trouvé seul IE 6 ne supporte pas le hover sur le div.

Non mais justement, le <a> remplace la <div>...
Le trucs est donc de transformer la balise a en conteneur de type block...
Ou alors je comprend pas ta remarque...

<a id='lienUn'><span>texte un</span><img ... /></a>

J'ai jamais dit que c'était propre !

(Et voir mon Edit plus haut, si quelqu'un peut tester pour MA curiosité... je suis sur linux et les émulateur IE6 ne marchent pas...

ah ok oui ça devrait marcher... et ouais c'est hyper pas propre
 
Sinon je code pas pour IE6

C'est toujours pas la bonne section pour causer code…
 
Celà dit, <a <span <img est tout ce qu'il y a de propre.
Par contre faire un "menu" ou une "liste" déléments sans utiliser <ol <ul ou <dl, ça oui c'est un peu dommage. Les divs c'est le mal.

Merci pour votre aide, je vais tester un peu tout ça et je vous tiens au courant des essais. J'ai pensé aux infobulles avec les span en les dirigeant sur une zone de la page en positionnant XY et Z-Index. C'est vraiment étrange, c'est simple pourtant et ça parait énormément compliqué à réaliser.

Je confirme que IE6 et IE7 ont du mal avec la fonction A:HOVER,
je suis obligé de les structurer avec un script JS récupéré sur alsacréations (csshover.htc).
Il y aura tj des problemes avec IE, c'est pas un navigateur, c'est une blague !