Magic Link

Magic Link is a JavaScript script that enables you to create a link with a rollover graphical symbol to the right of it, which allows the user to optionally open the link in a new page by clicking on the graphical symbol.

For example, this is a link to our homepage

If you click on the the graphical symbol to the right of the link, our homepage will open in a separate page.

This script is fully customizable. You are free to use your own image files for the graphical symbol, and your own CSS properties to control the display of the Magic Link.

Browsers Tested With:

Internet Explorer/Windows 5.0+
Internet Explorer/Mac 5.0+
Netscape 6.0+
Mozilla 1.0+
Opera 7.0+
Safari 1.0+

Download Magic Link Script and Demos

Download magic_link.zip

Configuration Instructions

Step 1

Before using the source code, make sure that you read and agree to the terms of the License Agreement, which will open in a separate window.

Step 2

Download the file magic_link.zip to your computer and unzip it. click_win.zip contains the following files:

magicLink.js
magicLink.css
external.gif
external_over.gif
demo.htm

magicLink.js is the script that runs the program. demo.htm is a demo file that uses the script. You're free to modify demo.htm and magicLink.css for your own personal use. This is probably the easiest way to get started. You're free to modify the other files or substitute them with your own.

Step 3

Create an HTML file in the same directory as the one you just unzipped the contents of magicLink.zip to. We will refer to this HTML file as the Target Page. Instead of creating a new Target Page, you can use a preexisting HTML file. Open the Target Page in an editor and place the markup below, between the opening and closing <head></head> tags.

Step 4

Add a unique id attribute to the anchor element of the link you want to convert into a Magic Link.

Here's an example:

<a href="http://example.com" id="ID_EXAMPLE">Magic Link</a>

Step 5

Place a JavaScript call to the magicLink() method in a script element, to the right of the anchor element you want to convert to a magic link. The id parameter to magicLink() must be identical to the id attribute in the adjacent anchor. In the example below, the id is ID_EXAMPLE.

<a href="http://example.com" id="ID_EXAMPLE">Magic Link</a><script type="text/javascript">magicLink("ID_EXAMPLE")</script>

The markup above makes this Magic Link.

You can create an unlimited number of Magic Links in a page. Just remember to use unique ids for each Magic Link.

Note: To prevent the image of the Magic Link from being wrapped to the next line when the page width is not wide enough to accommodate both the anchor element and its associated image, the anchor and script tags should be conjoined, or, in other words, touching. There shouldn't be a line feed or white space separating the tags. For example, although the code below looks neater because it has a line feed separating the anchor and script tags, we don't recommend doing this because of the chance that the Magic Link's image will be wrapped to the next line:

<a href="http://example.com" id="ID_EXAMPLE">Not Conjoined</a>
<script type="text/javascript">magicLink("ID_EXAMPLE")</script>

Instead, conjoin the tags as follows:

<a href="http://example.com" id="ID_EXAMPLE">Conjoined</a><script type="text/javascript">magicLink("ID_EXAMPLE")</script>

Step 6

You can optionally customize the script by altering the values in the modifiable section of magicLink.js.

This is how the modifiable section appears by default:

// START MODIFIABLE SECTION
//------------------------------------------
magicLink.IMG_URL = "external.gif";
magicLink.IMG_OVER_URL = "external_over.gif";
magicLink.CLASS = "ch-magic-link";
magicLink.TOOLTIP = "Click to open link in a new window";
//-------------------------------------------
// END MODIFIABLE SECTION

Modifiable Section Variables:

magicLink.IMG_URL: The URL of the image file associated with the Magic Link, when not in a rollover.

magicLink.IMG_OVER_URL: The URL of the image file associated with the Magic Link, during a rollover.

magicLink.CLASS: The CSS class associated with the anchor and image of the Magic Link.

magicLink.TOOLTIP: The tool tip associated with the image of the Magic Link.

Step 7:

Upload the Target Page, magicLink.js, magicLink.css, external.gif, and external_over.gif to your web server.

Step 8:

You're done. If you have any questions, find any bugs, or have suggestions, feel free to contact us.