// SCRIPT PER GENERARE UN FADE CON JAVASCIPT
// TUTTE LE VARIABILI COMMENTATE INIZIALMENTE SONO I SETTAGGI E DEVONO ESSERE INSERITI
// IN UNO SCRIPT JAVASCRIPT CHE PRECEDA NELLA PAGINA L'INCLUSIONE DI QUESTO FADE
// E' UNO SCRIPT MOLTO SEMPLICE, CHI VUOLE MIGLIORARE SI ACCOMODI. CIAO, ALDO

// LARGHEZZA E ALTEZZA DELLE IMMAGINI
// var width=552;
// var height=245;

// INDIRIZZO DI TUTTE LE IMMAGINI, OVVIAMENTE E' POSSIBILE INSERIRNE A PIACIMENTO
// ED OVVIAMENTE E' POSSIBILE COSTRUIRE L'ARRAY CON UN CICLO SE I NOMI DELLE IMMAGINI LO PERMETTONO
// var pix=new Array();
// pix[0] = new Image();
// pix[0].src = '/images/one.jpg';
// pix[1] = new Image();
// pix[1].src = '/images/one2.jpg';
// pix[2] = new Image();
// pix[2].src = '/images/one3.jpg';

// DISTANZA IN MILLISECONDI TRA UN FADE E L'ALTRO
// var velocita_transizione = 5000;

// DURATA IN MILLISECONDI DELLA TRANSIZIONE
// var velocita_fade = 2000;

var arr_len = pix.length;
var id_immagine_dafarsparire;
var id_immagine_damostrare;
var id_prossima_immagine;
var p;
var nome_id;

function visibilia(id_immagine_dafarsparire,id_immagine_damostrare)
{
	// L'IMMAGINE DA MOSTRARE VIENE DAVANTI
	nome_id = "blendimage" + id_immagine_damostrare;
	document.getElementById(nome_id).style.zIndex = 2;
	
	
	//L'IMMAGINE DA FAR SPARIRE VA DIETRO A TUTTE
	nome_id = "blendimage" + id_immagine_dafarsparire;
	document.getElementById(nome_id).style.opacity = 100;
	document.getElementById(nome_id).style.MozOpacity = 100;
	document.getElementById(nome_id).style.KhtmlOpacity = 100;
	document.getElementById(nome_id).style.filter = "alpha(opacity=100)";
	document.getElementById(nome_id).style.zIndex = 0;	
	
	// LA PROSSIMA IMMAGINE VA DIETRO LA PRIMA
	id_prossima_immagine = (id_immagine_damostrare+1);
	if(id_prossima_immagine>(arr_len-1)) id_prossima_immagine = 0;
	nome_id = "blendimage" + id_prossima_immagine;
	document.getElementById(nome_id).style.zIndex = 1;
	
	// LE ALTRE VANNO DIETRO CON LO STESSO ZINDEX 0
	for(i = 1; i<arr_len; i++)
	{
		if(i!=id_prossima_immagine && i!=id_immagine_damostrare)
		{
			nome_id = "blendimage" + i;
			document.getElementById(nome_id).style.zIndex = 0;
		}
	}
}
function opacity(id_immagine_dafarsparire, opacStart, opacEnd, millisec, id_immagine_damostrare) 
{
    // VELOCITA' DI OGNI FRAME 
    var speed = Math.round(millisec / 100);
    var timer = 0;
    nome_id = "blendimage" + id_immagine_dafarsparire;


    //DETERMINIAMO LA DIREZIONE DEL FADE, SE PARTIRE 
    if(opacStart > opacEnd) 
    {
        for(i = opacStart; i >= opacEnd; i--) 
        {
            setTimeout("changeOpac(" + i + ",'" + nome_id + "')",(timer * speed));
            timer++;
        }
    } 
    else if(opacStart < opacEnd) 
    {
        for(i = opacStart; i <= opacEnd; i++)
        {
            setTimeout("changeOpac(" + i + ",'" + nome_id + "')",(timer * speed));
            timer++;
        }
    }
    setTimeout("visibilia(id_immagine_dafarsparire,id_immagine_damostrare)",millisec)
} 

//change the opacity for different browsers
function changeOpac(opacity, id) 
{
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
} 



function blendimage(divid, p) 
{


    id_immagine_dafarsparire = p;
    p++;
    if(p>(arr_len-1)) p=0;
   	id_immagine_damostrare=p;

    //RENDIAMO TRASPARENTE L'IMMAGINE CHE DEVE ESSERE CAMBIATA
    opacity(id_immagine_dafarsparire,100,0,velocita_fade,id_immagine_damostrare);  
    
    setTimeout("blendimage('blenddiv',"+p+")",velocita_transizione);

}
setTimeout("blendimage('blenddiv',0)",velocita_transizione);

<!--document.write('<div class="art-article" style="position: relative; top: 0px; left: 0px; width: '+width+'px; height: '+height+'px" id="blenddiv">');-->

document.write('<div class="art-article" style="width: '+width+'px; height: '+height+'px">');
for(i=0; i<pix.length; i++)
{
	if(i==0) document.write('<img src="'+pix[i].src+'" style="position: absolute; top: 15px; left: 10px; width: '+width+'px; height: '+height+'px; filter: alpha(opacity=100); -moz-opacity: 100; opacity: 100; z-index:'+((arr_len-1)-i)+'" id="blendimage'+i+'" alt="" />');
	else document.write('<img src="'+pix[i].src+'" style="position: absolute; top: 15px; left: 10px; width: '+width+'px; height: '+height+'px; filter: alpha(opacity=100); -moz-opacity: 100; opacity: 100; z-index:'+((arr_len-1)-i)+'" id="blendimage'+i+'" alt="" />');
}
document.write('</div>');