Using jquery swapimage

Posted in Ajax Tutorial & Tips
0 comments

jQuery is one power toolkit, jquery swapimage it's easy way to used and flaxible. 

jquery constitutes one of library from jquery code project for over detailnya hits project this can be seen at (code is jquery's Google). on tutorial this time I will try to work through how to utilize jquery swapimage. but previously lets we see many abilities from jquery swapimage in mengelolah images's swap.

Images Swap jQuery

- Images swap on Mouse Over
- Images swap on Click
- Images swap on Doble Click
- Images swap on single click but not be restore images
- Images Disjoint rollovers

Basic Usage

Step 1: Inlude jQuery javascript in <head>

  1. <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
  2.         <script type="text/javascript" src="jquery.metadata.min.js"></script>
  3.         <script type="text/javascript" src="jquery.swapimage.min.js"></script>

Step 2 : Call Function after tag <body>

  1. <script type="text/javascript">
  2.         $.swapImage(".swapImage");
  3.         $.swapImage(".swapImageClick", true, true, "click");
  4.         $.swapImage(".swapImageDoubleClick", true, true, "dblclick");
  5.         $.swapImage(".swapImageSingleClick", true, false, "click");
  6.         $.swapImage(".swapImageDisjoint");
  7. </script>

Step 3 : Add your Images

  1. <img class="swapImage {src: ‘images/2.gif’}" src="images/1.gif" alt="" /> (Image will change if mouse on over)
  2. <img class="swapImageClick {src: ‘images/2.gif’}" src="images/1.gif" alt="" /> (Image will change if mouse on click)
  3. <img class="swapImageDoubleClick {src: ‘images/2.gif’}" src="images/1.gif" alt="" />(Image will change if mouse on Doble Click)
  4. <img class="swapImageSingleClick {src: ‘images/2.gif’}" src="images/1.gif" alt="" /> (Image will change if mouse on Doble Click but image is not be restore)
  5. <h3>Disjoint rollovers 1</h3>
  6. <img id="i1" class="swapImageDisjoint {src: ‘images/a.gif’, sin: ['#i2','#i3','#i4'], sout: ['#i2','#i3','#i4'] }" src="images/1.gif" alt="" />
  7. <img id="i2" class="swapImageDisjoint {src: ‘images/b.gif’, sin: ['#i1','#i3','#i4'], sout: ['#i1','#i3','#i4'] }" src="images/2.gif" alt="" />
  8. <img id="i3" class="swapImageDisjoint {src: ‘images/c.gif’, sin: ['#i1','#i2','#i4'], sout: ['#i1','#i2','#i4'] }" src="images/3.gif" alt="" />
  9. <img id="i4" class="swapImageDisjoint {src: ‘images/d.gif’, sin: ['#i1','#i2','#i3'], sout: ['#i1','#i2','#i3'] }" src="images/4.gif" alt="" />
  10. <h3>Disjoint rollovers 2</h3>
  11. <p><img id="main" src="images/blank.gif" border="1" alt="" /></p>
  12. <img class="swapImageDisjoint { sin: ['#main:images/a.gif'], sout: ['#main:images/blank.gif'] }" src="images/1.gif" alt="" />
  13. <img class="swapImageDisjoint { sin: ['#main:images/b.gif'], sout: ['#main:images/blank.gif'] }" src="images/2.gif" alt="" />
  14. <img class="swapImageDisjoint { sin: ['#main:images/c.gif'], sout: ['#main:images/blank.gif'] }" src="images/3.gif" alt="" />
  15. <img class="swapImageDisjoint { sin: ['#main:images/d.gif'], sout: ['#main:images/blank.gif'] }" src="images/4.gif" alt="" />

For using jquery function you can change class name on your images.

For live demo you can see here : jquery-swapimages-demo

Download file here : jquery-swapimage-package-1.0.4.zip

Posted by admin   @   8 October 2009
0 comments
Tags : ,

Related Posts

0 Comments
Add Comment

No comments yet. Be the first to leave a comment !
Leave a Comment

Name

Email

Website

Previous Post
« Create submit form using Ajax jQuery Next Post
Open Source CMS Award 2009 »

Categories

Comments

Recent Posts

Recent Posts
Archives
Translator
English flagItalian flagKorean flagChinese (Simplified) flagChinese (Traditional) flagPortuguese flagGerman flagFrench flag
Spanish flagJapanese flagArabic flagRussian flagGreek flagDutch flagBulgarian flagCzech flag
Croat flagDanish flagFinnish flagHindi flagPolish flagRumanian flagSwedish flagNorwegian flag
Filipino flagHebrew flagIndonesian flagLatvian flagLithuanian flagSerbian flagSlovak flagSlovenian flag
Ukrainian flagVietnamese flagAlbanian flagEstonian flagMaltese flagThai flagTurkish flagHungarian flag
By N2H
Tags
Powered by Wordpress   |   Lunated designed by ZenVerse
Top Footer