Changing the image source using jQuery

Question

My DOM looks like this    lt div id  d1  gt      lt div class  c1  gt               lt a href     gt  lt img src  img1 on gif  gt  lt  a gt               lt a href     gt  lt img src  img2 on gif  gt  lt  a gt      lt  div gt   lt  div gt    When someone clicks on an image  I want the image src to change to  lt img src  imgx off gif  gt  where x represents the image number 1 or 2   Is this possible or do I have to use CSS to change the images

User · Answer

In case you update the image multiple times and it gets CACHED and   does not update  add a random string at the end       update image in dom     target   attr  src    https   example com img jpg rand     Math random

User · Answer

Change the image source using jQuery click    element        lt img class  letstalk btn   src  images chatbuble png    gt    code           letstalk   click function            var newsrc          if   this  attr  src      images chatbuble png                         newsrc   images closechat png                 this  attr  src   newsrc                     else                       newsrc   images chatbuble png                 this  attr  src   newsrc

User · Answer

I had the same problem when trying to call re captcha button  After some searching  now  the below function works fine in almost all the famous browsers chrome Firefox IE Edge        function recaptcha theUrl        get theUrl  function data  status            captcha-img   attr  src          setTimeout function               captcha-img   attr  src    captcha   new Date   getTime          0         theUrl  is used to render new captcha image and can be ignored in your case  The most important point is generating new URL which forces FF and IE to rerender the image

User · Answer

Hope this can work   lt img id  dummyimage  src  http   dummyimage com 450x255   alt      gt   lt button id  changeSize  gt Change Size lt  button gt      document  ready function         var flag   0         button changeSize   click function             if  flag    0                    dummyimage   attr  src    http   dummyimage com 250x155                 flag   1            else if  flag    1                    dummyimage   attr  src    http   dummyimage com 450x255                 flag   0

User · Answer

You can use jQuery s attr   function   For example  if your img tag has an id attribute of  my image   you would do this    lt img id  my image  src  first jpg   gt    Then you can change the src of your image with jQuery like this       my image   attr  src   second jpg      To attach this to a click event  you could write       my image   on        click   function                my image   attr  src   second jpg                To rotate the image  you could do this      img   on        click   function              var src      this  attr  src        img1 on jpg                  img2 on jpg                 img1 on jpg              this  attr  src   src

User · Answer

Short but exact    quot  d1 img quot   click e  gt  e target src  pic e target src match pic 0     1 0       x000D   x000D  let pic      https   picsum photos id 237 40 40      arbitrary - eg   img1 on gif      https   picsum photos id 238 40 40      arbitrary - eg   img2 on gif          d1 img   click e  gt  e target src  pic e target src match pic 0     1 0     x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt    lt div id  d1  gt      lt div class  c1  gt               lt a href     gt  lt img src  img1 on gif  gt  lt  a gt               lt a href     gt  lt img src  img2 on gif  gt  lt  a gt      lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

I ll show you how to change the image src  so that when you click an image it rotates through all the images that are in your HTML  in your d1 id and c1 class specifically     whether you have 2 or more images in your HTML   I ll also show you how to clean up the page after the document is ready  so that only one image is displayed initially   The full code    function          var  images       d1  gt   c1  gt  a   clone           var  length    images length      var  imgShow   0           d1  gt   c1   html      d1  gt   c1  gt  a first                 d1  gt   c1  gt  a   click function event                this  children   attr  src                               img    images  eq    imgShow    length  attr  src              event preventDefault                   The breakdown   Create a copy of the links containing the images  note  you could also make use of the href attribute of the links for added functionality    for example display the working link below each image        var  images       d1  gt   c1  gt  a   clone        Check how many images were in the HTML and create a variable to track which image is being shown   var  length    images length  var  imgShow   0   Modify the document s HTML so that only the first image is being shown  Delete all the other images       d1  gt   c1   html      d1  gt   c1  gt  a first        Bind a function to handle when the image link is clicked           d1  gt   c1  gt  a   click function event               this  children   attr  src      img    images  eq    imgShow    length  attr  src              event preventDefault              The heart of the above code is using    imgShow    length to cycle through the jQuery object containing the images     imgShow    length first increases our counter by one  then it mods that number with how many images there are  This will keep the resultant index cycling from 0 to length-1  which are the indices of the  images object  This means this code will work with 2  3  5  10  or 100 images    cycling through each image in order and restarting at the first image when the last image is reached   Additionally   attr   is used to get and set the  src  attribute of the images  To pick elements from among the  images object  I set  images as the jQuery context using the form   selector  context   Then I use  eq   to pick just the element with the specific index I m interested in      jsFiddle example with 3 images   You can also store the srcs in an array  jsFiddle example with 3 images  And here s how to incorporate the hrefs from the anchor tags around the images  jsFiddle example

User · Answer

This is a guaranteed way to get it done in Vanilla  or simply Pure  JavaScript   var picurl    pictures apple png   document getElementById  image id   src picurl

User · Answer

You can also do this with jQuery in this way       c1 img   click function           this  attr  src    new image src jpg             You can have a condition if there are multiple states for the image source

User · Answer

There is no way of changing the image source with CSS   Only possible way is using Javascript or any Javascript library like jQuery   Logic-  The images are inside a div and there are no class or id with that image   So logic will be select the elements inside the div where the images are located   Then select all the images elements with loop and change the image src with Javascript   jQuery   Example Code with demo output-   x000D   x000D    document  ready function   x000D    x000D         button   click function   x000D        x000D            d1  c1 a   each function   x000D          x000D              this  children  img   attr  src    https   www gravatar com avatar e56672acdbce5d9eda58a178ade59ffe    x000D            x000D          x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 12 0 jquery min js  gt  lt  script gt  x000D   x000D   lt div id  d1  gt  x000D      lt div class  c1  gt  x000D               lt a href     gt  lt img src  img1 on gif  gt  lt  a gt  x000D               lt a href     gt  lt img src  img2 on gif  gt  lt  a gt  x000D      lt  div gt  x000D   lt  div gt  x000D   x000D   lt button gt Change The Images lt  button gt  x000D   x000D   x000D

User · Answer

One of the common mistakes people do when change the image source is not waiting for image load to do afterward actions like maturing image size etc  You will need to use jQuery  load   method to do stuff after image load      yourimageselector   attr  src    newsrc   load function        this width       Note    this  width   will not work for in memory images        Reason for editing  https   stackoverflow com a 670433 561545

User · Answer

For more information  I try setting src attribute with attr method in jquery for ad image using the syntax for example      myid   attr  src     images sample gif     This solution is useful and it works but if changing the path change also the path for image and not working   I ve searching for resolve this issue but not found nothing    The solution is putting the     at the beginning the path       myid   attr  src     images sample gif     This trick is very useful for me and I hope it is useful for other

User · Answer

You should add id attribute to your image tag  like this     lt div id  d1  gt      lt div class  c1  gt               lt a href     gt  lt img id  img1  src  img1 on gif  gt  lt  a gt               lt a href     gt  lt img id  img2  src  img2 on gif  gt  lt  a gt      lt  div gt   lt  div gt    then you can use this code to change the source of images      document  ready function                  img1   attr    src    logo-ex-7 png                  img2   attr    src    logo-ex-8 png

User · Answer

I have the same wonder today  I did on this way       lt img src  actual png  alt  myImage  class myClass gt      myClass   attr  src      promise   done function       this  attr  src   img new png

User · Answer

Just an addition  to make it even more tiny        imgId   click function          this  attr  src    this  attr  src       img1 on gif     img1 off gif   img1 on gif

User · Answer

I made a codepen with exactly this functionality here  I will give you a breakdown of the code here as well  Codepen  x000D   x000D    function          Listen for a click on the girl button       girl-btn   click function             When the girl button has been clicked  change the source of the  square image to be the girl PNG         square   prop  src    https   homepages cae wisc edu  ece533 images girl png               Listen for a click on the plane button       plane-btn   click function             When the plane button has been clicked  change the source of the  square image to be the plane PNG         square   prop  src    https   homepages cae wisc edu  ece533 images airplane png               Listen for a click on the fruit button       fruits-btn   click function             When the fruits button has been clicked  change the source of the  square image to be the fruits PNG         square   prop  src    https   homepages cae wisc edu  ece533 images fruits png              x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt     lt img src  https   homepages cae wisc edu  ece533 images girl png  id  square    gt   lt div gt     lt button id  girl-btn  gt Girl lt  button gt     lt button id  plane-btn  gt Plane lt  button gt     lt button id  fruits-btn  gt Fruits lt  button gt      lt a href  https   homepages cae wisc edu  ece533 images   gt Source of Images lt  a gt   lt  div gt  x000D   x000D   x000D

User · Answer

IF there is not only jQuery or other resource killing frameworks - many kb to download each time by each user just for a simple trick - but also native JavaScript       lt img src  img1 on jpg       onclick  this src this src match   on    img1 off jpg   img1 on jpg    gt   lt img src  img2 on jpg       onclick  this src this src match   on    img2 off jpg   img2 on jpg    gt    This can be written general and more elegant    lt html gt   lt head gt   lt script gt  function switchImg img       img src   img src match   on              img src replace   on     off              img src replace   off     on       lt  script gt   lt  head gt   lt body gt       lt img src  img1 on jpg  onclick  switchImg this   gt       lt img src  img2 on jpg  onclick  switchImg this   gt   lt  body gt   lt  html gt

[javascript] Changing the image source using jQuery

Examples related to javascript

Examples related to jquery

Examples related to image