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.
New! When you hover over an image, a description text is displayed in the
center under 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.
When a browser is used that supports the magnification effect, you will notice
the 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 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.
Sorry, only the horizontal menu style is supported at this time.
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.