Cambiar imagen de fondo de una celda html

coco2287 · #1 (**permalink**) 22/11/2011, 12:36

Buenas, estube buscando tanto en el foro como en otras webs y aunque hay casos muy parecidos, no di con la solucion de este problema.

Estoy tratando de hacer que, al hacer click sobre un link, me cambie la imagen de fondo de una celda html.

les dejo el codigo que tengo a modo ejemplo de lo que pretendo hacer y espero me puedan dar una mano indicandome como debería hacerlo.

Código:

<!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=iso-8859-1" />
<title>Point - perfil</title>

<script type="text/javascript" language="javascript">

function cambiaImagen()
{
	document.getElementById("td1").style.backgroundImage = "Template/Marino/lat_div_2.jpg";
}
</script>
</head>


<body>
<table border="0" cellpadding="0">
  <tr>
    <td id="td1" width="90" height="102" background="Template/Marino/lat_div.jpg" >&nbsp;</td>
  </tr>
  <tr>
    <td height="53" align="center"><a href="" onClick="cambiaImagen();">Cambia Imagen</a></td>
  </tr>
</table>
</body>

</html>

Basicamente lo que intente fue declarar una funcion cambiaImagen() y dentro de esta cambiar la imagen de fondo de td1.

Agradezco desde ya cualquier ayuda que puedan darme, saludos!

pd: lo estoy probando con firefox y chrome

Franz1628 · #2 (**permalink**) 22/11/2011, 13:09

Esta linea document.getElementById("td1").style.backgroundIma ge = "Template/Marino/lat_div_2.jpg"; debes cambiarla por document.getElementById("td1").style.backgroundIma ge = "url('Template/Marino/lat_div_2.jpg')";

Y debes de poner como atributo href del enlace el "#"

El código algo así

Código HTML:

Ver original<!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=iso-8859-1" />
<title>Point - perfil</title>
 
<script type="text/javascript" language="javascript">
 
function cambiaImagen()
{
    document.getElementById("td1").style.backgroundImage = "url('Template/Marino/lat_div_2.jpg')";
}
</script>
</head>
 
 
<body>
<table border="0" cellpadding="0">
  <tr>
    <td id="td1" width="90" height="102" background="Template/Marino/lat_div.jpg" >&nbsp;</td>
  </tr>
  <tr>
    <td height="53" align="center"><a href="#" onClick="cambiaImagen();">Cambia Imagen</a></td>
  </tr>
</table>
</body>
 
</html>

Saludos

coco2287 · #3 (**permalink**) 22/11/2011, 17:56

que mala persona sos... lo hiciste parecer muy facil :(

jaja gracias funciono a la perfeccion :D