With the look from the dock found on the MAC OSX operating system being so
popular, I decided to make a javascript version. It's basically another way to
display your navigation.
The magnification effect works in Internet Explorer 4+, Netscape 6+, and
Mozilla. The effect is a bit smoother in Internet Explorer browsers though.
Netscape 4.x browsers, however, will simply show the menu at the specified
default size without the magnification effect.
When you hover over an image, a description text is displayed to the right of
the links. This provides a way to help describe where the link goes. The script
also allows a default text to be used when the links are not hovered on. This
can be turned off for all links via a variable in the script. Plus, you can use
an empty string for links that you do not want any descriptive text under. The
color, size, style, and weight of this text (when enabled) is controlled by a
style-sheet string variable in the script. Because the link images are arranged
in a vertical formation, the text is displayed in this way also. As a result,
this text is a little more difficult to read, so I suggest keeping it short and
simple. Be careful not to use text that is too long or it might get clipped or
make the page content shift.
When a browser is used that supports the magnification effect, you will notice
the vertical and horizontal space required is somewhat wider than the menu
normally needs. This is to give room when the icons are magnified so as not to
cause the rest of your page's content to shift.
Due to the way browsers resize images, you'll notice that as the icons are
magnified, there will be some "jaggies" on any diagonal edges or arcs. To
minimize this, try to use images that have vertical or horizontal lines only.
Slightly blurring or anti-aliasing the image sometimes helps too. Because the
images seem to scale down better than scale up, I would recommend making the
images themselves as big as the largest magnification value.
The images themselves should be created to have perfectly square dimensions
(100x100, 30x30, etc). If not, they will appear incorrect when using the menu.
To add spaces between each icon, simply add a bit of whitespace on the right and
left edges of your images. The menu will let you use pretty much any type of
browser supported graphic (GIF, JPG, PNG, etc). Incidentally, the images used
above are just really simple PaintShop Pro pre-built graphics.
This script uses the
window.onload and the
document.onmousemove event handlers. If you have other scripts that also
use these event handlers, you'll have to combine them somehow. See the tutorials
section on this site for more details on this.
To install the menu in your page, follow the instructions below.