Cambiar fondo con efecto fade

the_web_saint · #1 (**permalink**) 30/01/2009, 14:54

Hola compañeros, he buscado sobre el tema pero lo que encuentro es de imágenes en sí y lo que deseo es cambiar el fondo de un contenedor.

Digamos así, tengo unas imágenes que serán links, y una imagen principal dentro del contenedor que mencione. Cuando se presione sobre los links, el fondo del contenedor debe cambiar por esa imagen, pero con un efecto mas vistoso, por ejemplo el fade.

Lo que tengo hasta ahora a modo de prueba es:

Código HTML:

<!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=utf-8" />
<title>Cambio de Imagenes</title>
<style>
#cont_imagen{
background-image:url(images/verde.gif);
background-repeat:repeat;
}
</style>
<script>
function cambio(color){
document.getElementById('cont_imagen').style.background='url(images/'+color+')';
}
</script>
</head>

<body>
<table>
<tr>
<td>
<div id="cont_imagen">
<img src="images/images.gif" border="0" />
</div>
</td>
</tr>
</table>
<table>
<tr>
<td><a onclick="cambio('verde.gif')"><img src="images/verde.gif" border="0" /></a></td>
<td><a onclick="cambio('azul.gif')"><img src="images/azul.gif" border="0" /></a></td>
<td><a onclick="cambio('naranja.gif')"><img src="images/naranja.gif" border="0" /></a></td>
<td><a onclick="cambio('rojo.gif')"><img src="images/rojo.gif" border="0" /></a></td>
</tr>
</table>
</body>
</html>

La cambia pero no se como aplicarle un efecto vistoso.

Saludos y ojala me puedan ayudar con esto.

sweetlydark · #2 (**permalink**) 30/01/2009, 15:44

Puedes mirar esta pagina:

http://remsr.com/articulos/fade_noob.php

tiene un buen tutoria sobre como hacer un fade.

the_web_saint · #3 (**permalink**) 31/01/2009, 08:27

Muchas Gracias, veré como lo modifico para que me funcione.

Saludos