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" />
--------------------------------------------------------------------------------
Documentions and demo
Please view the source code of this link: http://labs.xddnet.com/jquery-swapimage/example/example.html
Load balance : Server 05
