I’ve always been a fan of Macintosh’s Dock. Something about that sleek mouseover effect gets me every time. Recently, I was working on a project that needed a minimally invasive similar effect on a website. During the course of getting it ready, I came across a number of scripts that attempted this very thing. Some of them were good, some weren’t. Fisheye Menu by Marc Grabanski is so easy to install that I thought I’d share it here.
The script is open source, though I’ve only made minimal tweaks to it. All credit and blame go solely to Marc Grabanski. The only thing I’ve added is a single line of code that changes the mouse cursor to the “hand” mode on mouseover (to look like a link). The script’s mouseover effects aren’t the most spectacular, but they’re not bad. They are slightly choppy, but I believe they are good enough for a live website. Here I’ll give you examples of the script, tell you how to get it running on your website, and then let you decide if it’s any good. I’ve geared this guide towards beginners.
Fisheye Menu
Presented by Simply-Basic.com
Coded by Marc Grabanski
URL: http://marcgrabanski.com/code/fisheye-menu/
Download: .zip file (16.4 kb)
The Fisheye menu is a very easy script to implement. All you need is the javascript file, a CSS template, and your images. Begin by downloading the zip file. The only difference between the version presented here and the version that Marc created is that I added one simple line of javascript that changes the cursor to the “hand” mode on mouseover. You can see a live preview, minus this one change, by viewing the offical code page.
The Basics
Installation
Begin by uploading the javascript file, the CSS file, and your images to your web server. It is important that all of the images in the image folder remain in the same folder. Then, add the following code somewhere in between your <head> </head> tags.
Code:
1 2 | <link rel="stylesheet" type="text/css" href="http://YourDomainHere/fisheye-menu.css" /> <script src="http://YourDomainHere/fisheye.js" type='text/javascript'></script> |
Of course, you would need to change "http://YourDomainHere/..." with the location of each specific file. These lines of code link your page to the actual javascript code and the accompanied CSS file.
Now you can add the actual menu to your page. The code for your menu should follow the format below. I suggest you copy and paste the code and then adjust it to your needs.
Code:
1 2 3 4 5 6 7 8 9 10 | <div><ul id="fisheye_menu"> <li><a href="#1"><img src="http://YourWebsite/icon.gif" alt="image description" /><span>Icon 1</span></a></li> <li><a href="#2"><img src="http://YourWebsite/icon2.gif" alt="image description" /><span>Icon 2</span></a></li> <li><a href="#3"><img src="http://YourWebsite/icon.gif" alt="image description" /><span>Icon 3</span></a></li> <li><a href="#4"><img src="http://YourWebsite/icon2.gif" alt="image description" /><span>Icon 4</span></a></li> <li><a href="#5"><img src="http://YourWebsite/icon.gif" alt="image description" /><span>Icon 5</span></a></li> <li><a href="#6"><img src="http://YourWebsite/icon2.gif" alt="image description" /><span>Icon 6</span></a></li> </ul></div> |
Each <li> </li> represents one icon in your menu dock. To change the link for each icon, replace the contents of the quotation marks in <a href="#..."> with your desired URL. Also, make sure that your change <img src="http://YourWebsite/icon..." to reflect the actual location of your icon. Make sure you link to the large image, not the one labeled “_small”. I will explain the meaning of this below. To change the label that accompanies the icon on mouseover, simply alter the text in between the <span> </span> code of each line.
If you are using the icons that come with the sample file, that’s really all you need to know to get going. However, if you are going to change the size of your icons or the file extensions of your icon images, I suggest you keep reading.
Tweaking Your Menu
If you wish to change the size of the menu icons or the file extensions (to allow for transparency, for example) you are going to need to tweak the javascript code itself. To do this, open fisheye.js in your HTML or text editor. The very first few lines of code look like the following:
Code:
1 2 3 4 | var fisheyemenu = { startSize : 55, endSize : 88, imgType : ".gif", |
Each icon on your Fisheye menu is actually two images, a large one and a small one. startSize : 55 means that the resting menu icon, the smaller of your images, is 55×55 pixels. Thus, your icons must be square. To alter the resting size of your icons, simply adjust this number to your liking. For the best quality, scale your images and the startSize number so they are the same. Similarly, endSize refers to the larger of you icon images, or the icon when your mouse is over it and it is enlarged. Adjust this number so it is the same as your larger image files. Using PhotoShop or Paint.net will allow you to scale your images to your desired size.
To use a different icon format, simply change imgType : ".gif" to your desired file format. If you wish to use PNG icon files, simply change it to say imgType : ".png".
It is also important to properly name your icon files. After downloading or creating your two sizes of icon files (large and small), name the large icon file anything you like. If you named it “contactme.png” your MUST name the corresponding smaller icon file “contactme_small.png”. The smaller image must have "_small" appended to the end of its name, but before the extension.
Wrap It Up
I believe that should do it. Don’t forget that you can change the font and background color of the popup text by playing around with the “fisheye-menu.css” file. If you have any questions about installing the script or getting your icons to work, feel free to post a comment here. However, if you have technical problems with the script itself, head over to the code’s official site.
Nice post, I think I’ll add it to the project page.
Thanks for stopping by Marc. The script and the link are appreciated!
hello frnd
i hav been facing a problem that using this code with internet explorer 6 , the images ate not visible in the fisheye but as the panel is working .. pls help me ..
harshmittal
harsh,
I’ve forwared your comment to Marc, since it sounds like a coding problem and he was the one who did all the coding for this script. I gave him your email as well, though I’m sure it wouldn’t hurt for you to follow up with him. The scipts website can be found here. Thanks for the possible heads up.
I’ve placed my images within a folder named ‘images’. Do I need to change something in the javascript so it can find the _small versions?
No, it should automatically find the
_smallversions, as long as the rest of its name is exactly the same as the large version (including the extension). Also, make sure you point to the correct location of your image when setting up your menu’s HTML. This is what I wrote above “Also, make sure that your change <img src="http://YourWebsite/icon..." to reflect the actual location of your icon.. Also, the large and_smallimages should be in the same folder. Does that help?Yes that helps! Thanks for the quick reply. I’ve got everything set up correctly. I noticed that it works without even creating the _small images, so I wondered if it was even finding them once I added them. I don’t know javascript, so I wasn’t sure if it was path dependent like html and css are.
If you don’t have the
_smallimages it will down convert your larger image. You’ll most likely notice the quality drop a little if you do it that way. If you do include it the javascript finds it (if its in the same same location). Glad I could help!How can the span be eliminated?
@Ron
spancan’t be eliminated per se, but you can change it to any tag you want. If you open fisheye.js and search (ctrl F) forSPAN, you’ll see three instances. You can change this to most any tag, with in reason of course. I tested it out using the paragraph tag (p) and it worked fine. Don’t forget, if you change the javascript code, you also have to change the code in your HTML document and the styling in the CSS document to reflect your changes.If you are trying to remove the text entirely, I’m not sure it can be done easily. But Mark coded it and he would be the better person to ask. You can find his website here. Does that help?
this is simply awesome
Hi,
I’ve been trying to get the images to zoom-up (i.e. more like the os-x dock).
But since I’m quite new at this, finding the code to make the images zoom-up isn’t that simple.
Thanks in advance for the pointers.
Kind regards,
René
@René: Thanks for stopping by! I hope you find this script tutorial helpful! The code presented here has a fisheye effect, which is similar to the OS-dock. There are other scripts that are more realistic, however. Webappers did a nice write up about some Fisheye scripts here, which actually includes a link to this post. If you have any detailed questions, feel free to use the contact link in the top navigation to send me an email. Thanks for reading!
@John, the script you wrote (as are the linked articles) is very insightful, I was really amazed that a small script could indeed present such nifty effects. Fiddeling about with the script was a great learning experience.
Thanks (also for the provided links).
Kind Regards,
René
Is there a way to make this go vertical?
@mwsasser: Unfortunetly it doesn’t look like it would be very easy. Making this go vertical would require quite a few coding changes. As I wasn’t the one who made this script, it’d be better to contact Mark, as he did the original coding. Sorry I couldn’t be of more help! If you do figure something out, feel free to post your changes and I’ll add them to the tutorial, crediting you, of course.
Thanks for the great script and explanation.
I have one question that I hope someone with better knowledge than me can explain. I want the dock on the exact center of a div 100% wide, but the dock floats to the left of the div no matter what I do. I tried to tweak the CSS but I can’t get this without breakign someting.
Thanks,
John
@John D. Try adding the following CSS to your CSS template:
Then just surround the menu code with the div id=”center”. Don’t forget the less than and great then signs (I couldn’t get them to show up in the comments). Also, adjust the width pixels to fit your icons. Let me know if that helps, it’s just something I thought might work quick.
Thanks John,
I already tried that, but the problem is that the div gets centered, but the dock floats to the left o of that div, so the div is ok but the dock don’t…
Regards,
John
Hm, it’d be easier for me to help if I say the exact css and html you are working with before and after the dock. When I tried the code I posted above, the dock moved to the center with the div. I only tried it on Opera though, I didn’t verify it in other browsers. You are welcome to use the contact form (in the top menu) to send me an email with your HTML and CSS and I’ll give it a look. Or if you are working on a live webage you can send the link.
I tried emailing the account you listed with your comment but it came back undeliverable.
Thanks so much for this great tutorial. I’m having some trouble with mine- when I made it live on the web, the images need to be moused over before initializing. Is there something I can add to the js to have them initialize on page load?
@Sarah Thanks for stopping by, I’m glad you enjoyed the tutorial! I took a look at your website and this is my suggestion. You’ve linked your menu to the images marked
_small. Try linking to the larger image. The javascript is set to automatically append the_smallto whatever image you link to. Also, make sure that your images are the correct size. Your start and end sizes listed in the javascript are 88, and 110, repectively. This means your images should be 88×88 and 110×110. You can use horizontal buttons like you have, just use png files with a transparent background above and below.Let me know if that works! If not, I’ll take another look at it.
Thanks, that did the trick!
Hey John, I’ve had a sudden increase in requests for mods to the fisheye menu, and I’m swamped right now but I’ve definately heard everyone’s requests and will do what I can to make sure this script gets updated. Thanks everyone for the feedback and thanks John for giving users more information about the script!
What would you all think if I took advantage of the jQuery effects and made this script into a jQuery plugin? Do people use this script because it doesn’t require a library?
@Marc Always nice to hear from you Marc! I’m personally not adverse to using library scripts at all, though I’ve had a few people send me email commenting about how they liked the small script size.
Personally, I’d love to see an update. I think a lot of people don’t mind using library scripts when it means better functionality. Keep me posted on any developments.
Good menu , my png icon set : http://noertz.blogspot.com/2008/02/webmasterlar-iin-ucretsiz-png-icon.html
noertz’s last blog post..Profesyonel ve Ücretsiz CSS Tema Arşivi
Hi there,
I got the menu to work with one row of images using color jpg thumbs,
i then put a second menu beneath it but the second one just displayes the large thumbs,
do you know why i cannot get the second menu to work?
thanks
@maxwell Excellent question. I tried adding two menus to the same page and got the same problem. The bug seems to be a problem in the actual javascript code and the way it handles an object that is repeated on a page. As I didn’t write the actual code for this, I would recommend contacting the author, Marc Grabanski, and seeing what he can come up with.
Leave your results in the comments for others to see if you are able to come up with a fix. I’ll keep looking into it when I have some spare time too. Thanks for the questions!
I have installed the plugin and everthing works fine apart from the fact that each time you load the page the images are displayed big size and then they come back to the initial spot.
Is there a way to make the images load without being enlarge?
Thanks
Is it possible to have multiple instances of the fisheye dock on the same page? I tried duplicating the dock on the same page and only one instance of the dock would work.
@Adam Not that I’ve seen. I tried using a preloading script but nothing seemed to make an improvement. Like I’ve told others though, I didn’t code this script, I just showed how to install it and get it working, so the author would be a better source then I. Sorry!
@Ralph See comment #29
Hi John, It’s unfortunate I came here late but I’m willing to test this out to some of my websites.
Cheers,
Dulce
WordPress Themes Gallery’s last blog post..Probama
Hello !
Transparent PNG’s with IE6 don’t work with this menu.
I tested with htc, js and css, without success.
@Tay Correct. If my memory’s correct that an inherit problem with IE6. It doesn’t support transparent PNGs period. Although maybe not the best choice, I stopped designing for IE6 sometime ago.
hi, great tutorial, this menu is awesome !!!! before i try to fix it in my website, i want to ask you if it will be easy to incorporate in a spip site?? i saw that each menu title is written and an image is linked to it… in spip, the titles of the menu are gotten from a token …
thanks :D
@Farishta Hmm, I’m not familiar with “spip” sites, so I can’t answer your question. Sorry!
never mind, thanks :D
hey, i manage to apply to the loop with the menu in my spip site … thanks a lot, it is really gorgeous ! i won’t forget to put your name in the credits and as soon as the website is finished i’ll give you the adress !!!!! :DD
How do I get the fisheye menu centered in an HTML page? as I have it now, I cannot get it of the left margin.
@Nick T Look at comment #19 and see if that helps. I’ll look into it more tomorrow and see what I can come up with.
This is so nearly exactly what i want. I’d like it so that:
1. The icons are centred so zoom outwards, rather than to the right. (ideally I’d like the bottom to stay stationery so just the top zooms up).
2. Transparent PNG
3. So that the positions of the icons do not move whilst one is in zoom.
I’ve been looking at ‘image zoom on rollover’ and have also come close - but they are unfortunately zooming in on an image which is already at 72dpi so making the quality a bit rubbish. Also finding they are having to use lots of tables and z-index to keep the things in order. I am not after the true fish-eye effect (where nearby icons are also effected) - just the single icon to zoom on rollover. I am happy to pay for some help if I get what I am after.
It’s cool and thanks for sharing!!! CB
Hi,
First thanks for tutorial. When I try icons do not enlarge when the mouse on. I am quite new that I dont know anything about js so looking forward to your help.
Thanks in advance.
Hi again,
I didnt understand the part “make sure that your change <img src=”http://YourWebsite/icon…” to reflect the actual location of your icon. Make sure you link to the large image, not the one labeled “_small”. I will explain the meaning of this below. To change the label that accompanies the icon on mouseover, simply alter the text in between the code of each line.” What should I change between tag and what to should I change?? Thank you.
You’ll need to change “http://YourWebsite.com/Icon…” to your actual image file. Thus if your image was located under an “images” folder, and your domain nambe was “example.com” you would change it to the following:
<img src="http://www.example.com/images/myimage.png..."And as I stated in the post, changing the text between the
spantags alters the pop-up description that appears with it.Because I didn’t write the script above and am merely presenting an installation tutorial, I’m going to close the comments on this post. If you have any questions about the script please visit the authors website and shoot him an email. The link to his homepage can be found towards the top of the post. Thanks guys!