Ciao a tutti, il mio problema è questo:
Ho ricavato un slide in java dalla rete semplice e carino ed e questo:
Codice html di esempio:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" href='slideshow.css' type="text/css" />
<script type="text/javascript" src="xfade2.js"></script>
<title>Javascript HTML:it - Demo Slideshow con effetto fade</title>
</head>
<body>
<h1>Slideshow con effetto fade</h1>
<div id="slideshow">
[img]terra.jpg[/img]
[img]fuoco.jpg[/img]
[img]aria.jpg[/img]
[img]acqua.jpg[/img]
</div>
</body>
</html>


Che richiama altri 3 file:
xfade2.js
/*
Image Cross Fade Redux
Version 1.0
Last revision: 02.15.2006
steve@slayeroffice.com

Rewrite of old code found here: http://slayeroffice.com/code/imageCrossFade/index.html
*/

window.addEventListener?window.addEventListener('l oad',so_init,false):window.attachEvent('onload',so _init);

var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;

function so_init()
{
if(!d.getElementById || !d.createElement)return;

css = d.createElement('link');
css.setAttribute('href','slideshow2.css');
css.setAttribute('rel','stylesheet');
css.setAttribute('type','text/css');
d.getElementsByTagName('head')[0].appendChild(css);

imgs = d.getElementById('slideshow').getElementsByTagName ('img');
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = 'block';
imgs[0].xOpacity = .99;

setTimeout(so_xfade,3000);
}

function so_xfade()
{
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;

cOpacity-=.05;
nOpacity+=.05;

imgs[nIndex].style.display = 'block';
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;

setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);

if(cOpacity<=0)
{
imgs[current].style.display = 'none';
current = nIndex;
setTimeout(so_xfade,3000);
}
else
{
setTimeout(so_xfade,50);
}

function setOpacity(obj)
{
if(obj.xOpacity>.99)
{
obj.xOpacity = .99;
return;
}

obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
}
}

slideshow.css
#slideshow {
border: 0px solid #000;
overflow: hidden;
margin: 5px auto 5px;
position: relative;
width: 640px;
height: 129px;
}

#slideshow img {
width: 640px;
height: 129px;
}

slideshow2.css
#slideshow {cursor: pointer;}

#slideshow img {
display: none;
position: absolute;
top: 0;
left: 0;
}
Come faccio ad inserire nella stessa pagina più gruppi di immagini con questo effetto slide?
1° ho provato ad inserire nuovi link tramite lo stesso codice ID "ripetendolo solamente e cambiando ii collegamenti alle immagini" ma nulla non si vedono!
Ho provato ha duplicare l' intero script cercando di rinominare i vari richiami dei file nel codice, cosi facendo ho ottenuto un effetto slide diverso in quanto le immagini si aprivano e chiudevano su posizioni diverse.
Potete aiutarmi nel generare il codice giusto per inserire più slide nella stessa pagina che richiamano immagini diverse?

Ciao

Mario