Switching a DIV background image with jQuery

Question

I am making an expand collapse call rates table for the company I work for  I currently have a table with a button under it to expand it  the button says  Expand   It is functional except I need the button to change to  Collapse  when it is clicked and then of course back to  Expand  when it is clicked again  The writing on the button is a background image   So basically all I need is to change the background image of a div when it is clicked  except sort of like a toggle

User · Answer

Here is how I do it   CSS   button     background-image  url  initial image png        button toggled    background-image url  toggled image png        JS      button   click function          my content   toggle        this  toggleClass  toggled

User · Answer

I always use a timestamp as well to prevent browsers from caching the image  For example  if the user is rotating their avatar  it will often get cached and appear to not change             var d   new Date    var t   d getTime         avatar   css  background-image    url     iPath         t

User · Answer

One way to do this is to put both images in the HTML  inside a SPAN or DIV  you can hide the default either with CSS  or with JS on page load   Then you can toggle on click   Here is a similar example I am using to put left down icons on a list     document  ready function            button   click function                this  children   arrow   toggle                return false                lt a href     class  button  gt       lt span class  arrow  gt           lt img src   images icons left png  alt       gt       lt  span gt       lt span class  arrow  style  display  none   gt           lt img src   images down png  alt  -    gt       lt  span gt   lt  a gt

User · Answer

divID   css  background-image    url  myimage jpg         Should do the trick  just hook it up in a click event on the element      divID   click function          do my image switching logic here

User · Answer

CSS Sprites work best  I tried switching classes and manipulating the  background-image  property with jQuery  none worked  I think it s because the browsers  at least the latest stable Chrome  can t  reload  an image already loaded   Bonus   CSS Sprites are faster to download and faster to display  Less HTTP requests means faster page load  Reducing the number of HTTP is the best way to improve front end performance  so I recommend going this route all the time

User · Answer

I ve found a solution in a forum  Toggle Background Img

User · Answer

divID   css  background-image    url  myimage jpg         Should do the trick  just hook it up in a click event on the element      divID   click function          do my image switching logic here

User · Answer

Mine is animated     this  animate       opacity  0    100  function            Callback       this  css  background-image    url     new img        promise   done function               Callback of the callback              this  animate               opacity  1            600

User · Answer

I did mine using regular expressions  since I wanted to preserve a relative path and not use add the addClass function  I just wanted to make it convoluted  lol       travelinfo-btn   click              function                        html  body   animate  scrollTop    this  offset   top   200                   var bgImg     this  css  background-image                   var bgPath   bgImg substr 0  bgImg lastIndexOf      1                  if bgImg match  collapse                            this  stop   css  background-image   bgImg replace  collapse   expand                           this  next   travelinfo-item   stop   slideToggle 400                     else                         this  stop   css  background-image   bgImg replace  expand   collapse                           this  next   travelinfo-item   stop   slideToggle 400

User · Answer

This is a fairly simple response changes the background of the site with a list of items  function randomToN maxVal        var randVal   Math random     maxVal      return typeof 0     undefined    Math round randVal    randVal toFixed 0      var list      IMG0 EXT    IMG2 EXT   IMG3 EXT        Images     ram   list parseFloat randomToN list length        Random 1 to n     img   ram    undefined    ram    null   list 0    ram     Detect null    div ID   css  backgroundImage    url     img            push de background

User · Answer

One way to do this is to put both images in the HTML  inside a SPAN or DIV  you can hide the default either with CSS  or with JS on page load   Then you can toggle on click   Here is a similar example I am using to put left down icons on a list     document  ready function            button   click function                this  children   arrow   toggle                return false                lt a href     class  button  gt       lt span class  arrow  gt           lt img src   images icons left png  alt       gt       lt  span gt       lt span class  arrow  style  display  none   gt           lt img src   images down png  alt  -    gt       lt  span gt   lt  a gt

User · Answer

If you use a CSS sprite for the background images  you could bump the background offset   - n pixels depending on whether you were expanding or collapsing   Not a toggle  but closer to it than having to switch background image URLs

User · Answer

There are two different ways to change a background image CSS with jQuery       selector   css  backgroundImage   url images example jpg        selector   css   background-image   url images example jpg        Look carefully to note the differences  In the second  you can use conventional CSS and string multiple CSS properties together

User · Answer

divID   css  background-image    url  myimage jpg         Should do the trick  just hook it up in a click event on the element      divID   click function          do my image switching logic here

User · Answer

This is a fairly simple response changes the background of the site with a list of items  function randomToN maxVal        var randVal   Math random     maxVal      return typeof 0     undefined    Math round randVal    randVal toFixed 0      var list      IMG0 EXT    IMG2 EXT   IMG3 EXT        Images     ram   list parseFloat randomToN list length        Random 1 to n     img   ram    undefined    ram    null   list 0    ram     Detect null    div ID   css  backgroundImage    url     img            push de background

User · Answer

Old post  but this would allow you to use an image sprite and adjust the repeat as well as positioning by using the shorthand for the css property  background  repeat  left top       each     smallPreview    function i     var  this     this       this mouseenter function         this css  background    url Assets imgs imgBckg-Small Over png  no-repeat 0 0              this mouseleave function         this css  background    url Assets imgs imgBckg-Small png  no-repeat 0 0

User · Answer

Here is how I do it   CSS   button     background-image  url  initial image png        button toggled    background-image url  toggled image png        JS      button   click function          my content   toggle        this  toggleClass  toggled

User · Answer

I did mine using regular expressions  since I wanted to preserve a relative path and not use add the addClass function  I just wanted to make it convoluted  lol       travelinfo-btn   click              function                        html  body   animate  scrollTop    this  offset   top   200                   var bgImg     this  css  background-image                   var bgPath   bgImg substr 0  bgImg lastIndexOf      1                  if bgImg match  collapse                            this  stop   css  background-image   bgImg replace  collapse   expand                           this  next   travelinfo-item   stop   slideToggle 400                     else                         this  stop   css  background-image   bgImg replace  expand   collapse                           this  next   travelinfo-item   stop   slideToggle 400

User · Answer

This works on all current browsers on WinXP   Basically just checking what the current backgrond image is   If it s image1  show image2  otherwise show image1   The jsapi stuff just loads jQuery from the Google CDN  easier for testing a misc file on the desktop    The replace is for cross-browser compatibility  opera and ie add quotes to the url  and firefox  chrome and safari remove quotes     lt html gt       lt head gt           lt script src  http   www google com jsapi  gt  lt  script gt           lt script gt            google load  jquery    1 2 6              google setOnLoadCallback function                 var original image    url http   stackoverflow com Content img wmd link png                var second image    url http   stackoverflow com Content img wmd code png                     mydiv   click function                     if    this  css  background-image   replace    g         original image                          this  css  background-image   second image                     else                         this  css  background-image   original image                                      return false                                         lt  script gt            lt style gt               mydiv                   background-image  url  http   stackoverflow com Content img wmd link png                    width  100px                  height  100px                         lt  style gt       lt  head gt       lt body gt           lt div class  mydiv  gt  amp nbsp  lt  div gt       lt  body gt   lt  html gt

User · Answer

If you use a CSS sprite for the background images  you could bump the background offset   - n pixels depending on whether you were expanding or collapsing   Not a toggle  but closer to it than having to switch background image URLs

User · Answer

I ve found a solution in a forum  Toggle Background Img

User · Answer

There are two different ways to change a background image CSS with jQuery       selector   css  backgroundImage   url images example jpg        selector   css   background-image   url images example jpg        Look carefully to note the differences  In the second  you can use conventional CSS and string multiple CSS properties together

User · Answer

I personally would just use the JavaScript code to switch between 2 classes   Have the CSS outline everything you need on your div MINUS the background rule  then add two classes  e g  expanded  amp  collapsed  as rules each with the correct background image  or background position if using a sprite    CSS with different images   div          button size etc properties        expanded  background  url img x gif  no-repeat left top    collapsed  background  url img y gif  no-repeat left top     Or CSS with image sprite   div       background  url img sprite gif  no-repeat left top         Other styles        expanded  background-position  left bottom     Then     JavaScript code with images    function           button   click function            if   this  hasClass  expanded                            this  addClass  collapsed   removeClass  expanded                      else                         this  addClass  expanded   removeClass  collapsed                          JavaScript with sprite  Note  the elegant toggleClass does not work in Internet Explorer 6  but the below addClass removeClass method will work fine in this situation as well  The most elegant solution  unfortunately not Internet Explorer 6 friendly     function               button   click function                  this  toggleClass  expanded                         function               button   click function                if   this  hasClass  expanded                                    this  removeClass  expanded                              else                                 this  addClass  expanded                                      As far as I know this method will work accross browsers  and I would feel much more comfortable playing with CSS and classes than with URL changes in the script

User · Answer

This works on all current browsers on WinXP   Basically just checking what the current backgrond image is   If it s image1  show image2  otherwise show image1   The jsapi stuff just loads jQuery from the Google CDN  easier for testing a misc file on the desktop    The replace is for cross-browser compatibility  opera and ie add quotes to the url  and firefox  chrome and safari remove quotes     lt html gt       lt head gt           lt script src  http   www google com jsapi  gt  lt  script gt           lt script gt            google load  jquery    1 2 6              google setOnLoadCallback function                 var original image    url http   stackoverflow com Content img wmd link png                var second image    url http   stackoverflow com Content img wmd code png                     mydiv   click function                     if    this  css  background-image   replace    g         original image                          this  css  background-image   second image                     else                         this  css  background-image   original image                                      return false                                         lt  script gt            lt style gt               mydiv                   background-image  url  http   stackoverflow com Content img wmd link png                    width  100px                  height  100px                         lt  style gt       lt  head gt       lt body gt           lt div class  mydiv  gt  amp nbsp  lt  div gt       lt  body gt   lt  html gt

User · Answer

If you use a CSS sprite for the background images  you could bump the background offset   - n pixels depending on whether you were expanding or collapsing   Not a toggle  but closer to it than having to switch background image URLs

User · Answer

Mine is animated     this  animate       opacity  0    100  function            Callback       this  css  background-image    url     new img        promise   done function               Callback of the callback              this  animate               opacity  1            600

User · Answer

This works on all current browsers on WinXP   Basically just checking what the current backgrond image is   If it s image1  show image2  otherwise show image1   The jsapi stuff just loads jQuery from the Google CDN  easier for testing a misc file on the desktop    The replace is for cross-browser compatibility  opera and ie add quotes to the url  and firefox  chrome and safari remove quotes     lt html gt       lt head gt           lt script src  http   www google com jsapi  gt  lt  script gt           lt script gt            google load  jquery    1 2 6              google setOnLoadCallback function                 var original image    url http   stackoverflow com Content img wmd link png                var second image    url http   stackoverflow com Content img wmd code png                     mydiv   click function                     if    this  css  background-image   replace    g         original image                          this  css  background-image   second image                     else                         this  css  background-image   original image                                      return false                                         lt  script gt            lt style gt               mydiv                   background-image  url  http   stackoverflow com Content img wmd link png                    width  100px                  height  100px                         lt  style gt       lt  head gt       lt body gt           lt div class  mydiv  gt  amp nbsp  lt  div gt       lt  body gt   lt  html gt

User · Answer

One way to do this is to put both images in the HTML  inside a SPAN or DIV  you can hide the default either with CSS  or with JS on page load   Then you can toggle on click   Here is a similar example I am using to put left down icons on a list     document  ready function            button   click function                this  children   arrow   toggle                return false                lt a href     class  button  gt       lt span class  arrow  gt           lt img src   images icons left png  alt       gt       lt  span gt       lt span class  arrow  style  display  none   gt           lt img src   images down png  alt  -    gt       lt  span gt   lt  a gt

User · Answer

I personally would just use the JavaScript code to switch between 2 classes   Have the CSS outline everything you need on your div MINUS the background rule  then add two classes  e g  expanded  amp  collapsed  as rules each with the correct background image  or background position if using a sprite    CSS with different images   div          button size etc properties        expanded  background  url img x gif  no-repeat left top    collapsed  background  url img y gif  no-repeat left top     Or CSS with image sprite   div       background  url img sprite gif  no-repeat left top         Other styles        expanded  background-position  left bottom     Then     JavaScript code with images    function           button   click function            if   this  hasClass  expanded                            this  addClass  collapsed   removeClass  expanded                      else                         this  addClass  expanded   removeClass  collapsed                          JavaScript with sprite  Note  the elegant toggleClass does not work in Internet Explorer 6  but the below addClass removeClass method will work fine in this situation as well  The most elegant solution  unfortunately not Internet Explorer 6 friendly     function               button   click function                  this  toggleClass  expanded                         function               button   click function                if   this  hasClass  expanded                                    this  removeClass  expanded                              else                                 this  addClass  expanded                                      As far as I know this method will work accross browsers  and I would feel much more comfortable playing with CSS and classes than with URL changes in the script

User · Answer

Old post  but this would allow you to use an image sprite and adjust the repeat as well as positioning by using the shorthand for the css property  background  repeat  left top       each     smallPreview    function i     var  this     this       this mouseenter function         this css  background    url Assets imgs imgBckg-Small Over png  no-repeat 0 0              this mouseleave function         this css  background    url Assets imgs imgBckg-Small png  no-repeat 0 0

User · Answer

If you use a CSS sprite for the background images  you could bump the background offset   - n pixels depending on whether you were expanding or collapsing   Not a toggle  but closer to it than having to switch background image URLs

User · Answer

This works on all current browsers on WinXP   Basically just checking what the current backgrond image is   If it s image1  show image2  otherwise show image1   The jsapi stuff just loads jQuery from the Google CDN  easier for testing a misc file on the desktop    The replace is for cross-browser compatibility  opera and ie add quotes to the url  and firefox  chrome and safari remove quotes     lt html gt       lt head gt           lt script src  http   www google com jsapi  gt  lt  script gt           lt script gt            google load  jquery    1 2 6              google setOnLoadCallback function                 var original image    url http   stackoverflow com Content img wmd link png                var second image    url http   stackoverflow com Content img wmd code png                     mydiv   click function                     if    this  css  background-image   replace    g         original image                          this  css  background-image   second image                     else                         this  css  background-image   original image                                      return false                                         lt  script gt            lt style gt               mydiv                   background-image  url  http   stackoverflow com Content img wmd link png                    width  100px                  height  100px                         lt  style gt       lt  head gt       lt body gt           lt div class  mydiv  gt  amp nbsp  lt  div gt       lt  body gt   lt  html gt

User · Answer

divID   css  background-image    url  myimage jpg         Should do the trick  just hook it up in a click event on the element      divID   click function          do my image switching logic here

User · Answer

CSS Sprites work best  I tried switching classes and manipulating the  background-image  property with jQuery  none worked  I think it s because the browsers  at least the latest stable Chrome  can t  reload  an image already loaded   Bonus   CSS Sprites are faster to download and faster to display  Less HTTP requests means faster page load  Reducing the number of HTTP is the best way to improve front end performance  so I recommend going this route all the time

User · Answer

I always use a timestamp as well to prevent browsers from caching the image  For example  if the user is rotating their avatar  it will often get cached and appear to not change             var d   new Date    var t   d getTime         avatar   css  background-image    url     iPath         t

User · Answer

One way to do this is to put both images in the HTML  inside a SPAN or DIV  you can hide the default either with CSS  or with JS on page load   Then you can toggle on click   Here is a similar example I am using to put left down icons on a list     document  ready function            button   click function                this  children   arrow   toggle                return false                lt a href     class  button  gt       lt span class  arrow  gt           lt img src   images icons left png  alt       gt       lt  span gt       lt span class  arrow  style  display  none   gt           lt img src   images down png  alt  -    gt       lt  span gt   lt  a gt

[jquery] Switching a DIV background image with jQuery

Examples related to jquery