Vertical LinkDock

The effect makes the images which are sorted with vertical and they'll enlarge when user move mouse on it.




Over 2000+ free Javascript
at JavaScriptBank.com Website

Sampled by JavaScriptBank.com
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.



1: Copy and paste the following HTML in the BODY section of your page wherever you want the menu to appear:
Select all...




2: In the vlinkdock.js file, there are several settings near the top for you to adjust. You will also be configuring your menu items here. Just follow the directions in the js file.