A ver si me podéis ayudar.

MACvsWINDOWS · #1 (**permalink**) 20/10/2011, 10:40

A ver os explico lo que quiero, si no se entiende me lo decís y seré más conciso.

El caso es que tengo una página que es como una especie de "gestor web" o "gestor de plantillas". En la página lo que aparece es el inicio de una web completamente diseñada y arriba del todo hay un panel tipo slider hecho en jquery donde aparecen varias opciones, como cambiar el fondo a la web, el estilo de los botones, etc.

Ahora os comento lo que me gustaría hacer: quiero desplegar el panel, elegir una opción (cambiar el fondo por ejemplo) y que se muestre el cambio, pero no quiero que donde pulso tenga un enlace a una página html, es decir, no quiero hacer otra página entera cambiando solamente el fondo. Con esto, lo que me gustaría saber es si hay alguna opción, algún script o algo, que cambié únicamente el fondo y no tenga pro ello que crear otra página entera con sólo ese cambio.

Sería algo sencillo para no tener mil páginas html, ya que el cambio sería sólo de cambiar una imagen por otra...

Espero que se haya entendido, no sé tampoco cómo explicarlo bien del todo.

Un saludo.

kiko's · #2 (**permalink**) 20/10/2011, 10:48

Hola

Jquery te permite cambiar los atributos de cualquier elemento de tu web.

Sólo deberías leer la url de la imagen de fondo y modificar el div o el método que hayas utilizado para poner el fondo en tu web.

<html>
<div id="hola" style="background-image: url(fondo1.jpg)">Aquí hay un fondo de pantalla</div>
</html>

Función en Javascript:
function cambiar_fondo(url){
$("#hola").attr("style", "background-image: url(" + url + ")");
}
donde url es la url de la imagen nueva.

Sólo es una idea muy general. Consulta en la documentación de jquery.

Saludos.

MACvsWINDOWS · #3 (**permalink**) 20/10/2011, 10:59

Cita:

Iniciado por kiko's

Hola

Jquery te permite cambiar los atributos de cualquier elemento de tu web.

Sólo deberías leer la url de la imagen de fondo y modificar el div o el método que hayas utilizado para poner el fondo en tu web.

<html>
<div id="hola" style="background-image: url(fondo1.jpg)">Aquí hay un fondo de pantalla</div>
</html>

Función en Javascript:
function cambiar_fondo(url){
$("#hola").attr("style", "background-image: url(" + url + ")");
}
donde url es la url de la imagen nueva.

Sólo es una idea muy general. Consulta en la documentación de jquery.

Saludos.

Ok, gracias, le he echado un ojo, pero... aún ni sabiendo inglés me entero mucho. Es que este panel digamos que es uno ya creado que lo he adaptado yo a lo que quería, no lo he creado yo entero. Y dentro del panel lo que hay son imágenes qeu actúan como enlaces, entonces la función debería ir asociada a la imagen, no?

kiko's · #4 (**permalink**) 20/10/2011, 11:01

Hola

Pon el código o el enlace al código del panel.

MACvsWINDOWS · #5 (**permalink**) 20/10/2011, 11:16

Cita:

Iniciado por kiko's

Hola

Pon el código o el enlace al código del panel.

A ver, el código html lo meto en la página que tengo con toda la estructura html, la función en el archivo .js del panel, pero, y en la imagen? qué código pongo para que al pulsar sobre esta relacione una cosa y otra?

kiko's · #6 (**permalink**) 20/10/2011, 11:32

Hola

Te pongo un ejemplo más detallado.

Tengo una serie de imágenes:

<img src="pepito.png" class="background">
<img src="matilde.png" class="background">
<img src="rodolfo.png" class="background">

En tu código javascript:

$(".background").click(function(event){
var srcImagen = $(this).attr('src');
$("#hola").attr("style", "background-image: url(" + srcImagen+ ")");
}

Cada vez que pulses una imagen que tenga una definida una clase de nombre "background" entrará dentro del método "click" y ejecutará el código que hay dentro. Además $(this).attr('src') me devuelve la url de la imagen.

Saludos.

MACvsWINDOWS · #7 (**permalink**) 20/10/2011, 12:16

Cita:

Iniciado por kiko's

Hola

Te pongo un ejemplo más detallado.

Tengo una serie de imágenes:

<img src="pepito.png" class="background">
<img src="matilde.png" class="background">
<img src="rodolfo.png" class="background">

En tu código javascript:

$(".background").click(function(event){
var srcImagen = $(this).attr('src');
$("#hola").attr("style", "background-image: url(" + srcImagen+ ")");
}

Cada vez que pulses una imagen que tenga una definida una clase de nombre "background" entrará dentro del método "click" y ejecutará el código que hay dentro. Además $(this).attr('src') me devuelve la url de la imagen.

Saludos.

Voy a probar a ver lo que me sale.

MACvsWINDOWS · #8 (**permalink**) 21/10/2011, 04:12

Nada, no hay manera, pongo el código de ejemplo con el que estoy trabajando a ver dónde están los errores.

archivo index.html

Código HTML:

<html>
<head>
<script src="bg.js" type="text/javascript"></script>
</head>
<body>
<img src="m_f1.png" class="background">
<img src="m_f2.png" class="background">
<img src="m_f3.png" class="background">
</div>
</body>
</html>

archivo bg.js

Código HTML:

$(".background").click(function(event){
var srcImagen = $(this).attr('src');
$("#body").attr("style", "background-image: url(" + srcImagen+ ")");
}

kiko's · #9 (**permalink**) 21/10/2011, 08:29

Esto sí funciona:

Código HTML:

<html>
  <head>
    <!-- Hay que incluir el código de jQuery -->
    <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="bg.js" type="text/javascript"></script>
  </head>
  <body>
     <img src="m_f1.png" class="background">
     <img src="m_f2.png" class="background">
     <img src="m_f3.png" class="background">
  </body>
</html>

Además, siempre que utilices funciones de jQuery, tu código deberá dentro de:
$(document).ready(function(){
// Aquí código javascript
});

Código HTML:

$(document).ready(function(){
   $(".background").click(function(event){
      var srcImagen = $(this).attr('src');
      $("body").attr("style", "background-image: url(" + srcImagen+ ")");
   });
});

También pusiste $("#body") cuando para tu código html sería $("body"). ¿Por qué? Porque # es el "ID selector", es decir, que estás haciendo referencia a todos los elementos con el ID body. Es decir, que si yo tuviera un div tal que así:
<div id="body"></div> con $("#body") le estaría añadiendo una imagen de fondo a ese div, y a todos con id="body".

Con $("body") estás haciendo referencia a todas las etiquetas body. Con $("pepito") estás haciendo referencia a todas las etiquetas pepito. Con $("libro") estás haciendo referencia a todas las etiquetas libro, etc.

Esto son etiquetas:
<body>
<pepito>
<libro>

Saludos.

MACvsWINDOWS · #10 (**permalink**) 21/10/2011, 14:37

Así si funciona, gracias por el código, pero me salta una duda, lo que se repite es la miniatura que se ve en la pantalla, pero yo lo que quiero es que al pulsar sobre la miniatura se repita otro archivo que es el que me interesa para el fondo, eso se puede hacer?