Change the image source on rollover using jQuery

Question

I have a few images and their rollover images  Using jQuery  I want to show hide the rollover image when the onmousemove onmouseout event happen  All my image names follow the same pattern  like this   Original Image  Image gif Rollover Image  Imageover gif  I want to insert and remove the  quot over quot  portion of image source in the onmouseover and onmouseout event  respectively  How can I do it using jQuery

User · Answer

If you have more than one image and you need something generic that doesn't depend on a naming convention.

HTML

<img data-other-src="big-zebra.jpg" src="small-cat.jpg">
<img data-other-src="huge-elephant.jpg" src="white-mouse.jpg">
<img data-other-src="friendly-bear.jpg" src="penguin.jpg">

JavaScript

$('img').bind('mouseenter mouseleave', function() {
    $(this).attr({
        src: $(this).attr('data-other-src') 
        , 'data-other-src': $(this).attr('src') 
    })
});

User · Answer

A generic solution that doesn t limit you to  this image  and  that image  only may be to add the  onmouseover  and  onmouseout  tags to the HTML code itself   HTML   lt img src  img1 jpg  onmouseover  swap  img2 jpg    onmouseout  swap  img1 jpg      gt    JavaScript  function swap newImg     this src   newImg        Depending on your setup  maybe something like this would work better  and requires less HTML modification    HTML   lt img src  img1 jpg  id  ref1    gt   lt img src  img3 jpg  id  ref2    gt   lt img src  img5 jpg  id  ref3    gt    JavaScript   jQuery     Declare Arrays   imgList   new Array      imgList  ref1     new Array      imgList  ref2     new Array      imgList  ref3     new Array       Set values for each mouse state   imgList  ref1    out      img1 jpg     imgList  ref1    over      img2 jpg     imgList  ref2    out      img3 jpg     imgList  ref2    over      img4 jpg     imgList  ref3    out      img5 jpg     imgList  ref3    over      img6 jpg      Add the swapping functions      img   mouseover function          this  attr  src   imgList    this  attr  id      over               img   mouseout function          this  attr  src   imgList    this  attr  id      out

User · Answer

img   mouseover function      var newSrc     this  attr  src   replace  image gif    imageover gif        this  attr  src   newSrc           img   mouseout function      var newSrc     this  attr  src   replace  imageover gif    image gif        this  attr  src   newSrc

User · Answer

img over   each function        var t   this       var src1  t attr  src       initial src     var newSrc   src1 substring 0  src1 lastIndexOf            let s get file name without extension     t hover function              this  attr  src   newSrc   -over              exec src1      last part is for extension           function              this  attr  src   newSrc                  exec src1      removing  -over  from the name               You may want to change the class of images from first line  If you need more image classes  or different path  you may use     img over   container img  img anotherOver   each function      and so on   It should work  I didn t test it

User · Answer

Adapted from Richard Ayotte s code -  To target an img in a ul li list  found via wrapper div class here   something like this       div navlist li   bind  mouseenter mouseleave   function               this  find  img   attr   src    this  find  img   attr  data-alt-src          data-alt-src    this  find  img   attr  src

User · Answer

I was hoping for an   ber one liner like      img screenshot   attr  src     this  replace  foo    bar

User · Answer

To set up on ready     function            img            mouseover function                  var src     this  attr  src   match              over gif                 this  attr  src   src                       mouseout function                 var src     this  attr  src   replace  over gif     gif                  this  attr  src   src                     For those that use url image sources     function                img                mouseover function                    var src     this  attr  src                   var regex     normal svg gi                 src   this src replace regex   rollover svg                     this  attr  src   src                                mouseout function                    var src     this  attr  src                   var regex     rollover svg gi                 src   this src replace regex   normal svg                     this  attr  src   src

User · Answer

lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset iso-8859-1    gt   lt title gt JQuery lt  title gt   lt script src  jquery js  type  text javascript  gt   lt  script gt   lt style type  text css  gt       box          width  68px          height  27px          background  url images home1 gif           cursor  pointer         lt  style gt    lt script type  text javascript  gt     function             box   hover  function                box   css  background    url images home2 gif                      box   mouseout  function                box   css  background    url images home1 gif                    lt  script gt   lt  head gt    lt body gt   lt div id  box  onclick  location href  index php    gt  lt  div gt   lt  body gt   lt  html gt

User · Answer

lt img src  img1 jpg  data-swap  img2 jpg   gt     img       init  function          img   on  mouseover   img swap        img   on  mouseover   img swap          swap  function       var tmp     this  data  swap        this  attr  data-swap     this  attr  src         this  attr  str   tmp         img init

User · Answer

If the solution you are looking for is for an animated button  then the best you can do to improve in performance is the combination of sprites and CSS  A sprite is a huge image that contains all the images from your site  header  logo  buttons  and all decorations you have   Each image you have uses an HTTP request  and the more HTTP requests the more time it will take to load    buttonClass       width  25px      height  25px      background  url Sprite gif  -40px -500px     buttonClass hover       width  25px      height  25px      background  url Sprite gif  -40px -525px      The 0px 0px coordinates will be the left upper corner from your sprites   But if you are developing some photo album with Ajax or something like that  then JavaScript  or any framework  is the best   Have fun

User · Answer

I ve made something like the following code     It works only  when you have a second file named with  hover  for example  facebook png and facebook hover png      social   find  a   hover function         var target     this  find  img   attr  src          console log target       var newTarg   target replace   png     hover png          this  find  img   attr  src   newTarg      function         var target     this  find  img   attr  src        var newTarg   target replace   hover png     png          this  find  img   attr  src   newTarg

User · Answer

Whilst looking for a solution some time back  I found a similar script to the below  which after some tweaking I got working for me   It handles two images  that almost always default to  off   where the mouse is off the image  image-example off jpg   and the occasional  on   where for the times the mouse is hovered  the required alternative image  image-example on jpg  is displayed    lt script type  text javascript  gt                document  ready function                        img   this  hover swapImageIn  swapImageOut            function swapImageIn e                this src   this src replace   off     on                      function swapImageOut  e                this src   this src replace   on     off                       lt  script gt

User · Answer

Teaser image swap function           img swap   hover function              this src     images signup big hover png          function              this src     images signup big png

User · Answer

I know you re asking about using jQuery  but you can achieve the same effect in browsers that have JavaScript turned off using CSS    element       width  100px     width of image        height  200px     height of image        background-image  url  path to image jpg       element hover       background-image  url  path to other image jpg       There s a longer description here  Even better  however  is to use sprites  simple-css-image-rollover

[jquery] Change the image source on rollover using jQuery

Examples related to jquery

Examples related to html