Effetto transizione su immagini

federosso

Nuovo Utente
7 Feb 2006
2
0
0
è 2 giorni che sono dietro ad uno script ma non riesco a venirne fuori..
Premetto che javascript non è il mio punto forte.

Il problema è sulle virgolette
Ho scaricato uno script che mi pemette di ruotare le immagini
il problema è nato quando ho deciso di far aprire una finestra ridimensionata sull'immagine cliccata

allego il file per farti meglio un'idea:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ristorante La Rambla</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #FFCC00;
}
-->
</style></head>
<body>
<script language="JavaScript1.2">

var slideshow_width='150px'
var slideshow_height='113px'
var pause=3000
//var slidebgcolor="#ffffff"
var slidebgcolor="#FFCC00"


var dropimages=new Array()
dropimages[0]="images/foto/small/staff_small.jpg"
dropimages[1]="images/foto/small/gruppo_small.jpg"
//dropimages[2]="test/03.gif"

var droplinks=new Array()
droplinks[0]="images/foto/big/staff_big.jpg"
droplinks[1]="images/foto/big/gruppo_big.jpg"
//droplinks[2]=""

var preloadedimages=new Array()
for (p=0;p<dropimages.length;p++)
{
preloadedimages[p]=new Image()
preloadedimages[p].src=dropimages[p]
}

var ie4=document.all
var dom=document.getElementById



if (ie4||dom)
document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div></div>')
else

// document.write('<a href="javascript:rotatelink()" onClick="javascript:popup()"><img name="defaultslide" src="'+dropimages[0]+'" border=0></a>')

document.write('<a href="javascript:rotatelink()"><img name="defaultslide" src="'+dropimages[0]+'" border=0></a>')

var curpos=parseInt(slideshow_width)*(-1)
var degree=10
var curcanvas="canvas0"
var curimageindex=linkindex=0
var nextimageindex=1


function movepic()
{
if (curpos<0)
{
curpos=Math.min(curpos+degree,0)
tempobj.style.left=curpos+"px"
}
else
{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
var slideimage='<img src="'+dropimages[curimageindex]+'" border=0>'


// ---------------------- CODICE INCRIMINATO!!!-----------------------------

// funziona in parte
// lo script sottostante funziona solo che mi sbaglia a ingrandire le immagini: ipotizzando di avere l'immagine staff_small.jpg cliccandoci sopra non mi apre
staff_big.jpg ma mi apre un altra foto gruppo_big.jpg
tempobj.innerHTML=(droplinks[curimageindex]!="")? '<a href="'+droplinks[curimageindex]+'" target="_blank" onClick="javascript:popup()">'+slideimage+'</a>' : slideimage


// ho provato a metterci le mani ma con scarsi risultati
// tempobj.innerHTML=(droplinks[curimageindex]!="")? '<a href="#" onClick="window.open("+droplinks[curimageindex]+",width="640", height="480");">'+slideimage+'</a>' : slideimage

//tempobj.innerHTML=(droplinks[curimageindex]!="")? '<a href="#" onClick='+"window.open('','','');"+'>'+slideimage+'</a>' : slideimage

// -------------------------------------------------------------------------





nextimageindex=(nextimageindex<dropimages.length-1)? nextimageindex+1 : 0
setTimeout("rotateimage()",pause)
}
}

function rotateimage()
{
if (ie4||dom)
{
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
var temp='setInterval("movepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=dropimages[curimageindex]
linkindex=curimageindex
curimageindex=(curimageindex<dropimages.length-1)? curimageindex+1 : 0
}

function rotatelink()
{
if (droplinks[linkindex]!="")
window.location=droplinks[linkindex]
}

function resetit(what)
{
curpos=parseInt(slideshow_width)*(-1)
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
crossobj.style.left=curpos+"px"
}


// funzione applicata all'avvio della pagina
function startit()
{
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='<a href="'+droplinks[curimageindex]+'" target="_blank"><img src="'+dropimages[curimageindex]+'" border=0></a>'
// crossobj.innerHTML='<a href="#" onClick="javascript:popup()"><img src="'+dropimages[curimageindex]+'" border=0></a>'
rotateimage()
}

function popup()
{
var w = 640;
var h = 480;
var l = Math.floor((screen.width-w)/2);
var t = Math.floor((screen.height-h)/2);
window.open(""+droplinks[curimageindex]+"","","width=" + w + ",height=" + h + ",top=" + t + ",left=" + l);
}


if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)



</script>

</body>
</html>


Ti ringrazio in anticipo..
Ciao Federosso
 

Discussioni simili