Jquery 클릭시 이미지 변경

Question

현재 전체 배경 이미지 레이아웃을 만들고 있는데 사용자가 방문하는 페이지를 기반으로 이미지를 변경하고 싶습니다. 요점을 알려면 사용자가 링크를 클릭 할 때 이미지 속성을 변경해야합니다. 이것은 내가 가지고 얼마나 멀리입니다 :

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

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

 

는, 아마 쉽게 물건을 주셔서 감사합니다,하지만 내 머리!

Answer 1

기본적으로 링크를 클릭하면 링크를 따라 이동하고 페이지를로드하므로 전환됩니다. 귀하의 경우, 당신은 원하지 않습니다. 당신은 e.preventDefault(); (닐 언급 등) 또는 false를 반환하여 기본적를 방지하고 false를 반환의 차이점에 대한

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

Interesting question.

이벤트를 전파 할 필요가 없기 때문에 false를 반환하면 올바르게 작동합니다.

Answer 2

내가 아픈 당신에게 바이올린을 당신에게 하나의 초를 도움이 될 것입니다^_^

UPDATE

당신은 u는 그것을 클릭하면 그렇게 링크가 통과하지 않는 있도록 preventDefault()를 사용해야합니다 :

바이올린 : http://jsfiddle.net/maniator/Sevdm/

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

Answer 3

당신은 회로 차단기를 사용하는 것이 좋습니다 이걸로. 링크는을 연결하는 일반적으로 에 사용해야합니다. 단추는 추가하려는 다른 기능에 사용될 수 있습니다. Neals 솔루션이 작동하지만 해결 방법이 있습니다.

<a> 대신 <button>을 사용하면 원래 코드가 예상대로 작동해야합니다.

Answer 4

"attr"기능을 사용할 수 있습니다! st는`$ ("# id")와 같습니다. attr ('src', "source");

Answer 5

당신은 텍스트를 클릭하거나 아래의 스크립트가 링크를 클릭에 대한 이미지를 변경하는 당신에게 도움이 사용할 수 있도록 이미지가 다른 이미지로 변경됩니다 연결할 때 :

<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> 

을

위의 코드가 매우 유용하다고 생각합니다. 이 코드는 here 또는 demo에서 참조 용으로 제공됩니다.

Answer 6

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