Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Swap image with jQuery

branch: master
Octocat-spinner-32 example Initial commit June 04, 2011
Octocat-spinner-32 LICENSE Updated License June 04, 2011
Octocat-spinner-32 README.md Remove demo link February 23, 2013
Octocat-spinner-32 jquery.swapimage.js Initial commit June 04, 2011
README.md

Introduction

Swap image with jQuery, flexible and easy way.

  • For jQuery 1.2 to 1.6.1
  • A-Grade browsers support, and Google Chrome

YUI version now also available: https://github.com/tszming/yui-swapimage


Basic Usage

  1. Include the scripts required:

    <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
    <script type="text/javascript" src="jquery.metadata.min.js"></script>
    <script type="text/javascript" src="jquery.swapimage.min.js"></script>
    
  2. Enable the plugin (Refer to the example.html in the download package for more examples)

    <script type="text/javascript">
        $.swapImage(".swapImage");    
     </script>
    
    // Note: The above method call is equalivant to...
    
    $.swapImage(".swapImage", true, true, "mouseenter", "mouseleave");
    
    /*
        1st parameter: Images to be selected.
        2nd parameter: Preload the image or not, default = true.
        3rd parameter: Repeat the effect or not, default = true.
        4th parameter: Event for swap In, default = mouseenter.
        5th parameter: Event for swap Out, default = mouseleave.
    
        Valid events such as: mouseenter, mouseleave, click, dblclick.
    */
    
  3. Add your own images

    <img class="swapImage {src: 'images/2.gif'}" src="images/1.gif" />
    
  4. Done.


Advanced Usage

  1. Disjoint rollovers (1): When cursor is entering the image, beside itself, elements specified in sin array will swap by themselve; when cursor is leaving the image, those elements will restore.

    <img id="i1" class="swapImage {src: 'images/a.gif', sin: ['#i2','#i3'], sout: ['#i2','#i3'] }" src="images/1.gif" />
    <img id="i2" class="swapImage {src: 'images/b.gif', sin: ['#i1','#i3'], sout: ['#i1','#i3'] }" src="images/2.gif" />
    <img id="i3" class="swapImage {src: 'images/c.gif', sin: ['#i1','#i2'], sout: ['#i1','#i2'] }" src="images/3.gif" />
    
  2. Disjoint rollovers (2) : When cursor is entering the image, elements specified in sin array will load the image after the colon; when mouse is leaving the image, those image elements will be replaced again.

    <img id="main" src="images/blank.gif" />
    <img class="swapImage {sin: ['#main:images/a.gif'], sout: ['#main:images/blank.gif'] }" src="images/1.gif" />
    

License

Copyright (c) 2011 tszming (tszming@gmail.com)

Dual licensed under the MIT and GPL licenses: http://www.opensource.org/licenses/mit-license.php http://www.gnu.org/licenses/gpl.html

Something went wrong with that request. Please try again.