How can I change image source on click with jQuery

Question

I  m currently building a full background image layout and I want to change the image based on which page the user is visiting  To get to the point  I need to change a images attribute when the user clickes on a link  This is how far I got     function           menulink   click function            bg   attr  src   img picture1 jpg                 nbsp        lt a href    title  Switch  class  menulink  gt switch me lt  a gt       lt img src  img picture2 jpg  id  bg    gt    Thank you  probably easy stuff  but over my head

User · Answer

When you click the text or link the image will be changed to another image so you can use the below script helps to you to change image on click the link:

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

I think the above code is very useful to you. This code i get from here or demo here for your reference

User · Answer

You can use jQuery s attr   function  like    quot  id quot   attr  src   quot source quot

User · Answer

div imageContainer   click function               div imageContainerimg   attr  src    YOUR NEW IMAGE URL HERE

User · Answer

You need to use preventDefault   to make it so the link does not go  through when u click on it  fiddle  http   jsfiddle net maniator Sevdm    function          menulink   click function e        e preventDefault          quot  bg quot   attr  src   quot img picture1 jpg quot

User · Answer

You should consider using a button for this  Links generally should be use for linking  Buttons can be used for other functionality you wish to add  Neals solution works  but its a workaround   If you use a  lt button gt  instead of a  lt a gt   your original code should work as expected

User · Answer

It switches back because by default  when you click a link  it follows the link and loads the page  In your case  you don t want that  You can prevent it either by doing e preventDefault     like Neal mentioned  or by returning false       function          menulink   click function           bg   attr  src   img picture1 jpg       return false             Interesting question on the differences between prevent default and return false   In this case  return false will work just fine because the event doesn t need to be propagated

[jquery] How can I change image source on click with jQuery?

Examples related to jquery

Examples related to image

Examples related to function

Examples related to href