cambiar fondo celda segun la URL del navegador

welko · #1 (**permalink**) 10/04/2009, 05:24

Buenas, me explico:

Estoy haciendo una web de videojuegos y para cada plataforma quiero que la imagen de fondo de un submenu que tengo cambie, este es el codigo que he hecho y que no me funciona:

En <head></head>:

Código:

<script>
url=document.location;
if (url=="http://www.mipagina.com/index.php?site=x")
{
	document.getElementById('submenu').style.backgroundImage ='url(images/imagen2.jpg)';
}
</script>

Cita:

Url: recoge la URL del navegador y la guarda como texto.
submenu: es la ID que tiene la celda

Panino5001 · #2 (**permalink**) 10/04/2009, 05:28

Intentá con document.URL en lugar de document.location.

welko · #3 (**permalink**) 10/04/2009, 06:00

No si coger la url si la coge bien porque e probado a poner un alert para ver si lo hacia bien y si salia el alert creo que el problema esta en document.getElementById.... pero no se donde :(

Panino5001 · #4 (**permalink**) 10/04/2009, 06:11

Puede ser. Habría que ver entonces si el elemento tiene asignado el atributo id correctamente, si es único en la página, si no hay una variable javascript con el mismo nombre (eso trae problemas en Explorer) y si la ruta de la imagen es correcta.

welko · #5 (**permalink**) 10/04/2009, 06:56

Tengo definido asi

<td id="submenusss" .......>

Y al entrar en la pagina con ie8 me sale este mensaje como si no estuviera definido bien :S :

Mensaje: Se requiere un objeto
Línea: 16
Carácter: 2
Código: 0
URI: http://www.newgenerationgamers.net/index.php

Panino5001 · #6 (**permalink**) 10/04/2009, 07:11

Bueno, si el id es submenusss, el document.getElementById() debería contener esa cadena (entrecomillada) en lugar de la cadena submenu.
También hay que asegurarse de que el llamado se haga durante el evento onload de la página o cuando el elemento esté disponible.
Por ejemplo, esto funciona:

Código PHP:

  <!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>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td bgcolor="#990066" id="c">&nbsp;</td>
  </tr>
</table>
<script>
document.getElementById('c').style.width=document.getElementById('c').style.height='300px';
document.getElementById('c').style.backgroundImage='url(img/1.jpg)';
</script>
</body>
</html>

en cambio, esto no funciona:

Código PHP:

  <!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>
</head>

<body>
<script>
document.getElementById('c').style.width=document.getElementById('c').style.height='300px';
document.getElementById('c').style.backgroundImage='url(img/1.jpg)';
</script>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td bgcolor="#990066" id="c">&nbsp;</td>
  </tr>
</table>

</body>
</html>

La razón es que en este segundo caso estamos intentando acceder a un elemento que aún no aparece en el documento (el navegador evalúa desde arriba hacia abajo)

welko · #7 (**permalink**) 10/04/2009, 07:35

Muchas gracias Panino5001, entonces el error estaba en que estaba cogiendo una ID que todavia no existia al ejecutar el codigo ¿no?

Panino5001 · #8 (**permalink**) 10/04/2009, 07:54

Eso o que estaba mal definido el id. Habría que ver el código completo para saber qué sucede. Si seguís con el mismo problema, facilitaría el análisis ver la página subida a algún lado.

welko · #9 (**permalink**) 10/04/2009, 08:25

Creo que era la primera cosa, mira el efecto mas o menos terminado creo que queda bastante logrado:

3w.newgenerationgamers.net/
3w.newgenerationgamers.net/index.php?site=news&show=xbox360
3w.newgenerationgamers.net/index.php?site=news&show=pc
3w.newgenerationgamers.net/index.php?site=news&show=ps3

te vuelvo a dar las gracias y decir que ya esta solucionado asique se puede cerrar tema o lo que sea.

Panino5001 · #10 (**permalink**) 10/04/2009, 08:58

Perfecto, me alegra que te haya servido