Jquery cambiar imagen al hacer clic

Question

Actualmente estoy construyendo un diseño de imagen de fondo completo y quiero cambiar la imagen según la página que esté visitando el usuario. Para ir al grano: necesito cambiar un atributo de imágenes cuando el usuario hace clic en un enlace. Esto es lo lejos que tengo:

$(function() { 
    $('.menulink').click(function(){ 
    $("#bg").attr('src',"img/picture1.jpg"); 
    }); 
}); 

 

<a href="" title="Switch" class="menulink">switch me</a> 
    <img src="img/picture2.jpg" id="bg" /> 

Gracias, probablemente cosas fáciles, pero por encima de mi cabeza!

Answer 1

Cambia de nuevo porque, de forma predeterminada, cuando hace clic en un enlace, sigue el enlace y carga la página. En tu caso, no quieres eso. Puede evitarlo haciendo e.preventDefault(); (Como se menciona Neal) o mediante la devolución falsa:

$(function() { 
$('.menulink').click(function(){ 
    $("#bg").attr('src',"img/picture1.jpg"); 
    return false; 
}); 
}); 

Interesting question en las diferencias entre prevenir defecto y volver falsa.

En este caso, devolver falso funcionará bien porque el evento no necesita ser propagado.

Answer 2

Yo te ayudaré a uno seg enferma que hacer un violín^_^

ACTUALIZACIÓN

es necesario utilizar preventDefault() para que así el vínculo no pasa por cuando u clic en él:

violín: http://jsfiddle.net/maniator/Sevdm/

$(function() { 
$('.menulink').click(function(e){ 
    e.preventDefault(); 
    $("#bg").attr('src',"img/picture1.jpg"); 
}); 
}); 

Answer 3

debe considerar el uso de un butto n por esto. Los enlaces generalmente se deben usar para que enlazan. Los botones se pueden usar para otras funciones que desee agregar. La solución de Neals funciona, pero es una solución.

Si utiliza <button> en lugar de <a>, su código original debería funcionar como se esperaba.

Answer 4

puede usar la función "attr" !!! st como `$ (" # id "). Attr ('src'," fuente ");

Answer 5

Al hacer clic en el texto o enlazar la imagen se puede cambiar a otra imagen para que pueda utilizar la secuencia de comandos a continuación ayuda a que cambie la imagen en haga clic en el enlace:

<script> 
$(document).ready(function(){ 
$('li').click(function(){ 
var imgpath = $(this).attr('dir'); 
$('#image').html('<img src='+imgpath+'>'); 
}); 
$('.btn').click(function(){ 
$('#thumbs').fadeIn(500); 
$('#image').animate({marginTop:'10px'},200); 
$(this).hide(); 
$('#hide').fadeIn('slow'); 
}); 
$('#hide').click(function(){ 
$('#thumbs').fadeOut(500,function(){ 
$('#image').animate({marginTop:'50px'},200); 
}); 
$(this).hide(); 
$('#show').fadeIn('slow'); 
}); 
}); 
</script> 




<div class="sandiv"> 
    <h1 style="text-align:center;">The Human Body Parts :</h1> 
    <div id="thumbs"> 
    <div class="sanl"> 
    <ul> 
    <li dir="5.png">Human-body-organ-diag-1</li> 
    <li dir="4.png">Human-body-organ-diag-2</li> 
    <li dir="3.png">Human-body-organ-diag-3</li> 
    <li dir="2.png">Human-body-organ-diag-4</li> 
    <li dir="1.png">Human-body-organ-diag-5</li> 
    </ul> 
    </div> 
    </div> 
    <div class="man"> 
    <div id="image"> 
    <img src="2.png" width="348" height="375"></div> 
    </div> 
    <div id="thumbs"> 
    <div class="sanr" > 
    <ul> 
    <li dir="5.png">Human-body-organ-diag-6</li> 
    <li dir="4.png">Human-body-organ-diag-7</li> 
    <li dir="3.png">Human-body-organ-diag-8</li> 
    <li dir="2.png">Human-body-organ-diag-9</li> 
    <li dir="1.png">Human-body-organ-diag-10</li> 
    </ul> 
    </div> 
    </div> 
    </div> 

css:

<style> 
body{ font-family:Tahoma, Geneva, sans-serif; color:#ccc; font-size:11px; margin:0; padding:0; background-color:#111111} 
.sandiv{ width:980px;height:570px;margin:0 auto;margin-top:20px; padding:10px; background-color:#000;-webkit-box-shadow: 0 1px 2px #666;box-shadow: 0 1px 2px #666;} 
#image{width:348px; height:375px; border-radius:100%;margin:0 auto; margin-top:50px; margin-bottom:20px;} 
#thumb{width:400px;margin:0 auto; display:none;} 
ul{list-style:none; padding:0; margin:0;} 
li{ width:auto ; height:50px; border-radius:100%; margin:5px; cursor:pointer; } 
.sanl 
{ 
margin-top:50px; 
float:left; 
width:210px; 
margin-left:30px; 
margin-right:30px; 
    } 
.sanr 
{ 
    margin-top:50px; 
float:left; 
width:210px; 
margin-left:60px; 
margin-right:30px; 
} 
.man 
{ 
float:left; 
width:350px; 
margin-left:30px; 
margin-right:30px; 
} 
</style> 

Creo que el código anterior es muy útil para usted. Este código que recibo de here o demo aquí por su referencia

Answer 6

$('div#imageContainer').click(function() { 
     $('div#imageContainerimg').attr('src', 'YOUR NEW IMAGE URL HERE'); 
});