Un poco de Ayuda "Cambiar fondo de un <td> o <tabe>"

foxtrom · #1 (**permalink**) 10/06/2010, 09:20

Haber logre hacer que me cambiara el fondo de un <td> pero ahroa quiero darle un poco mas de diseño...
esto es lo que e hecho
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
</head>
<script language="javascript">
var fondos=new Array()
fondos[0]="fondo1";
fondos[1]="fondo2";
fondos[2]="fondo3";

cont=0
function presImagen() {
document.getElementById("foto").className=fondos[cont];
if (cont < fondos.length-1)
{cont ++}
else
{cont=0}
tiempo=window.setTimeout('presImagen()',3000)
//cada 3000 milisegundos (5 seg.) cambia la imagen.
}
</script>
<style type="text/css">
.fondo1 {
background-image: url(ima1.jpg); background-repeat: no-repeat;
}
.fondo2 {
background-image: url(ima2.jpg); background-repeat: no-repeat;
}
.fondo3 {
background-image: url(ima3.jpg); background-repeat: no-repeat;
}
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000" onLoad="presImagen()">
<table width="400" height="265" border="0" cellpadding="0" cellspacing="0">
<tr >
<td height="265" align="center" valign="top" class="fondo1" id="foto" >esta es imagen de fondo</td>
</tr>
</table>
</body>
</html>
pero lo que quiero es que cada vez que se cambia una imagen lo haga con un cambio gradual como esta hecho en este ejemplo pero es de un div.

http://www.cafebar2001.cl/efecto/
se podra?, haber si a alguien se le ocurre???, ya toy tirando la esponja...

foxtrom · #2 (**permalink**) 10/06/2010, 12:51

Hice un efecto parecido pero utilkizando el div, mas que a alguien le servira
verlo aka:
http://www.cafebar2001.cl/efecto/cambiaima.php

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
<style type="text/css">

</style>
</head>
<script language="javascript">

//Aquí cambia los nombres de las imágenes por las tuyas.
var imagenes=new Array()

imagenes[0]=new Image (400,265);
imagenes[0].src="ima1.jpg"
imagenes[1]=new Image (400,265);
imagenes[1].src="ima2.jpg"
imagenes[2]=new Image (400,265);
imagenes[2].src="ima3.jpg"

cont=0
function presImagen()
{
if (document.all){
document.getElementById('foto').filters.blendTrans .apply()
document.getElementById('foto').src=imagenes[cont].src
document.getElementById('foto').filters.blendTrans .play()
}
else
{
document.images.foto.src = imagenes[cont].src
}
if (cont < imagenes.length-1)
{cont ++}
else
{cont=0}
tiempo=window.setTimeout('presImagen()',3000)
//cada 5000 milisegundos (5 seg.) cambia la imagen.
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" topmargin="10" onload="presImagen()">
<img id="foto" src="ima1.jpg" style="filter:blendTrans(duration=3)">
<div id="menu">
<table width="380" border="0" cellpadding="0" cellspacing="5" class="borde">
<tr>
<td width="257" class="Estilo1"><span class="Estilo1">1111</span></td>
<td width="104" bgcolor="#FFFFFF" class="Estilo1"><span class="Estilo1">22222</span></td>
</tr>
<tr>
<td class="Estilo1">Texto :
<input name="textfield" type="text" class="Estilo1" size="6" maxlength="6" /></td>
<td class="Estilo1"><input type="checkbox" name="checkbox" value="checkbox" />
<input name="radiobutton" type="radio" value="radiobutton" /></td>
</tr>
<tr>
<td class="Estilo1">Texto :
<input name="textfield2" type="text" class="tras" size="6" maxlength="6" /></td>
<td class="Estilo1"> </td>
</tr>
<tr>
<td class="Estilo1"> </td>
<td class="Estilo1"> </td>
</tr>
</table>
<div>
</body>
</html>