div cambie la imagen al dar un click

alx_salazar · #1 (**permalink**) 25/11/2011, 15:34

hola Buenas tardes,

este es el unico ligar dodne pueden despejarme y enseñarme ah hacer lo siguiente...
llevo varias hora y no logro resultados

Tengo un problema quiero controlar la imagen de fondo de una div que lo agrag mediante un css. no tengo idea de como realizar esta acción.

Voy a explicar detalladamente lo que deseo hacer, estoy realizando una pagina web y el asunto es que tengo un div con un fondo que lo inserto desde la hoja de stilos, y lo que quiero hacer esque cuando cargue la pagina principal muestre esta imagen del div y cuando de un click en cualquier otro elemnto de la pagina desaparezca, y luego is doy un clic a la pagina de inicio la muetre nuevamente.

he leido varias hora pero no entiendo como realizarlo hago pruebas con unos codigos pero funcina nada.. se queda permanentemente.
Es posible hacer lo que quiero hacer...? he leido que hay como hacer con un script pero no lo gro hacer me pueden ayudar porfavor, agradeceria su interes por esta ayuda.. quiero aprender a como de lugar por eso estoy aca averiguando quien pueda explicarme o ayudarme con un ejemploo....

AeroSilver · #2 (**permalink**) 25/11/2011, 17:57

Esto es lo que se me ocurre. Espero te sirva.

Código HTML:

Ver original<head>
<script type='text/javascript'>
function cambiar()
{
  document.getElementById('imagen').style.backgroundImage = 'otraimagen.jpg';
}
</script>
</head>
 
<body>
<div onblur='cambiar();' id='imagen'></div>
</body>

quedecosas · #3 (**permalink**) 25/11/2011, 21:06

Código HTML:

Ver original<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>
$(function(){
$(document).click(function(e){
//hacer algo si se hizo click en pagina principal
    if(e.target.id == "id del elemento inicio") return;
    else
// hacer algo si se hizo click en cualquier otra parte
});
})
</script>
</head>
<body>
<img src="tuimagen.jpg" id="imgen"/>
</body>
</html>

hola esto te deberia ayudar a solucionarlo, saludos

alx_salazar · #4 (**permalink**) 28/11/2011, 12:23

Cita:

Iniciado por AeroSilver

Esto es lo que se me ocurre. Espero te sirva.

Código HTML:

Ver original<head>
<script type='text/javascript'>
function cambiar()
{
  document.getElementById('imagen').style.backgroundImage = 'otraimagen.jpg';
}
</script>
</head>
 
<body>
<div onblur='cambiar();' id='imagen'></div>
</body>

Gracias por responder lo voy aprobar para ver como funciona
GRACAIS

alx_salazar · #5 (**permalink**) 28/11/2011, 12:23

Cita:

Iniciado por quedecosas

Código HTML:

Ver original<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>
$(function(){
$(document).click(function(e){
//hacer algo si se hizo click en pagina principal
    if(e.target.id == "id del elemento inicio") return;
    else
// hacer algo si se hizo click en cualquier otra parte
});
})
</script>
</head>
<body>
<img src="tuimagen.jpg" id="imgen"/>
</body>
</html>

hola esto te deberia ayudar a solucionarlo, saludos

Gracais por aoprtar tambien la probare para mirar como funcionan espero estas sean la solución gracias... mil