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

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 <button> instead of a <a>, 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

User · Answer

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

User · Answer

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

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    lt script gt    document  ready function       li   click function    var imgpath     this  attr  dir        image   html   lt img src   imgpath   gt             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             lt  script gt        lt div class  sandiv  gt       lt h1 style  text-align center   gt The  Human  Body  Parts   lt  h1 gt       lt div id  thumbs  gt       lt div class  sanl  gt       lt ul gt       lt li dir  5 png  gt Human-body-organ-diag-1 lt  li gt       lt li dir  4 png  gt Human-body-organ-diag-2 lt  li gt       lt li dir  3 png  gt Human-body-organ-diag-3 lt  li gt       lt li dir  2 png  gt Human-body-organ-diag-4 lt  li gt       lt li dir  1 png  gt Human-body-organ-diag-5 lt  li gt       lt  ul gt       lt  div gt       lt  div gt       lt div class  man  gt       lt div id  image  gt       lt img src  2 png  width  348  height  375  gt  lt  div gt       lt  div gt       lt div id  thumbs  gt       lt div class  sanr   gt       lt ul gt       lt li dir  5 png  gt Human-body-organ-diag-6 lt  li gt       lt li dir  4 png  gt Human-body-organ-diag-7 lt  li gt       lt li dir  3 png  gt Human-body-organ-diag-8 lt  li gt       lt li dir  2 png  gt Human-body-organ-diag-9 lt  li gt       lt li dir  1 png  gt Human-body-organ-diag-10 lt  li gt       lt  ul gt       lt  div gt       lt  div gt       lt  div gt    css    lt style gt  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      lt  style gt    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 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

[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