Ciao a tutti, vorrei preparare una pagina per visualizzare delle immagini in miniatura che al passaggio del mouse mostrino l' immagine ingrandita inizialmente nascosta.
Le immagini ridotte sono una di fianco all' altra e al passaggio del mouse l' ingrandimento dell' immagine risulta "bucato" dall' immagine ridotta posizionata di fianco alla sua originaria.
Avrei bisogno di un suggerimento riguardo le impostazioni (suppongo dell' attributo z-index).
Qui sotto ho riportato il codice del foglio css e di seguito ciò che ho riportato nel codice dove risiedono le pagine. GRAZIE IN ANTICIPO
1)Contenitore foto in miniatura
#content {
position:relative;
top:0px;
left:0px;
width:75px;
height:54px;
background-color:transparent;
z-index:100;
}
#content a img {
border:0;
}
2) Classe tumb (immagine in miniatura)
#content a.tumb, #content a.tumb:visited {
display:block;
width:75px;
height:54px;
text-decoration:none;
background-color:#DFDFDF;
}
3)Situazione degli stati ingrandito e rimpicciolito
#content a.tumb:hover, #content a.tumb:active{
text-decoration:none;
background-color:transparent;
}
4)Immagine grande
#content a .grande {
display:block;
position:absolute;
width:1px;
height:1px;
top:-1px;
left:-1px;
color:#DFDFDF;
background-color:transparent;
}
5)Posizione immagine grande
#content a.tumb:hover .grande {
display:block;
position:absolute;
top:0px;
left:100px;
width:401px;
height:289px;
}
Nella pagina dove risiedono le foto :
<td><div id="content"> <a class="tumb" href="# self" title="Immagine in miniatura">
<p align="center">[img]<%=(rs_luoghi.Fields.Item([/img]" alt="Click per ingrandire" name="piccola" id="piccola"></p>
[img]<%=(rs_luoghi.Fields.Item([/img]" alt="Click fuori dall' immagine per rimpicciolire" name="grande" width="42" class="grande" id="grande"></div></td>
Rispondi quotando
