RecorteX

descargar
<img class="ic" src="imagenes/imagen1.jpg" srcalt="imagen2.jpg;imagen3.jpg" alt="Pulsa sobre la imágen para cambiarla por otra" />

descargar
 
window.onload = f_init;
 
var isExplorer = (document.all ? true : false);
var hFade      = null;
var imgFade    = null;
var imgAlfa    = 10;
 
function f_init() {
	var nlImgs = document.getElementsByTagName("img");
	for(i=0; i<nlImgs.length; i++) {
		if(nlImgs[i].className=="ic") {
			var nSlash = 1 + nlImgs[i].src.lastIndexOf("/");
			var sURL   = nlImgs[i].src.substr(0, nSlash);
			nlImgs[i].onclick  = f_changeImg;
			nlImgs[i].step     = 0;
			nlImgs[i].cimg     = 0;
			nlImgs[i].srcalt   = nlImgs[i].getAttribute("srcalt").split(";");
			for(ii=0; ii<nlImgs[i].srcalt.length; ii++)
				nlImgs[i].srcalt[ii] = sURL + nlImgs[i].srcalt[ii];
			nlImgs[i].srcalt[ii] = nlImgs[i].src;
			if(isExplorer)
				nlImgs[i].runtimeStyle.filter = "progid:DXImageTransform.Microsoft.Alpha";
		}
	}
}
 
function f_changeImg() {
	window.clearInterval(hFade);
	if(this.className=="ic") imgFade = this;
	switch(imgFade.step) {
		case 0:
			imgFade.step = 1;
			f_startFadeOff();
			break;
		case 1:
			imgFade.step = 2;
			f_changeSrc();
			break;
		case 2:
			imgFade.step = 3;
			f_startFadeOn();
			break;
		case 3:
			imgFade.step = 0;
			imgFade.onclick = f_changeImg;
			break;
	}
}
 
function f_changeSrc() {
	imgFade.cimg++;
	if(imgFade.cimg == imgFade.srcalt.length) imgFade.cimg = 0;
	imgFade.src = imgFade.srcalt[imgFade.cimg];
	f_changeImg();
}
 
function f_startFadeOff() {
	imgFade.onclick = null;
	hFade   = window.setInterval(f_fadeOff, 100);
}
 
function f_fadeOff() {
	imgAlfa -= 1;
	imgFade.style.MozOpacity = (imgAlfa/10);
	if(isExplorer)
		imgFade.filters.item("DXImageTransform.Microsoft.Alpha").opacity = imgAlfa*10;
	if(imgAlfa==0) {
		f_changeImg();
	}
}
 
function f_startFadeOn() {
	imgFade.onclick = null;
	hFade   = window.setInterval(f_fadeOn,  100);
}
 
function f_fadeOn() {
	imgAlfa += 1;
	imgFade.style.MozOpacity = (imgAlfa/10);
	if(isExplorer)
		imgFade.filters.item("DXImageTransform.Microsoft.Alpha").opacity = imgAlfa*10;
	if(imgAlfa==10) {
		f_changeImg();
	}
}