Link Box

Link Box

v1.0 - Feb 19, 2005
linkbox.zip (7k)

Link Box is a Dynamic HTML script that opens an information box when the mouse runs over a hyperlink. The Link Box pops up near the cursor position and can be used to display extra information about a link. Link Box is very easy to install and has the ability to change appearances dynamically.

Features:

Simple installation.

Fully customizable.

Dynamically change appearances.

Automatic loading.

Optional drop shadow effect.

Runs in all DHTML compatible browsers (including 4th generation).

* This script requires the Dynamic HTML scripting library dynLib. For more information about dynLib please visit the dynLib website.

Demonstration

Run your mouse over the following links and see different examples of the Link Box appear:

Link Box #1 - Standard.

Link Box #2 - Shadow removed.

Link Box #3 - Stationary.

Link Box #4 - Custom colors.

Link Box #5 - Custom colors & features.

Installation

1. Upload the files dynlib.js & linkbox.js then link them to your document as JavaScript include files. Add the following code between the <head> & </head> tags:

<script language="JavaScript" src="dynlib.js"></script>
<script language="JavaScript" src="linkbox.js"></script>

2. Call the openLinkBox() function using a hyperlink with the onmouseover event handler and the closeLinkBox() function using the onmouseout event handler. Add the following code within the body of your document:

<a href="myfile.html"
onmouseover="javascript:openLinkBox('My Message');"
onmouseout="javascript:closeLinkBox();">My Text</a>

Documentation

Function: openLinkBox()
Description: This function shows the Linkbox. It uses a number of arguments that specify the Link Box features. The first argument is the most important one, it specifies the message to be displayed in the Link Box. This message can be plain text or HTML. All of the remaining arguments specify other features about the Link Box and are optional with default settings defined in the configuration section of the file linkbox.js.

openLinkBox(MESSAGE,BGCOLOR,BORDERCOLOR,BORDERWIDTH,FONTCOLOR,FONTFACE,
FONTSIZE, BOXWIDTH,BOXPADDING,SHADOWVISIBLE,SHADOWCOLOR,TRACKMOUSE)

MESSAGE A string that specifies the message within the box. This can plain text or HTML.

BGCOLOR An optional string that specifies the background color.

BORDERCOLOR An optional string that specifies the border color.

BORDERWIDTH An optional number that specifies the border width.

FONTCOLOR An optional string that specifies the font color.

FONTFACE An optional string that specifies the font face or type.

FONTSIZE An optional string that specifies the font size.

BOXWIDTH An optional number that specifies the box width.

BOXPADDING An optional number that specifies the box padding.

SHADOWVISIBLE An optional boolean that specifies the drop shadow visibility.

SHADOWCOLOR An optional string that specifies the drop shadow color.

TRACKMOUSE An optional boolean that specifies the mouse tracking. If this is set to true the box will follow the mouse. If this is set to false the box will remain stationary after it has opened.

Function: closeLinkBox()
Description: This function hides the Linkbox. This function has no arguments.

closeLinkBox()

Source Code

linkbox.js (6k)

// =================================== // // Link Box // // v1.0 - Feb 19, 2005 // // ----------------------------------- // // Created by Lloyd Hassell // // Website: lloydhassell.brinkster.net // // Email: lloydhassell@hotmail.com // // =================================== // // INITIALIZATION: linkBox = new Object(); // CONFIGURATION: linkBox.bgColor = '#FFFFCC'; linkBox.borderColor = '#000000'; linkBox.borderWidth = 1; linkBox.fontColor = '#000000'; linkBox.fontFace = 'verdana,arial'; linkBox.fontSize = 1; linkBox.boxWidth = 200; linkBox.boxPadding = 3; linkBox.shadowVisible = true; linkBox.shadowColor = '#999999'; linkBox.trackMouse = true; linkBox.cursorOffsetX = 20; linkBox.cursorOffsetY = 0; linkBox.dropShadowOffsetX = 2; linkBox.dropShadowOffsetY = 2; linkBox.windowPadding = 2; linkBox.openDelay = 350; // MAIN: linkBox.documentLoaded = false; linkBox.boxLoaded = false; linkBox.boxActive = false; linkBox.openTimeout = null; linkBox.trackMouseTimeout = null; function documentLoaded() { linkBox.documentLoaded = true; } function loadLinkBox() { if (!linkBox.boxLoaded) { captureCursor(); linkBox.shadowLayerObj = addLayer('shadowBoxLayer'); setLayerOnTop(linkBox.shadowLayerObj); linkBox.boxLayerObj = addLayer('linkBoxLayer'); setLayerOnTop(linkBox.boxLayerObj); linkBox.boxLoaded = true; } } function openLinkBox(MESSAGE,BGCOLOR,BORDERCOLOR,BORDERWIDTH,FONTCOLOR,FONTFACE,FONTSIZE,BOXWIDTH,BOXPADDING,SHADOWVISIBLE,SHADOWCOLOR,TRACKMOUSE) { if (dyn && linkBox.documentLoaded) { if (!linkBox.boxLoaded) loadLinkBox(); if (linkBox.boxActive) hideLayer(linkBox.layerObj); var bgColor = (!isBlank(BGCOLOR)) ? BGCOLOR : linkBox.bgColor; var borderColor = (!isBlank(BORDERCOLOR)) ? BORDERCOLOR : linkBox.borderColor; var borderWidth = (!isBlank(BORDERWIDTH)) ? BORDERWIDTH : linkBox.borderWidth; var fontColor = (!isBlank(FONTCOLOR)) ? FONTCOLOR : linkBox.fontColor; var fontFace = (!isBlank(FONTFACE)) ? FONTFACE : linkBox.fontFace; var fontSize = (!isBlank(FONTSIZE)) ? FONTSIZE : linkBox.fontSize; var boxWidth = (!isBlank(BOXWIDTH)) ? BOXWIDTH : linkBox.boxWidth; var boxPadding = (!isBlank(BOXPADDING)) ? BOXPADDING : linkBox.boxPadding; linkBox.dropShadow = (!isBlank(SHADOWVISIBLE)) ? SHADOWVISIBLE : linkBox.shadowVisible; var shadowColor = (!isBlank(SHADOWCOLOR)) ? SHADOWCOLOR : linkBox.shadowColor; linkBox.mouseTracking = (!isBlank(TRACKMOUSE)) ? TRACKMOUSE : linkBox.trackMouse; var htmlStr = getTableTag(0,0,0,boxWidth) + '<tr>'; htmlStr += getTdTag('left','top','',borderColor); htmlStr += getTableTag(boxPadding,borderWidth,0,'100%') + '<tr>'; htmlStr += getTdTag('left','top','',bgColor); htmlStr += getFontTag(fontColor,fontFace,fontSize); htmlStr += MESSAGE; htmlStr += '</font></td></tr></table></td></tr></table>'; setLayerHTML(linkBox.boxLayerObj,htmlStr); setLayerSize(linkBox.boxLayerObj,boxWidth,''); if (linkBox.dropShadow) { var htmlStr = getTableTag(0,0,0,boxWidth) + '<tr>'; htmlStr += getTdTag('left','top','',shadowColor); htmlStr += getTableTag(boxPadding,borderWidth,0,'100%') + '<tr>'; htmlStr += getTdTag('left','top','',shadowColor); htmlStr += getFontTag(shadowColor,fontFace,fontSize); htmlStr += MESSAGE; htmlStr += '</font></td></tr></table></td></tr></table>'; setLayerHTML(linkBox.shadowLayerObj,htmlStr); setLayerSize(linkBox.shadowLayerObj,boxWidth,''); } linkBox.layerWidth = getLayerWidth(linkBox.boxLayerObj); linkBox.winWidth = getWinWidth(); linkBox.winHeight = getWinHeight(); linkBox.openTimeout = window.setTimeout('displayLinkBox()',linkBox.openDelay); } } function closeLinkBox() { if (dyn && linkBox.boxLoaded) { linkBox.boxActive = false; window.clearTimeout(linkBox.openTimeout); hideLayer(linkBox.shadowLayerObj); hideLayer(linkBox.boxLayerObj); } } function displayLinkBox() { if (linkBox.dropShadow) showLayer(linkBox.shadowLayerObj); showLayer(linkBox.boxLayerObj); linkBox.boxActive = true; updateLinkBoxPos(); } function updateLinkBoxPos() { if (linkBox.boxActive) { var posX = cursorWinX + linkBox.cursorOffsetX; if (posX + linkBox.layerWidth > linkBox.winWidth - linkBox.windowPadding) posX = cursorWinX - linkBox.layerWidth - linkBox.cursorOffsetX; if (posX < linkBox.windowPadding) posX = linkBox.windowPadding; posX += getDocScrollLeft(); posY = cursorWinY + linkBox.cursorOffsetY + getDocScrollTop(); if (linkBox.dropShadow) moveLayerTo(linkBox.shadowLayerObj,posX + linkBox.dropShadowOffsetX,posY + linkBox.dropShadowOffsetY); moveLayerTo(linkBox.boxLayerObj,posX,posY); if (linkBox.mouseTracking) linkBox.trackMouseTimeout = window.setTimeout('updateLinkBoxPos()',50); } } window.onload = documentLoaded;

Notes

With some modifications to this script you could change the position of the box to popup to the left of the cursor or set it to a fixed position within the window.

Link Box by Lloyd Hassell

Website: lloydhassell.brinkster.net
Email: lloydhassell@hotmail.com