Themeforest

Quick and Easy jQuery Image Swap

Here is a very quick and easy way to implement image swap on hover on your website using jQuery.

With the jQuery javascript library already added to your website add the following javascript code between the head tags in your web page:

jQuery(function(){
     $(".img-swap").hover(
          function(){this.src = this.src.replace("_off","_on");},
          function(){this.src = this.src.replace("_on","_off");
     });
});

Then simply create your 2 images – normal state called xxxxxx_off.jpg and the hover state xxxxxx_on.jpg, add the css class “img-swap” to the image tag in your html and jQuery will do the rest … see demo below:

Additional Notes:

Refer to our later blog post – Create An Image Preloader For Image Swap Function Using jQuery – for a preload function to improve the image swap performance.

For an example on how to use this to create a very simple jQuery gallery check out our tutorial – jQuery Image Swap Gallery.

23 Comments

  • [...] I’m working on that allows for easy image switches onhover. I found this awesome little tool: http://www.designchemical.com/blog/index.php/jquery/quick-and-easy-jquery-image-swap/ … does exactly what I need except it switches the image but not crossfade onhover. I know I [...]

  • Thanks for this great script!

    I’m trying to alter this script to go thru a series of images on a click instead of a hover. the first click to go to image 2 works, but then that is it. When I use hover instead of click, the mouseover gets me to 2, and the mouseout gets me to 3 but then that is it. Can anyone see what I am missing?

    <script type="text/javascript">
    jQuery(function(){
         $(".img-swap").click(
              function(){this.src = this.src.replace("_1","_2");},
              function(){this.src = this.src.replace("_2","_3");},
    		  function(){this.src = this.src.replace("_3","_4");},
    		  function(){this.src = this.src.replace("_4","_5");},
              function(){this.src = this.src.replace("_5","_1");
         });
    });
    </script>
    • Hi,

      Click doesnt quite work like hover where you can have the mouse over and mouse out functions.

      I would suggest using something like:

      jQuery(function(){
           var c=1, x=1;
          $(".img-swap").click(function(){
              c = x == 5 ? -1 : c;
      	c = x == 1 ? 1 : c;
              y = x + c;
              this.src = this.src.replace("_"+x,"_"+y);
      	x = y;
          });
      });
      

      Change the “5″ to whatever number of images you want to use. The above code will sequentially increase the image number until 5 and then descend back to 1

  • [...] and “my_icon_off.png”. I find this version a lot simpler to implement and debug. Source. This entry was posted in General. Bookmark the permalink. ← Wordress: Using custom [...]

  • Thanks for your reply. Yes, I am using image sprite.

    Here is the CSS for the single image sprite

    .close_win {
    	 position: absolute;
    	 left: 280px;
    	 top: 256px;
    	 width: 26px;
    	 height: 13px;
    	 background: url(../images/modal-close-icon.png) 0 0 no-repeat;
    }

    Here’s the jQuery where I tried using two images, but I don’t know to write it for the One image. (The code below didn’t work, I’m doing something wrong. I tried

    [/toggle

    ” as well, nothing. But I don’t want to use two images anyway.)

    $(document).ready(function(){
    	$(".close_win").hover(function() {
    		$(this).attr("src","modal-close-icon_off.png");
    			}, function() {
    		$(this).attr("src","modal-close-icon_on.png");
     });
    
    }); 

    Here’s my HTML:

     <h2 class="nf_h2822">BOOKS AVAILABLE&nbsp;&nbsp;&nbsp;<a id="popupClose" class="close_win"><!--<span ></span> --></a></h2>
    

    Since I’m just learning this and I know I’m missing something probably simple, but would you mind revising/rewriting/deleting the code above so that it will work?

    Thank you
    Chris

  • Hi, I’m very new to jQuery. I am using one image containing two states side-by-side, not two images. The image is a simple “X” in a box. The background of the two states are different colors for the hover effect. The image size is 26×13 (again two small “X” boxes horizontal to each other) How do I get the swap/hover effect to work? I think I would have to target the location of the second image, but I’m not sure. It’s something like sliding doors, where you use one image, but I’m not understanding how to use hover/swap….

    The image is within an anchor tag since it closes a modal box onClick. Thanks!!!

    • Hi,

      Animate the image using a top margin of -13px and then animate back to a margin of zero.

      If you are using this method though with an image sprite you dont need CSS and are better just adding the image as a background image and change the background position by 13px on hover.

  • this is awesome. works like a charm — though, is there an easy way to add an effect/transition between hover states? like a nice, soft fade?

    • Hi,

      Unfortunately using this code its not possible to fade in and fade out at the same time since there is only one image. The closest I have come so far is to just fade out then fade back in:

      jQuery Demo: Image Swap Crossover Fade

  • Maybe this is obvious to others, but I’m having a time making this work, because I don’t know where to put the image-on html code. I’m using Wordpress. I put the image-off html on the page, and I tried to put image-on code there too. Nothing. Then I put it in CSS…still nothing. The code looks so neat and simple – I’d really like to use it.

    Thanks for any help.

    • Hi,

      What is the code that you inserted into the page?

      There should be just the jquery code, which you can add to the header.php file and then the images, which have class “img-swap” and end with _off

  • Thanks. Worked perfectly.

  • This is the best jQuery image-swap I’ve found so far. Thank you!

    • Glad it helped Caleb

  • This is great, however what I’m trying to do is make it so on hover the class of a div gets changed to a display of none. This way, there’s 4 buttons and on hover of each a ‘description’ gets swapped out, only displaying one at a time. I’m sure it’s simple, but I’m very new to jQuery

    • Hi Bill,

      If you want to change the CSS class of the div tags you can use the following:

      $(".div").hover(function(){
          $(this).toggleClass('hover');
      });
      

      Where “.div” is the class of your div tags and “hover” is the CSS class that you want to add – See demo

  • [...] Quick and Easy jQuery Image Swap function offers a very simple way of implementing image change on hover for buttons, links, etc [...]

  • Thanks for reply. I already tried that, on various selectors related to image, but its not working. : /

  • Hello,

    Very nice script and most solid swap image solution that I came across – thank you!
    I am new to jQuery, and have trouble to implement this function to Galleriffic image gallery: Displayed image HTML is dynamically produced so I am uncertain where in code to apply “img-swap” class? Any tips would be appreciated? Thank you!

    • Hi,

      Not quite sure how you want to apply it to Galleriffic but you could change the selector for the hover function to select the Gallerific images – e.g. $(’.image-wrapper a img’)

  • ty. i think there is a mistake: not – jQuery(function(){ but – $(function(){

    • $ is a shortcut for “jQuery” so it will make no difference to the code. One reason you may want to use jQuery is if you are using other javascript libraries on your website, which also use the $ shortcut – e.g. prototype

  • [...] thanks to Design Chemical, click on the link to see their example. « BulkLoader and [...]

Leave a comment

To add code to your comments wrap the code text in [text][/text] tags