Problema con cambio de background segun resolución

erponcios · #1 (**permalink**) 08/02/2007, 20:29

Buenas Gente:

Lo que quiero hacer es que el código javascript, me detecte la resolución del cliente y dependiendo la resolución que tenga, me cambie la imagen de fondo de la web.

Yo tengo este código:

Código HTML:

<script language="JavaScript"> 
 if (screen.width + "x" +screen.height == "640x480") document.body.background="fondo6.jpg";
 if (screen.width + "x" +screen.height == "800x600") document.body.background="fondo8.jpg";
 if (screen.width + "x" +screen.height == "1024x768") document.body.background="fondo10.jpg";
 if (screen.width + "x" +screen.height == "1280x1024") document.body.background="fondo12.jpg";
 if (screen.width + "x" +screen.height == "1600x1200") document.body.background="fondo16.jpg";
</script>

El Código me detecta bien la resolución, lo que falla es el tema del document.body.background, es como si estuviera mal la sintaxis.

Si alguien pudiera ayudarme se lo agradecería mucho, gracias.

Un saludo.

caricatos · #2 (**permalink**) 09/02/2007, 01:15

Hola:

La sintaxis parece estar bien, pero es aconsejable usar estilos en vez de atributos...

if (screen.width == "640") document.body.backgroundImage = "url(fondo6.jpg)";

Además, nunca he visto que una pantalla de 640 de ancho no tenga 480 de alto (y en concreto esa resolución me suena a obsoleta)..

Saludos

erponcios · #3 (**permalink**) 09/02/2007, 04:45

Muchas gracias caricatos, tengo puesto esto:

Código HTML:

<script language="JavaScript"> 

	if (screen.width + "x" +screen.height == "800x600") document.body.backgroundImage = "url(fondo8.jpg)";
	if (screen.width + "x" +screen.height == "1024x768") document.body.backgroundImage = "url(fondo10.jpg)";
	if (screen.width + "x" +screen.height == "1280x1024") document.body.backgroundImage = "url(fondo12.jpg)";
	if (screen.width + "x" +screen.height == "1600x1200") document.body.backgroundImage = "url(fondo16.jpg)";
 
</script>

El problema es que no me pone ningun background, aquí puedes ver el ejemplo:

http://www.informagestudios.com/web.html

¿seguro que es document.body.backgroundImage? es que he visto que document.body.background también existe y document.getElementById('bodys').style.backgroundI mage también, lo que pasa es que no se si al body se le puede dar un id.

Un saludo y muchas gracias.

JavierB · #4 (**permalink**) 09/02/2007, 05:22

hola erponcios

Código:

document.body.style.backgroundImage = "url(fondo8.jpg)";

Saludos,

erponcios · #5 (**permalink**) 09/02/2007, 05:59

nada, tengo esto

<script language="JavaScript">

if (screen.width + "x" +screen.height == "800x600") document.body.style.backgroundImage = "url(fondo8.jpg)";
if (screen.width + "x" +screen.height == "1024x768") document.body.style.backgroundImage = "url(fondo10.jpg)";
if (screen.width + "x" +screen.height == "1280x1024") document.body.style.backgroundImage = "url(fondo12.jpg)";
if (screen.width + "x" +screen.height == "1600x1200") document.body.style.backgroundImage = "url(fondo16.jpg)";

</script>

y no funciona, podeís verlo aqui:

www.informagestudios.com/web.html.

Las imágenes estan en el mismo directorio que el html...

erponcios · #6 (**permalink**) 09/02/2007, 09:52

puede ser también que sea porque lo añado en los <head>? e iría despues del <body>

Un saludo.

Shade · #7 (**permalink**) 09/02/2007, 09:57

Código:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
2<HTML><HEAD>
3<TITLE>404 Not Found</TITLE>
4</HEAD><BODY>
5<H1>Not Found</H1>
6The requested URL /js/imagenes.js was not found on this server.<P>
7<P>Additionally, a 404 Not Found
8error was encountered while trying to use an ErrorDocument to handle the request.
9</BODY></HTML>

Código:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
2<HTML><HEAD>
3<TITLE>404 Not Found</TITLE>
4</HEAD><BODY>
5<H1>Not Found</H1>
6The requested URL /js/javascript.js was not found on this server.<P>
7<P>Additionally, a 404 Not Found
8error was encountered while trying to use an ErrorDocument to handle the request.
9</BODY></HTML>

quizas sea eso

Dalvenjha · #8 (**permalink**) 11/03/2008, 15:24

Te pongo una solución que halle, para el mismo problema, asi puedes usarla para más resoluciones.

Código:

function resolucion() {


if ((screen.height !== 768) && (screen.width !== 1024))
{
if ((screen.height >= 1024) && (screen.width >= 1280))
{document.body.style.backgroundImage = 'url(imagenes/fondo6.jpg)';}

}
}

<body onload="resolucion();">

nhack · #9 (**permalink**) 28/01/2011, 09:37

Solicionado y probado!

<script language="JavaScript">
if (screen.width == 1024)
{
document.body.style.backgroundImage='url(Backgroun d-1024x768.jpg)';
}
if (screen.width == 1280)
{
document.body.style.backgroundImage='url(Backgroun d-1280x1024.jpg)';
}
</script>

Saludos desde Nicaragua!