Come fare una lista di cose collegate a immagini? HTML

[valfus]

Salve a tutti... sto provando a creare un sito internet, ma non conosco assolutamente nulla di html.
Per fare questo sito mi sto aiutando con Kompozer che sembra essere un buon programma per costruire pagine....
Dovrei fare una cosa un pò particolare su una pagina html, vi spiego:
Allora ho bisogno che ci sia una lista a cascata con i nomi di alcuni prodotti.
e fino qui sono riuscito a fare questa lista con kompozer.
Ora la cosa che dovrei fare è: passando la freccia del mouse sul nome di un prodotto si visualizzi una immagine dello stesso e così per tutti gli altri della lista....

Si può fare? grazie in anticipo per le risposte...

[Tuvok-LuR-]

la soluzione piu semplice, senza neanche usare javascript, è usare lo stato :hover del css
supponendo che il tuo markup sia

<ul>
<li>Gattino 1<img src="http://placekitten.com/200/200" /></li>
<li>Gattino 2<img src="http://placekitten.com/201/201" /></li>
<li>Gattino 3<img src="http://placekitten.com/202/202" /></li>
<li>Gattino 4<img src="http://placekitten.com/203/203" /></li>
</ul>

basta nascondere l'immagine di defualt con i CSS e farla vedere al passaggio del mouse

li img {
display: none;
}
li:hover img {
display: block;
}


esempio: http://jsfiddle.net/mZP2P/
animato: http://jsfiddle.net/mZP2P/2/