Interface Elements for jQuery has a fisheye menu Javascript application.
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="interface.js"></script> <style type="text/css" media="all"> * { margin: 0; padding: 0; } body { background: #fff; height: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 12px; } .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; */ border: solid medium white; /* margin: 5px auto 5px auto; */ width: 100%; } .fisheyeItem2 img { border: none; margin: 5px auto 0 auto; width: 100%; } .fisheyeItem span, .fisheyeItem2 span { display: none; position: absolute; } .fisheyeContainter { background-color: white; height: 50px; width: 200px; left: 500px; position: absolute; } #fisheye2 { position: absolute; width: 100%; bottom: 0px; } </style> <div id="fisheye" class="fisheye"> <div class="fisheyeContainter"> <a href="javascript: alert('You clicked Daniels');" class="fisheyeItem"> <img src="daniels.jpeg" width="30" /> <span style="background-color: white">Daniels</span></a> <a href="javascript: alert('You clicked Homer')" class="fisheyeItem"> <img src="homer.jpeg" width="30" /> <span style="background-color: white">Homer</span></a> <a href="javascript: alert('You clicked McDowell')" class="fisheyeItem"> <img src="McDowell.jpeg" width="30" /> <span style="background-color: white">McDowell</span></a> <a href="javascript: alert('You clicked Tuiasosopo')" class="fisheyeItem"> <img src="Tuiasosopo.jpeg" width="30" /> <span style="background-color: white">Tuiasosopo</span></a> </div> </div> <script type="text/javascript"> $(document).ready( function() { $('#fisheye').Fisheye( { maxWidth: 100, items: 'a', itemsText: 'span', container: '.fisheyeContainter', itemWidth: 40, proximity: 90, halign : 'center' } ) } ); </script>