Rollover sur des vignettes qui font apparaitre d'autres images

Bonjour à tous,

Gros problème auquel je ne trouve pas de réponse !!!

Je suis novice en html et css et pourtant je voudrais réaliser ceci:
1 -je voudrais réaliser un carré de 90px par 90 px ou il y aurait 9 vignettes(images en noir) de 30px par 30px.

2-je voudrais qu'en passant dessus avec la souris (survol et pas clic) que chaque vignette appelle l' image (correspondant à la vignette) en couleur cette fois-ci et qui recouvre la zone de 90px par 90px.
cette image sera positionnée toujours en haut et à gauche de cette zone.

Pas de javascript

Merci de vous pencher sur mon cas

Hello,

Pourquoi pas de JavaScript ?

Pour faire simple, pour changer la couleur d'un image HTML au :hover sans JS tu peux le faire en CSS3 avec un filter grayscale, mais c'est supporté par très peu de navigateurs. Sinon tu peux aussi tenter les filtres SVG dont le support est meilleur.
Sans CSS3 et SVG la seule solution est de mettre l'image noir et blanc en background CSS, puis au survol (:hover) changer pour l'image en couleur. Ça t'oblige par contre à créer les images en deux fois, avoir les images dans le CSS au lieu du HTML c'est pas non plus une super idée d'un point de vue sémantique / accessibilité (sauf si tu mets un texte descriptif à la place de l'image que tu vas cacher).
Sinon si tu te décides à utiliser du JS (enfin là pour le coup du jQuery) tu as un joli tutoriel sur webdesignerwall

Bonne chance

Bonjour,
Je pense que le mieux serait de la faire en javascript mais pourquoi se priver de ce langage bien utile?

Sinon autres questions :

1) une fois l'image affiché , comment passes tu à la suivante sans ressortir la souris de la zone ?

2) comment arrives tu a atteindre l'image au centre de ton carré sans survoler les autres ?

Cdt,
GC