Foros del Web - Ver Mensaje Individual

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>