rollover css su div differenti

[upupax]

Ciao a tutti, mi chiedevo se fosse possibile creare un menu che ad ogni voce visualizzasse un immagine diversa in un div accanto.
So che la cosa si potrebbe fare con java, ma non essendo io tanto ferrato sull'argomento stavo cercando di realizzarlo tramite la funzione :hover di CSS.
Avevo pensato di associare a tale funzione un ridimensionamento del div del menu, ma chiaramente questo fa sballare completamente gli altri link del menu: qualcuno ha suggerimenti su come possa fare? Devo per forza usare java?
Grazie a tutti.

[Mich_]

Java non e` sicuramente una soluzione: ti obbligherebbe a ricaricare la pagina ad ogni movimento del mouse.

Eventualmente si potrebbe farlo con JS, ma e` meglio pensare ad una soluzione con i CSS.

Dovresti pero` spiegarti meglio. In particolare devi dire:
- il menu e` di titpo verticale o orizz?
- le varie immagini sono tutte grandi uguali?
- le immagini devono essere posizionate tutte nello stesso posto?
uno schemino potrebbe essere utile, per indirizzare chi volesse aiutarti.

Comunque da' un'occhiata ai vari menu delle raccolte: ne trovi molti in giro per la rete, e alcuni sono citati tra i "link utili"

[upupax]

beh innanzitutto grazie per avermi confermato che si possa fare solo con i CSS, mi hai tolto una preoccupazione!

quello che vorrei fare io sarebbe un blocco superiore nel quale non venga visualizzata un'immagine di default e a lato di tale immagine posizionare un menu verticale della stessa altezza con 4/5 link.
Al passaggio del mouse sulle voci del menu l'immagine all'interno del blocco superiore dovrebbe cambiare automaticamente.
Seguendo il tuo consiglio ho trovato il sito www.cssplay.co.uk che ha davvero tante soluzioni! Diciamo che per ora quella che ho trovato che più si avvicina alla mia idea è questo

http://www.cssplay.co.uk/menus/enlarge.html

ma chiaramente lo vorrei fatto nel modo che dico io!
per ora sto provando a vedere cosa riesco a fare partendo da questo, ma se qualcuno ha altri suggerimenti da darmi, ben vengano!!

[Mich_]

Quella e` una buona partenza.

Quello che a te serve di diverso e`:
i vari[*] stanno uno sotto l'altro (default), quindi vanno tolti i posizinamenti o i float ad essi.
Non ti serve dare id a ciascuno, ma ti basta un id generale.
Le varie imamgini saranno posizionate (position: absolute) tutte nello stesso posto

Quindi la struttura e` la seguente:

<ul id="pippo">[*]testo del link[img]...[/img]
 ...[/list]

CSS:
#pippo a {
  ...
}
#pippo a img {
  display: none;
}
#pippo a:hover img {
  display: block;
  position: absolute;   /* oppure relative - vedi link sotto */
  top: ...;
  left: ...;
}

Per poter usare i posizionamenti, ti consiglio di leggere almeno:
Posizionamenti assoluti: I posizionamenti assoluti
Posizionamenti relativi: Capire i posizionamenti relativi

[upupax]

grande! ero convinto che il posizionamento absolute in ogni caso mi sballasse l'allineamento degli altri[*] e invece funziona tutto perfettamente! grazie!