Ho questo bello script che ho trovato qui su html.it e che permette di aprire dalle thumbnails delle immagini nella stessa pagina. Il mio problema è che le immagini grandi hanno dimensioni diverse tra loro. Firefox riesce a mantenere le proporsioni ridimensionando la foto mentre explorer se ne frega e le allunga distorcendole. Eppure il css imposta "auto" per l'altezza di <zoom img... ! C'è il modo di far funzionare le proporsioni larghezza-altezza anche su explorer ??
Vi prego aiutatemi
HTML:
<ul>Florence
[*][img]005/005_1_pre.jpg[/img]
[*][img]005/005_2_pre.jpg[/img][/list]
JAVA:
window.onload=function(){
if(!document.getElementById || !document.getElementsByTagName) return;
links=document.getElementById("minipics").getEleme ntsByTagName("a");
for(i=0;i<links.length;i++)
links[i].onclick=function(){Show(this);return(false)}
}
function Show(obj){
bigimg=document.getElementById("bigimage");
bigimg.src=obj.getAttribute("href");
smallimg=obj.getElementsByTagName("img")[0];
t=document.getElementById("titolo");
t.removeChild(t.lastChild);
t.appendChild(document.createTextNode(smallimg.tit le));
}
CSS:
div#zoom{
padding: 5px 0 0 0;
width:440px;
margin: 0;
top: 0px;
float: right;
}
div#zoom img{
width:440px;
height: auto;
margin: 0px;
}
div#minipics{
float: left;
margin: 0;
padding: 0;
width: 170px;
}
div#minipics ul{
list-style-type: none;
margin: 3px;
padding: 2px 3px;
background-color: #FAB9BB;
width: 168px;
border: solid red 1px;
font-size: 0.8em;
float: left;
text-align: left;
clear: left;
}
div#minipics li {
margin: 2px 2px 2px 2px;
float: left;
}
div#minipics img {
border: 0;
}
#boxdesc {
width: 420px;
background-color:#C2A3A1;
height:100px;
float:right;
margin:0;
padding: 10px;
}
Rispondi quotando