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.
