A few weeks ago I spent a considerable amount of time troubleshooting various JavaScript conflicts in a WordPress site I was working on for my employer. Part of the page design included a neat JavaScript-based fisheye navigation menu. I was happy with the icons and their behavior on the page until we activated a featured content plugin. That plugin caused all kinds of strange behavior on the site...

After much frustration turning plugins on and off then refreshing the pages I decided to scrap unnecessary JavaScript [the cute stuff I liked most] on the page. As things were removed the site began to behave again. Alas, I really wanted that fisheye navigation menu...

I hatched a simple plan to produce a similar effect minus freakish js conflicts. I decided to use an image map styled with CSS. I didn't have a lot of time so I turned to my favorite image map generator at image-maps.com. I created the background graphic with all the pretty navigation icons and created an image map using their online tool. You'll need use some specific settings in the Advanced section. The roll over image should be larger than the image you used on the background. This creates the fisheye effect in the menu.
Image-Maps.com Advanced Settings

Here's the background I used for this demo:

After I generated the image map at image-maps.com I saved the code and edited it in my favorite code editor .

See the css fisheye menu in action. This version will load a little slow since the images are hosted at flickr.com to save bandwidth here. A link to the demo, source files, and icons are listed below.

The Goods



Icons:PRACTIKA by Smashing Magazine
Layered Gimp File for this demo: layered file
Source Files: css fisheye menu source
Also available at the tinym Project Support Wiki: downloads.tinym.com