Tema: Cambiar Fondo segun Resolucion
Ver Mensaje Individual
  #20 (permalink)  
Antiguo 01/11/2010, 11:10
lipob
 
Fecha de Ingreso: octubre-2010
Mensajes: 11
Antigüedad: 14 años, 1 mes
Puntos: 0
Respuesta: Cambiar Fondo segun Resolucion
Mira Nemutagk, este es el html, las imágenes están en el mismo directorio que el archivo.

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Black Box Bar</title>
  6.  
  7. <link href="blackBoxStyle.css" rel="stylesheet" type="text/css" />
  8.  
  9. <script language="javascript" type="text/javascript">
  10.  
  11. function changeBackground() {
  12.  
  13. var fondos = {
  14. '1024':'bg_body1024.jpg',
  15. '1280':'bg_body1280.jpg',
  16. '1440':'bg_body1440.jpg',
  17. 'default':'bg_body1920.jpg'
  18. }
  19.  
  20.  
  21. var ancho = screen.width;
  22.  
  23.  
  24.  
  25. if (parseInt(ancho) >= parseInt(1024) && parseInt(ancho) <= parseInt(1440)) {
  26.  
  27. document.body.style.backgroundImage= "url("+ fondos[ancho] +");";
  28. } else {
  29.  
  30.  
  31. document.body.style.backgroundImage= "url("+ fondos['default'] +");";
  32. }
  33. }
  34. </script>
  35.  
  36.  
  37. </head>
  38.  
  39. <body id="index" onload="javascript:changeBackground()">
  40.  
  41. <div id="wrapper">
  42.  
  43.   <div id="header">
  44.     
  45.     <div class="logo">
  46.     <h1><a href="index.html"><img src="imagenes/logoBlack.png" alt="Black Box Bar" width="364px" height="40px" /></a></h1>
  47.     </div> <!-- end of logo -->
  48.     
  49.     <div class="headerRidht">
  50.     </div> <!-- end of headerRight -->
  51.     
  52.     <div class="menu">
  53.     
  54.         <ul>
  55.             <li class="btnTragos"><a href="tragos.html">tragos</a></li>
  56.             <li class="btnPlatos"><a href="platos.html">platos</a></li>
  57.             <li class="btnDiversion"><a href="diversion.html">diversión</a></li>
  58.             <li class="btnEspacios"><a href="espacios.html">espacios</a></li>
  59.             <li class="btnBaila"><a href="baila.html">bailá!</a></li>
  60.             <li class="btnCultura"><a href="cultura.html">cultura</a></li>
  61.             <li class="btnContacto"><a href="contacto.html">contacto</a></li>
  62.         </ul>
  63.     
  64.     </div> <!-- end of menu -->  
  65.   
  66.   
  67.   </div> <!-- end of header -->
  68.   
  69.   
  70.   
  71.   
  72.   
  73.   
  74.   <div id="content">    </div> <!-- end of content -->
  75.   <div id="footer"> </div> <!-- end of footer -->
  76.  
  77. </div> <!-- end of wrapper -->
  78. </body>
  79. </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)