Weblogs Código

RecorteX

73 usuarios y 243 recortes de código
Usuario

Contraseña
Crear cuenta
asp csharp css fechas Flash html imagenes java javascript linux mysql oracle php sql SQLServer url vbnet web xhtml xml
Top Usuarios
fjmp76 (42)
albin (31)
josuebasurto (31)
juanjo (30)
pedrocaro (9)
stanz (8)
AndiXTRM (7)
Joserra (7)
miiglesi (6)
aplyca (5)
Top Etiquetas
php (38)
vbnet (28)
javascript (26)
html (25)
csharp (25)
java (24)
sql (18)
mysql (13)
xml (13)
css (10)
Flash (7)
imagenes (7)
xhtml (7)
linux (6)
fechas (6)
asp (6)
SQLServer (5)
oracle (5)
url (5)
web (5)

Cambia una imagen por otra haciendo un fundido al fondo

Cambia una imagen por otra haciendo un fundido al fondo. Funciona con múltiples imágenes, al llegar a la última regresa a la primera.

<img class="ic" src="imagenes/imagen1.jpg" srcalt="imagen2.jpg;imagen3.jpg" alt="Pulsa sobre la imágen para cambiarla por otra" />
 
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();
	}
}
 
Comentario de juanjo:
¡Funciona muy bien!

Una mejora es ponerle el texto de explicación "Pulsa sobre la imágen para cambiarla por otra" en un atributo title, en lugar de alt. De esa manera, también aparece en Firefox.
Comentario de albin:
Suelo usar "title" en los anchor, pero no lo pensé aquí.

No está mal, funciona en FF y IE 6 (otros no probados).

Hacerlo ha sido un puntazo de esta mañana.
Identifícate para dejar un comentario.
Proyecto: Juanjo Navarro, 2006 - Diseño: Albin