Ciao ragazzi, sto creando una slide show personalizzata. Di seguito vi posto il codice che funziona parzialmente in ie mentre in ff e opera non da alcun problema!
SWITCH.JS
codice:
nimg = 3;
lndom=34;
function showimg(img){
dimimg=new Image();
dimimg.src=img;
dimimg.onload=function(){
ww=dimimg.width;
hh=dimimg.height;
document.getElementById('SLIDE').src=img;
document.getElementById('SLIDESHOW').style.width=ww;
document.getElementById('SLIDESHOW').style.height=hh;
document.getElementById('SLIDESHOW').style.marginLeft=-(ww/2);
if(document.getElementById('SLIDESHOW').style.display=='')
document.getElementById('SLIDESHOW').style.display = 'inline';
}
}
function shownextimg(){
path=document.getElementById('SLIDE').src;
img=parseFloat(path.substring(lndom, lndom+1));
if(img < nimg) img+=1;
else img=1;
showimg('./images/'+img+'.jpg');
}
SlideShow.html
codice:
<html>
<head>
<title>Slide Show</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="./switch.js"></script>
</head>
<body>
<div id="SLIDESHOW">
<img id="SLIDE" onclick="shownextimg();">
</div>
<div id="TB" align="center">
[img]./tb/1.png[/img]
[img]./tb/2.png[/img]
[img]./tb/3.png[/img]
</div>
</body>
</html>
E la parte del css che interessa
codice:
#SLIDESHOW{
position: absolute;
left: 50%;
display: none;
}
#TB{
position: absolute;
bottom: 0px;
width: 350px;
height: 90px;
left: 50%;
margin-left: -170px;
border: solid 1px;
overflow: hidden;
}
Con ie all'esecuzione della funzione shownextimg tutto corretto fintanto che img non diventa uguale a nimg. A questo punto img viene sostituito correttamento con il valore 1 (prima immagine) ma alla chiamata della funzione showimg si ferma dopo la seconda istruzione.
Qualcuno sa dirmi perchè?