ciao e benvenuto sul forum!
le immagini che vedi sono di 2 tipi: una piccola ed una ingrandita. sostanzialmente devi:
1. creare un contenitore ed assegnarli delle dimensioni.
2. assegnare al contenitore 'position: relative'
3. creare la seguente struttura XHTML:
codice:
<ul>[*]<a href="#">[img]fotopiccola.jpg[/img]<span class="ingrandisci">
[img]fotogrande.jpg[/img]</span></a>
eccetera[/list]
E il seguente CSS:
codice:
a span.ingrandisci {display: none;}
a:hover span.ingrandisci {
display: block;
position: absolute;
top: xx;
left: xx;
width: xx;
height: xx;
margin: 0;
}
Per IE6 devi aggiungere in head il seguente codice dopo il css principale:
codice:
<!--[if lt IE 7]>
<style type="text/css">
a:hover {background-position: 0 0}
</style>
<![endif]-->
posiziona l'immagine all'interno dello span.ingrandisci tramite le proprietà top e left. in questo caso ho sceelto come contenitore ul. deve avere delle dimensioni adeguate alle immagini. ciao
