Cambiar Fondo segun Resolucion

BeethIsaRoGa · #1 (**permalink**) 08/07/2010, 07:24

Primero, quiero aclarar que yo no se HTML ni CSS ni nada, por eso decidi hacer un tema nuevo, por que el los que se relacionan ponen solo la parte del codigo en el que tienen problemas y no se donde va y me disculpo por eso, pero quiero aprender y me las he arreglado para hacer [URL="http://sourcecodeengine.zobyhost.com/Inuyasha/Index.html"]esto[/URL] (no pongo el codigo por que lo pueden ver con cualquier navegador), repito sin saber HTML ni CSS, lo que quiero es que segun la resolucion del usuario aplique un fondo, para 1024X768 se llama GInuyasha1.jpg y para 800X600 GInuyasha2.jpg, por favor tomen en cuetna que no se HTML ni CSS, y les pido me expliquen como solucionarlo de la manera mas simple, abran la pagina solo con Opera por que en Internet Explorer sale un cuadro blanco, quisiera quitarlo tambien, gracias de antemano

Bolsomaniaco · #2 (**permalink**) 08/07/2010, 09:11

Hola, entra a http://sourcecodeengine.zobyhost.com/Inuyasha/images/ y te darás cuenta que ahi esta el fondo que mostras de la pagina. (GInuyasha.jpg).
En esa carpeta deberias colocar las dos imagenes que tu queres GInuyasha1.jpg y GInuyasha2.jpg.
Ya que decis que no tenes mucho conocimiento html/css, lo que podes hacer es copiar dos veces la pagina que tenes ahora (hablo del contenido para que sean iguales).

Una la usarias para los usuario que necesiten 1024x768 Ej (Index1) y otra para los que usen 800x600 (Index) con su fondos respectivos.
En cada una de ellas buca donde dice:

body
{
background-color: #FFFFFF;
background-image: url(images/GInuyasha.jpg);
color: #000000;
overflow-y: scroll;
}

y cambias GInuyasha.jpg por GInuyasha1.jpg o GInuyasha2.jpg.

Por defecto yo dejaria la de 800x600 (Index) y le haría un link que diga cambia a resolucióin 1024x768y le pones la dirección de la otra web (Index1).

Lo de el espacio en blanco, deberias borrar:

</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>

que esta debajo (para que te des cuenta) de:

<br clear=all id=lgpd>
<div id=lga>
<div style="padding:28px 0 3px">
</div> (no lo borres)
</div> (no lo borres)

Saludos!

Nemutagk · #3 (**permalink**) 08/07/2010, 09:36

Tener mas de una página solo por cambiar el fondo o_O no se me hace viable...

Lo que quieres hacer es sencillo con javascript....

Código Javascript:

Ver originalfunction changeBackground() {
var fondos = {
'800'=>'imagen800.jpg',
'1024'=>'imagen1024.jpg',
'1280'=>'imagen1280.jpg',
'default'=>'imagenparaotrasresoluciones.jpg'
}
 
var ancho = screen.width;
 
if (parseInt(ancho) > parseInt(800) && parseInt(ancho) < parseInt(1280)) {
 document.body.style.backgroundImage= "url("+ fondos['ancho'] +");";
}else {
 document.body.style.backgroundImage= "url("+ fondos['default'] +");";
}
}

Despues en el body agregas esto

Código HTML:

Ver original</header>
<--! Despues del header en el tag body agregas lo siguiente -->
<body onload="javascript:changeBackground()">

Verifica antes el código que acabo de poner, ya que lo he hecho sobre la marcha y no eh verificado si tiene errores

Actualización: Se me olvidaba que no sabes nada de HTML >.<, al final tendrias que tener algo así, obviamente modificalo a tus necesidades...

Código HTML:

Ver original<html>
<header>
<title>Titulo de tu pagina</title>
<script type="text/javascript">
function changeBackground() {
var fondos = {
'800'=>'imagen800.jpg',
'1024'=>'imagen1024.jpg',
'1280'=>'imagen1280.jpg',
'default'=>'imagenparaotrasresoluciones.jpg'
}
 
var ancho = screen.width;
 
if (parseInt(ancho) > parseInt(800) && parseInt(ancho) < parseInt(1280)) {
 document.body.style.backgroundImage= "url("+ fondos['ancho'] +");";
}else {
 document.body.style.backgroundImage= "url("+ fondos['default'] +");";
}
}
</script>
</header>
<--! Despues del header en el tag body agregas lo siguiente -->
<body onload="javascript:changeBackground()">

ecastaneda · #4 (**permalink**) 08/07/2010, 09:43

body
{
background-color: #FFFFFF;

color: #000000;
overflow-y: scroll;
}
body.bg1024x768{
background-image: url(images/GInuyasha1.jpg);
}
body.bg800x600{
background-image: url(images/GInuyasha2.jpg);
}

y en tu pagina has algo asi:

<html>
<head>
<title>
</title>
<script>
function(){
if (screen.width==1024)
document.body.className="bg1024x768";
else if (screen.width==800)
document.body.className="bg800x600";
}
</script>
</head>
<body>
</body>
</html>

eso haria que tu pagina lo hiciera automaticamente, espero y te sirva de algo

BeethIsaRoGa · #5 (**permalink**) 08/07/2010, 11:04

Disculpen pero he analizado su codigo y pues encuentro una cierta similitud a C# y la verdad no cambia el fondo, y pues edite lo que me pasaron y segun yo me quedo algo asi:

function Fondo()
{
var ancho = screen.width;
if (parseInt(ancho) > parseInt(800) && (parseInt(ancho)) < (parseInt(1024)))
{
document.body.style.backgroundImage= "url(images/GInuyasha1.jpg)";
}
else
{
document.body.style.backgroundImage= "url(images/GInuyasha2.jpg)";
}
}

y lo mando llamar en onload...pero sigue sin cambiar y pienso que hice algo mal en:
"url(images/GInuyasha2.jpg)";

pero por si las dudas, si fueran tan amables de guardar la pagina poner el codigo y subirlo se los agradeceria mucho, pues la verdad pienso que puse su codigo en donde no hiba, aun no he actualizado la pagina, lo estoy haciendo en mi compu

Gracias a todos por su ayuda

BeethIsaRoGa · #6 (**permalink**) 08/07/2010, 12:11

jajaj..disculpenme pero ya se cual es el "error", es que teniendo la resolucion de 1024X768 abria la pagina y luego cambiaba la resolucion y actualizaba y por eso no cambiaba la imagen...disculpen mi ignorancia gracias a todos por ayudarme, em si no fuera mucha molestia quisiera que me ayudaran a quitar el cuadro blanco que aparece con IE y a agregar la barra que aparece arriba en google(la web,images,videos,etc), ya copie el codigo de la barra(apenas me di cuenta de una herramienta fantastica de opera Dragonfly) y copie el codigo que viene pero no aparece, incluso antes de cambiar el fondo (cuando copie el codigo tal cual esta en google no salia), gracias

Nemutagk · #7 (**permalink**) 08/07/2010, 13:41

El problema es que en el código que tu modificaste solo tendrás 2 imágenes de fondo, mientras que el que yo publique tendrás n imágenes, dependiendo de las resoluciones que tu quieras "soportar", para las demás resoluciones esta la imagen "default", como puedes observar en el código esta soportado 800x600, 1024*768 y 1280*1024 y cada una tener una imagen, en el tuyo solo tienes una imagen para 800*600 y 1024*768 y otra para las demás resoluciones, aunque si te funciona a así perfecto, solo quería aclarar el código que te mostré al que tienes ahorita

Actualización: Acabo de entrar a tu página y ver el código fuente, y o dios, tienes un marañal de código HTML que no tiene ni pies ni cabeza, antes de seguir seria mejor que checaras eso y mejorar el código (yo diría cambiar por completo), es impresionante ver que Chrome y Firefox pueda interpretar tal código =/

BeethIsaRoGa · #8 (**permalink**) 08/07/2010, 15:33

si tienes razon, es un monton de codigo pero pues asi esta google, y mi idea era crear un "google" con fondo cambiado y supongo que si le quito el codigo que copie, dejara de funcionar, jejje resulto otro problema...

actualize la pagina y no la cheke pensando que si funkaba y la verdad es que en opera no carga el fondo, pero en Google Chrome, Firefox e IE(Aun muestra el cuadro blanco) si la carga, y pienso que algun codigo no es compatible, pues he oido que javascript y jscript no sol lo mismo, y cada navegador es compatible solo con uno de estos dos. Gracias y disculpen las molestias

Nemutagk · #9 (**permalink**) 08/07/2010, 16:23

que tal, bueno, antes de responder al problema con opera creo que es importante decir que efectivamente Javascript no es lo mismo JScript, el segundo (JScript), es propiedad de Microsoft y fue diseñado para IE y Windows Script Host, por lo tanto, con el que tendrías problemas seria con IE, no con Opera...

Ahora, efectivamente, hay un problema con Opera en el código, sin embargo no se si sea por que yo estoy en Debian (GNU/Linux) o es un comportamiento general de Opera, cuando se solicita el ancho de la ventana lo toma mal, aparte, que en mi caso, tengo 2 monitores conectados por lo cual, me toma el ancho de los dos monitores (2560px)... en este caso es mejor tomar el alto de la ventana "screen:height" para verificar la resolución del monitor...

Código Javascript:

Ver originalfunction changeback() {
                var ancho = screen.height;
 
                var fondo = {
                    '1280':'back_01.jpg',
                    '1024':'back_02.jpg'
                }
 
                document.body.style.backgroundImage = 'url("background/' + fondo[ancho] + '")';
                alert (ancho);
            }

Bolsomaniaco · #10 (**permalink**) 08/07/2010, 19:29

Supuse que eran dos imagenes distintas

BeethIsaRoGa · #11 (**permalink**) 08/07/2010, 21:19

Gracias Nemutagk por contestarme, pero tengo una duda, tu codigo esta "suponiendo" que el navegador tiene el tamaño de la pantalla, ¿que pasaria si lo tengo con una tamaño diferente de 1280 y 1024?

Nemutagk · #12 (**permalink**) 08/07/2010, 21:27

mmm hasta el momento no he visto ningún código que logre "suponer" algo, siempre es blanco o negro, no hay matices, lo que hace el código original es que obtiene el tamaño real de la pantalla (sobre esto depende como actué el navegador y su respuesta, por lo tanto, la respuesta puede variar de navegador a navegador), después verifica si esta dentro de un rango, al final de cuentas lo que obtienes es un numero, así que es fácil saber si esta dentro del rango de 800 a 1280 (para las 3 resoluciones que en teoría tendrías que tener ya preparadas), si el tamaño de pantalla es meno a 800 o mayor a 1280 llama a una cuarta imagen, que en este caso podríamos llamar genérica para que se muestre en todas las demás resoluciones que no están incluidas en el array, así en caso de que quieras agregar mas resoluciones simplemente tienes que crear las imágenes, agregarlas al array y después ampliar el numero máximo de resolución soportada ( que podria ser 1920x1080 en vez de 1280x1024)

Espero que se entienda lo que realmente hace el código original que publique

Para que te sea mas fácil entender comentaré el código original

Código Javascript:

Ver originalfunction changeBackground() {
//Creamos un array en el cual estarán las resoluciones para las cuales
//tienes alguna imagen ya preparada
var fondos = {
'800'=>'imagen800.jpg',
'1024'=>'imagen1024.jpg',
'1280'=>'imagen1280.jpg',
//Al final, agregamos una imagen mas para utilizarla cuando el usuario que visita
//la página tiene alguna resolución diferente a 800x600,1024x768 o 1280x1024
'default'=>'imagenparaotrasresoluciones.jpg'
}
 
//Ahora, obtenemos el ancho de la ventana
var ancho = screen.width;
 
//Verificamos que este dentro del rango, como vez, es fácil saber si la resolución del visitante
//esta dentro del rango que previamente preparamos, ya que solo puede existir 3 coincidencias dentro del rango
if (parseInt(ancho) >= parseInt(800) && parseInt(ancho) <= parseInt(1280)) {
//si esta dentro del rango, entonces quiere decir que existe una imagen para dicha resolución
 document.body.style.backgroundImage= "url("+ fondos[ancho] +");";
}else {
//Si el ancho de ventana no entra en el rango quiere decir que no tenemos ninguna imagen preparada, así que
//vamos a utilizar una imagen genérica para que las demás resoluciones no se queden sin una imagen de fondo
 document.body.style.backgroundImage= "url("+ fondos['default'] +");";
}
}

alandres · #13 (**permalink**) 15/07/2010, 06:01

Muy buenas!!!.. yo deseo agregar algo mas, pero esta vez cambiando la imagen cada vez que se ingrese a la pagina, el problema que tengo es que no manejo bien los anchos y altos, voy a utilizar 3 imagenes, distintas, del mismo tamaño, pero claro, se me va de ancho y alto y no se ajusta a mi ventana, no he utilizado los códigos que han escrito arriba. Estas imágenes son de 1900x1000 px.

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" xml:lang="es-es" lang="es-es" >

<head>

<title>mi pagina</title>

 
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />

    

    <link type="text/css" rel="stylesheet" href="estilos/style.css" />

    

<script language="JavaScript">

var theImages = new Array()

 
theImages[0] = '001.jpg'

theImages[1] = '002.jpg'

theImages[2] = '003.jpg'

 
var j = 0

var p = theImages.length;

var preBuffer = new Array()

for (i = 0; i<p; i++)

{

preBuffer[i] = new Image()

preBuffer[i].src = theImages[i]

}

 
var whichImage = Math.round(Math.random()*(p-1));

function showImage()

{

document.write('<img src="'+theImages[whichImage]+'">');

}

 
</script>

 
</head>

 
<body>

 
<script language="JavaScript">

showImage();

</script>

 
 
Hola!!

 
</body>

</html>

En mi .css :

body
{
margin: 0px;
padding: 0px;
}

Tener en cuenta algo: mi resolución es de 1440 x 900px.
Pero porqué coloco imagenes de 1900 x 1000??, porque si un usuario entra desde una resolución mayor que la mia.. solo se expande la imagen... y se recortará solo hasta su resolución de pantalla.

Mi problema, es q no puedo controlar los anchos y altos, si ven en mi .css he escrito margin y padding : 0px;
pero aún así se me va, mi imagen se va a recortar, no pasa nada y eso es lo q quiero.

Muchas gracias y perdón por tanto rollo!!

Saludos a todos!!

Nemutagk · #14 (**permalink**) 15/07/2010, 09:10

No entiendo muy bien lo que quieres hacer, como que se te va el ancho y alto? ajustar a la ventana? ahora, en CSS margin y padding absolutamente no tiene nada que ver con el alto y ancho de x objeto (sea imagen, div, etc)

Se mas especifico y da mas detalles

alandres · #15 (**permalink**) 18/07/2010, 07:32

ya lo logré!!!..

Espero que me sigan y así lo puedan probar en casa.
El código php es el mismo, e incluso le he agregado mas fotos.. unos 6 ó 7..

pero en .CSS se añade algo mas.

body
{
margin: 0px;
padding: 0px;
overflow: hidden; /*ESTE OVERFLOW: HIDDEN ES LO QUE ME FALTABA!!!!*/
outline: 0px;
border: 0px;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

y nada más!!. me gustaría que lo probaran y vayan haciendo F5, para que vean como cambian las imágenes según se refresca.
Procurar que este pequeño código:

<script language="JavaScript">
showImage();
</script>

lo coloquen al final del cuerpo.. y ya desde el inicio del body vayan creando sus div's.
y otra cosa, crear las imágenes de ese tamaño que les he dicho ahi arriba.

nemutagk, claro que el margin y padding es importante, pq sino la imagen no se verá en todo la pantalla, sino se creará un marco blanco, (si es q no le has puesto un background-color:#.........). has la prueba con el margin: 0px; padding: 0px; y luego lo quitas... y verás como tus imágenes cambian con ese marco blanco que te menciono.

saludos!!!

alandres

lipob · #16 (**permalink**) 27/10/2010, 11:10

Hola nemutagk! Después de horas de probar decidí pedir ayuda. No puedo hacer funcionar tu script. Esto es lo que puse:

Código Javascript:

Ver original<script type="text/javascript">
 
function changeBackground() {
 
var fondos = {
'1024':'bg_body1024.jpg',
'1280':'bg_body1280.jpg',
'1440':'bg_body1440.jpg',
'default':'bg_body1920.jpg'
}
 
 
var ancho = screen.width;
 
 
 
if (parseInt(ancho) >= parseInt(1024) && parseInt(ancho) <= parseInt(1440)) {
 
document.body.style.backgroundImage= "url("+ fondos[ancho] +");";
} else {
 
 
document.body.style.backgroundImage= "url("+ fondos['default'] +");";
}
}
</script>

Hay algo mal que no está bien, en realidad no pasa nada cuando cargo la página.

Agradezco cualquier sugerencia

Nemutagk · #17 (**permalink**) 27/10/2010, 15:02

Pon el código completo... ahora, tira algún error?, como estas llamando a la función?, porque supongo que lo estas llamando no? =P

En el tag <body> tienes que agregar en onload="changeBackground()"...

Código HTML:

Ver original<body onload="changeBackground()">

lipob · #18 (**permalink**) 31/10/2010, 21:35

Sí, eso también lo incluí. Pareciera estar todo ok, por eso no puedo encontrar qué pasa. Y está bueno el escript, es el mejor que encontré en google.

Nemutagk · #19 (**permalink**) 31/10/2010, 23:01

Si no muestras el código que generaste es imposible ayudarte, el código posteado (el que esta comentado) lo probé en su momento y funciono, así que es algo que esta en tu código

lipob · #20 (**permalink**) 01/11/2010, 11:10

Mira Nemutagk, este es el html, las imágenes están en el mismo directorio que el archivo.

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=utf-8" />
<title>Black Box Bar</title>
 
<link href="blackBoxStyle.css" rel="stylesheet" type="text/css" />
 
<script language="javascript" type="text/javascript">
 
function changeBackground() {
 
var fondos = {
'1024':'bg_body1024.jpg',
'1280':'bg_body1280.jpg',
'1440':'bg_body1440.jpg',
'default':'bg_body1920.jpg'
}
 
 
var ancho = screen.width;
 
 
 
if (parseInt(ancho) >= parseInt(1024) && parseInt(ancho) <= parseInt(1440)) {
 
document.body.style.backgroundImage= "url("+ fondos[ancho] +");";
} else {
 
 
document.body.style.backgroundImage= "url("+ fondos['default'] +");";
}
}
</script>
 
 
</head>
 
<body id="index" onload="javascript:changeBackground()">
 
<div id="wrapper">
 
  <div id="header">
    
    <div class="logo">
    <h1><a href="index.html"><img src="imagenes/logoBlack.png" alt="Black Box Bar" width="364px" height="40px" /></a></h1>
    </div> <!-- end of logo -->
    
    <div class="headerRidht">
    </div> <!-- end of headerRight -->
    
    <div class="menu">
    
        <ul>
            <li class="btnTragos"><a href="tragos.html">tragos</a></li>
            <li class="btnPlatos"><a href="platos.html">platos</a></li>
            <li class="btnDiversion"><a href="diversion.html">diversión</a></li>
            <li class="btnEspacios"><a href="espacios.html">espacios</a></li>
            <li class="btnBaila"><a href="baila.html">bailá!</a></li>
            <li class="btnCultura"><a href="cultura.html">cultura</a></li>
            <li class="btnContacto"><a href="contacto.html">contacto</a></li>
        </ul>
    
    </div> <!-- end of menu -->  
  
  
  </div> <!-- end of header -->
  
  
  
  
  
  
  <div id="content">    </div> <!-- end of content -->
  <div id="footer"> </div> <!-- end of footer -->
 
</div> <!-- end of wrapper -->
</body>
</html>

Algo que no me termina de cerrar es el Array, si también tienes ganas de explicarmelo en detalle, adelante! Estoy iniciándome en javascript, cualquier ayuda es importante (Y)

Nemutagk · #21 (**permalink**) 01/11/2010, 17:21

Bueno, checando tu código el error esta en que cuando asignas la imagen al body estas agregando un ";" (punto y coma) al final de la sentencia, lo cual no debería de ir (estas terminando la sentencia con un + ");" cuando debería de ser + ")")...

Sin embargo ahorita que tengo mas tiempo de lo normal >.<, vi que es un código muy digamos arcaico, te dejo mejor este, que es mas funcional y optimo

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=utf-8" />
<title>Black Box Bar</title>
 
<link href="blackBoxStyle.css" rel="stylesheet" type="text/css" />
 
<script language="javascript" type="text/javascript">
    function array_search (needle, haystack, argStrict) {
        var strict = !!argStrict;
        var key = '';
 
        for (key in haystack) {
            if ((strict && haystack[key] === needle) || (!strict && haystack[key] == needle)) {
                return key;
            }
        }
         return false;
    }
 
    function changeBackground() {
        //Creamos el array
        var myBackgrounds = new Array(4);
 
        /**
         * Ahora agregamos las imagenes, pero ahora será de forma diferente,
         * forzosamente el nombre de la imagen será el tamaño de esta, ejemplo:
         * 1024.jgp
         * 1280.jpg
         * 1440.jpg
         *
         * También cambiara el nombre de la imagen por default si no existe una
         * imagen para la resolución del usuario la cual será default.jpg
         *
         * Al final quedaria
         * default.jpg
         * 1024.jgp
         * 1280.jpg
         * 1440.jpg
         */
        myBackgrounds[0] = 'default.jpg';
        myBackgrounds[1] = '1024.jpg';
        myBackgrounds[2] = '1280.jpg';
        myBackgrounds[3] = '1440.jpg';
 
        //Obtenemos el ancho de la ventana
        var ancho = screen.width + '.jpg';
        //Indicamos la carpeta donde se guardan las imagenes
        var carpeta_imagenes = '.'; //el '.' (punto) indica que se encuentran en la misma carpeta que el archivo html
        //Creamos la variable donde se guardará el nombre de la imagen a cargar
        var imageBackground = '';
        //Buscamos si existe una imagen para la resolución del usuario
        var isHere = array_search(ancho,myBackgrounds);
 
        //Verificamos si se encontro o no una imagen
        if (typeof(isHere) != 'boolean') {
            //Si se encontro obtenemos el nombre de la imagen
            imageBackground = myBackgrounds[isHere];
        }else {
            //Si no se encontro cargamos la imagen por defecto
            imageBackground = myBackgrounds[0];
        }
 
        //Cargamos la imagen al body...
        document.body.style.backgroundImage= "url("+ carpeta_imagenes + '/' + imageBackground +")";
    }
</script>
 
 
</head>
 
<body id="index" onload="javascript:changeBackground()">
 
<div id="wrapper">
 
  <div id="header">
    
    <div class="logo">
    <h1><a href="index.html"><img src="imagenes/logoBlack.png" alt="Black Box Bar" width="364px" height="40px" /></a></h1>
    </div> <!-- end of logo -->
    
    <div class="headerRidht">
    </div> <!-- end of headerRight -->
    
    <div class="menu">
    
        <ul>
            <li class="btnTragos"><a href="tragos.html">tragos</a></li>
            <li class="btnPlatos"><a href="platos.html">platos</a></li>
            <li class="btnDiversion"><a href="diversion.html">diversi�n</a></li>
            <li class="btnEspacios"><a href="espacios.html">espacios</a></li>
            <li class="btnBaila"><a href="baila.html">bail�!</a></li>
            <li class="btnCultura"><a href="cultura.html">cultura</a></li>
            <li class="btnContacto"><a href="contacto.html">contacto</a></li>
        </ul>
    
    </div> <!-- end of menu -->  
  
  
  </div> <!-- end of header -->
  <div id="array"></div>
  
  
  
  
  
  <div id="content">    </div> <!-- end of content -->
  <div id="footer"> </div> <!-- end of footer -->
 
</div> <!-- end of wrapper -->
</body>
</html>

lipob · #22 (**permalink**) 02/11/2010, 14:38

Sos groso!!! Lo probé y funciona de perlas.

Te re agradezco. Y estaría bueno que me recomiendes algún sitio en internet donde pueda estudiar todo esto, así no le quito más tiempo a gente como tu.

Gracias de nuevo! Saludos

Lipo

Drakerz · #23 (**permalink**) 02/11/2010, 16:44

Cita:

Iniciado por lipob

Sos groso!!! Lo probé y funciona de perlas.

Te re agradezco. Y estaría bueno que me recomiendes algún sitio en internet donde pueda estudiar todo esto, así no le quito más tiempo a gente como tu.

Gracias de nuevo! Saludos

Lipo

Te dejo un link que te sera util http://www.librosweb.es/

lipob · #24 (**permalink**) 03/11/2010, 06:14

Gracias Drakerz, a favoritos.

INFINITY_18 · #25 (**permalink**) 10/11/2010, 22:00

Hola a ver si alguien me puede ayudar..... bueno sucede que tengo un blog de blogger y pues el fondo de la plantilla que tengo me gustaria que cambiara segun la resolucion de pantalla del visitante y pues intente con los codigos pero no me salio porque el blogger me sustituia las " ' " por el codigo web para el simbolo y simplemente no funcionaba el javascript y me gustaria que me ayudaran con eso. Solo quiero que si el usuario tiene una resolucion de 1280px(ancho) o 1024px el fondo se adaptara segun sea la resolucion. Si alguien tiene resolucion de 1280px(ancho) puede ver el fondo de mi blog como cortado[URL]http://infinity-kof.blogspot.com[/URL] pero si se tiene resolucion de 1024 se ve bien y no sale cortado por eso quisiera que los visitantes con resolucion mayor puedan ver mi blog bien.

Gracias de antemano

wilbert79 · #26 (**permalink**) 31/01/2011, 10:08

Nemutagk Brother me fue de mucha ayuda tu codigo, gracias por tu tiempo y este trabajo.

<script language="javascript" type="text/javascript">
function array_search (needle, haystack, argStrict) {
var strict = !!argStrict;
var key = '';

for (key in haystack) {
if ((strict && haystack[key] === needle) || (!strict && haystack[key] == needle)) {
return key;
}
}
return false;
}

function changeBackground() {
//Creamos el array
var myBackgrounds = new Array(4);

/**
* Ahora agregamos las imagenes, pero ahora será de forma diferente,
* forzosamente el nombre de la imagen será el tamaño de esta, ejemplo:
* 1024.jgp
* 1280.jpg
* 1440.jpg
*
* También cambiara el nombre de la imagen por default si no existe una
* imagen para la resolución del usuario la cual será default.jpg
*
* Al final quedaria
* default.jpg
* 1024.jgp
* 1280.jpg
* 1440.jpg
*/
myBackgrounds[0] = 'default.jpg';
myBackgrounds[1] = '1024.jpg';
myBackgrounds[2] = '1280.jpg';
myBackgrounds[3] = '1440.jpg';

//Obtenemos el ancho de la ventana
var ancho = screen.width + '.jpg';
//Indicamos la carpeta donde se guardan las imagenes
var carpeta_imagenes = '.'; //el '.' (punto) indica que se encuentran en la misma carpeta que el archivo html
//Creamos la variable donde se guardará el nombre de la imagen a cargar
var imageBackground = '';
//Buscamos si existe una imagen para la resolución del usuario
var isHere = array_search(ancho,myBackgrounds);

//Verificamos si se encontro o no una imagen
if (typeof(isHere) != 'boolean') {
//Si se encontro obtenemos el nombre de la imagen
imageBackground = myBackgrounds[isHere];
}else {
//Si no se encontro cargamos la imagen por defecto
imageBackground = myBackgrounds[0];
}

//Cargamos la imagen al body...
document.body.style.backgroundImage= "url("+ carpeta_imagenes + '/' + imageBackground +")";
}
</script>

</head>

<body id="index" onload="javascript:changeBackground()">

wilbert79 · #27 (**permalink**) 31/01/2011, 11:41

El script me funciona muy bien pero internet explorer lo bloquequa ¿es posible evitar esto y que se ejecute automaticamente?

GatorV · #28 (**permalink**) 31/01/2011, 11:51

Tema movido desde Web general a Javascript

wildroc · #29 (**permalink**) 03/03/2012, 07:58

Cita:

Iniciado por BeethIsaRoGa

Primero, quiero aclarar que yo no se HTML ni CSS ni nada, por eso decidi hacer un tema nuevo, por que el los que se relacionan ponen solo la parte del codigo en el que tienen problemas y no se donde va y me disculpo por eso, pero quiero aprender y me las he arreglado para hacer [URL="http://sourcecodeengine.zobyhost.com/Inuyasha/Index.html"]esto[/URL] (no pongo el codigo por que lo pueden ver con cualquier navegador), repito sin saber HTML ni CSS, lo que quiero es que segun la resolucion del usuario aplique un fondo, para 1024X768 se llama GInuyasha1.jpg y para 800X600 GInuyasha2.jpg, por favor tomen en cuetna que no se HTML ni CSS, y les pido me expliquen como solucionarlo de la manera mas simple, abran la pagina solo con Opera por que en Internet Explorer sale un cuadro blanco, quisiera quitarlo tambien, gracias de antemano

hay una forma mucho mas sencilla, en la que el fondo se adapta al tamaño de pantalla del navegador, y es solo un còdigo que te paso aqui debajo. Si quieren ver como queda ingresen a www.horizonteros.com.ar que es donde lo utilizo, desen el gusto de ir cambiando el tamaño del navegador y veran como se mantiene la imagen de acuerdo a este.

background-image: url(images/imagen.jpg);
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;