Swap image with jQuery
JavaScript PHP
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
example
LICENSE
README.md
jquery.swapimage.js

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