I thought i would just break down this script so that you can all use them in your websites. They are not only a benefit to Human Computer Interaction, but they also look pretty good.
First of all you need to create the menu.
<div class="fisheyeContainter">
<a href="http://www.facebook.com" class="fisheyeItem2"><img src="http://home.cfproject.co.uk/Images/FaceBook-128x128.png" width="128" /><span>Facebook</span></a>
<a href="http://www.google.co.uk" class="fisheyeItem2"><img src="http://home.cfproject.co.uk/Images/Google-128x128.png" width="128" /><span>Google</span></a>
<a href="http://www.youtube.com" class="fisheyeItem2"><img src="http://home.cfproject.co.uk/Images/Youtube-128x128.png" width="128" /><span>Youtube</span></a>
</div>
</div>
This is just a series of nested <div> tags.
They we addd the css to make the menu look presentable.
.fisheye{
text-align: center;
height: 50px;
position: relative;
}
a.fisheyeItem
{
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
top: 0;
}
a.fisheyeItem2
{
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
bottom: 0;
}
.fisheyeItem img
{
border: none;
margin: 0 auto 5px auto;
width: 100%;
}
.fisheyeItem2 img
{
border: none;
margin: 5px auto 0 auto;
width: 100%;
}
.fisheyeItem span,
.fisheyeItem2 span
{
display: none;
positon: absolute;
}
.fisheyeContainter
{
height: 50px;
width: 500px;
left: 0px;
position: absolute;
}
#fisheye2
{
position: absolute;
width: 98%;
bottom: 0px;
}
</style>
Now the menu looks presentable we need to add a script at the bottom of the page that will call functions in a javascript file when users hover near the icons.
$(document).ready(
function()
{
$('#fisheye2').Fisheye(
{
maxWidth: 70,
items: 'a',
itemsText: 'span',
container: '.fisheyeContainter',
itemWidth: 60,
proximity: 90,
alignment : 'left',
valign: 'center',
halign : 'center'
}
)
}
);
</script>
Now all we need to do is include the two javascript files at the top of the page. This script can be used in any language as it is javascript based, all you need to do is include the two javescript files.
<script type="text/javascript" src="/ColdfusionSamples/Fisheye/js/interface.js"></script>
Here is an example of the finished script
discuss this topic to forum
