Dojo fisheye effect based on image using dojo library

This example is a fisheye effect based on Dojo library. It's easy to setup after learn a few things about djConfig parameters. By using this source code you can create a very good fisheye effect on images, when move the mouse then the image glow and run fluent. Try This one:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<base href="http://www.jspservlettutorial.info/">

<style type="text/css">

body {color: white;background: #15598H;}

a { color: white; }

</style>

<title>DOJO FisheyeList Widget Example</title>



<style type="text/css">

img, div { behavior: url(css/iepngfix.htc) }

</style>

<script type="text/javascript">

var djConfig = {

isDebug: true,

baseScriptUri: "../"

};

</script>

<script type="text/javascript" src="javascript/dojo.js"></script>



<style type="text/css">

.dojoHtmlFisheyeListBar {

margin: 0 auto;

text-align: center;

}

.outerbar {

text-align: center;

position: absolute;

left: 0px;

top: 0px;

width: 100%;

}

body {

font-family: Arial, Helvetica, sans-serif;

padding: 0;

margin: 0;

}

.page {

padding: 40px 20px 20px 20px;

}



</style>

</head>

<body>



<div class="outerbar">



<script type="text/javascript">

dojo.require("dojo.widget.*");

</script>



<script>

function load_app(id){

alert('Icon '+id+' was clicked');

}

</script>



<center>

<div dojoType="FisheyeList"

itemWidth="50" itemHeight="50"

itemMaxWidth="100" itemMaxHeight="100"

orientation="horizontal"

effectUnits="2"

itemPadding="10"

attachEdge="top"

labelEdge="bottom"

enableCrappySvgSupport="false"

>



<div dojoType="FisheyeListItem" onClick="load_app(1);"

iconsrc="images/icon1.png" caption="image1">

</div>



<div dojoType="FisheyeListItem" onClick="load_app(2);"

iconsrc="images/icon2.png" caption="image2">

</div>



<div dojoType="FisheyeListItem" onClick="load_app(3);"

iconsrc="images/icon3.png" caption="image3">

</div>



<div dojoType="FisheyeListItem" onClick="load_app(4);"

iconsrc="images/icon4.png" caption="image4">

</div>



<div dojoType="FisheyeListItem" onClick="load_app(5);"

iconsrc="images/icon5.png" caption="image5">

</div>



<div dojoType="FisheyeListItem" onClick="load_app(6);"

iconsrc="images/icon6.png" caption="image6" >

</div>

</div>



</div>



<div class="page">

<p>DOJO Example, DOJO Tutorial, DOJO Examples, DOJO Tutorials, DOJO Toolkit Example, DIJIT Example</p>

</div>

</center>



</body>

</html>