Cambiar imágen de background con javascript

Citar

Escrito el 12 Dic 2006 04:55 pm

I need help... Tengo un html con un swf y una trama de fondo. ¿como puedo cambiar a través de javascript la url de la imágen de trama y visualizar el cambio? sin que se tenga que refrescar la página, claro..

Por Zguillez

BOFH

10743 de clabLevel

85 tutoriales
17 articulos
3 ejemplos

Genero:Masculino Bastard Operators From Hell Héroes Team Cristalab Editores

Envíale un mensaje privado Email Web

BCN

@zguillez

Citar

Escrito el 13 Dic 2006 02:26 am

Con getElementById, podes controlar el css para fondo. Ponagmoslo en una funcion, que reciba como parametro la url del nuevo fondo:

Código :

        function cambio(laurl){
        var objeto= document.getElementById("imagen-fondo");
        objeto.style.backgroundImage= "url("+laurl+");";
        }

El modo de llamado seria algo como

Código :

    <a href="#" onclick="cambio('fin.png')">Neeext!</a>

Como veras, el getElementById hace referencia a un objeto especifico, el cual tendra el id de "imagen-fondo". Puedes crear un div contenedor de tu swf, o aplicar el id a body.

Saludos!

Por Lunatic Lycanthrop

Claber

1200 de clabLevel

7 tutoriales

1 ejemplo

Envíale un mensaje privado

The dark places where wolves access internet with 46,6 kbps

Citar

Escrito el 26 Jun 2009 11:49 pm

estoy intentando eso de cambiar una imagen de background y he creado un ejemplo para simplificar con una tabla de una fila y dos columnas, en la izquierda un menu y en la columna derecha la imagen que quiero que cambie con el menu. Esto me serviría para cambiar de imagen sin refrescar página. Pero no me sale ¿me podeis ayudar?

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>Documento sin t&iacute;tulo</title>
<style>
#imagen{
background-image:url(files/fondos/fondo_autoriadvd.gif)

}
</style>
<script>
 function cambio(laurl){
        var objeto= document.getElementById("imagen");
        objeto.style.backgroundImage= "url("+laurl+");";
        }
</script>

</head>

<body>
<table width="522" height="274" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="49"><a href="#" onclick="cambio('files/fondos/fondo_autoriadvd.gif')">enlace</a><br>
<a href="#" onclick="cambio('files/fondos/fondo_clientes.gif')">enlace2</a><br>
enlace3<br>
enlace4<br>
enlace5</td>
    <td width="473"><div id="imagen">
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div></td>
  </tr>
</table>

<br>

</body>
</html>

¿porque no funciona? ¿que hago mal?

Por eriko

36 de clabLevel

Envíale un mensaje privado Email

Barcelona

Citar

Escrito el 26 Feb 2010 04:07 pm

Código Javascript :

function cambio(mi_imagen)
 {

        var objeto= document.getElementById('imagen');
        objeto.style.backgroundImage='url('+mi_imagen+')';
        }

Por miguelrojas

0 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 18 May 2012 09:08 pm

oye tengo un problema cuando pongo a correr ese codigo en google y en mozilla, pero en IE corre bien. tal vez no te funciona por el explorador

Por jossmy

0 de clabLevel

Envíale un mensaje privado

Cambiar imágen de background con javascript

Escribe una respuesta rapida