Skip to content
Swap image with jQuery
JavaScript PHP
Find file
Latest commit 416efe2 Feb 23, 2013 @tszming Remove demo link
Failed to load latest commit information.
example Initial commit Jun 4, 2011
LICENSE Updated License Jun 4, 2011
README.md Remove demo link Feb 23, 2013
jquery.swapimage.js Initial commit Jun 4, 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.