Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
65 lines (55 sloc) 2.7 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Examples</title>
<style type="text/css">
body {font-family:arial}
h3 {background-color:#444;color:white;padding:3px}
img {cursor:hand;cursor:pointer}
</style>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="jquery.metadata.min.js"></script>
<script type="text/javascript" src="jquery.swapimage.min.js"></script>
</head>
<body>
<script type="text/javascript">
$.swapImage(".swapImage");
$.swapImage(".swapImageClick", true, true, "click");
$.swapImage(".swapImageDoubleClick", true, true, "dblclick");
$.swapImage(".swapImageSingleClick", true, false, "click");
$.swapImage(".swapImageDisjoint");
</script>
<div>
<h3>Mouse over</h3>
<img class="swapImage {src: 'images/2.gif'}" src="images/1.gif" alt="" />
</div>
<div>
<h3>Click</h3>
<img class="swapImageClick {src: 'images/2.gif'}" src="images/1.gif" alt="" />
</div>
<div>
<h3>Double Click</h3>
<img class="swapImageDoubleClick {src: 'images/2.gif'}" src="images/1.gif" alt="" />
</div>
<div>
<h3>Single Click, no restore</h3>
<img class="swapImageSingleClick {src: 'images/2.gif'}" src="images/1.gif" alt="" />
</div>
<div>
<h3>Disjoint rollovers 1</h3>
<img id="i1" class="swapImageDisjoint {src: 'images/a.gif', sin: ['#i2','#i3','#i4'], sout: ['#i2','#i3','#i4'] }" src="images/1.gif" alt="" />
<img id="i2" class="swapImageDisjoint {src: 'images/b.gif', sin: ['#i1','#i3','#i4'], sout: ['#i1','#i3','#i4'] }" src="images/2.gif" alt="" />
<img id="i3" class="swapImageDisjoint {src: 'images/c.gif', sin: ['#i1','#i2','#i4'], sout: ['#i1','#i2','#i4'] }" src="images/3.gif" alt="" />
<img id="i4" class="swapImageDisjoint {src: 'images/d.gif', sin: ['#i1','#i2','#i3'], sout: ['#i1','#i2','#i3'] }" src="images/4.gif" alt="" />
</div>
<div>
<h3>Disjoint rollovers 2</h3>
<p><img id="main" src="images/blank.gif" border="1" alt="" /></p>
<img class="swapImageDisjoint { sin: ['#main:images/a.gif'], sout: ['#main:images/blank.gif'] }" src="images/1.gif" alt="" />
<img class="swapImageDisjoint { sin: ['#main:images/b.gif'], sout: ['#main:images/blank.gif'] }" src="images/2.gif" alt="" />
<img class="swapImageDisjoint { sin: ['#main:images/c.gif'], sout: ['#main:images/blank.gif'] }" src="images/3.gif" alt="" />
<img class="swapImageDisjoint { sin: ['#main:images/d.gif'], sout: ['#main:images/blank.gif'] }" src="images/4.gif" alt="" />
</div>
</body>
</html>