Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Swap image with jQuery
JavaScript PHP
Branch: master

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

Something went wrong with that request. Please try again.