Bullet Image Link script
Note: Updated to support multiple bullet images for different links, each with their independent offset settings.
Description: This unique script dynamically positions a "bullet" image of your choice alongside arbitrary links when the mouse moves over them, "highlighting" them. Simply give the links in question a CSS class name of "ddbullet" (on top any existing class name), and the script handles the rest. Great way to draw attention to specific links on your page!
The script lets you define more than one bullet image inside the script, so different groups of links can have a different bullet image. The horizontal/ vertical offset of the bullet image relative to the anchor link can be independently set for each image.
Demo (move your mouse over):
| Search Dynamic Drive
(different bullet image)
|
Directions:
Step 1: Insert the following code into the <head> section of your page:
Step 2: Then, for the links that you wish to have a link bullet, just give them a CSS class of "ddbullet" plus a corresponding "rel" attribute:
<a href="http://dynamicdrive.com" class="ddbullet" rel="bulletimg1">Dynamic Drive</a>
The "rel" attribute is used to tell the script which bullet image to use for this link, and should be set to the name of the variable inside code of Step 1 that defines that bullet image (ie: "bulletimg1"). If you review the code of Step 1 near the top, you'll see this variable:
//Arbitrary bulletimg=["imagepath",
imagewidth, offsetxfromroot, offsetyfromroot]
var bulletimg1=["greenup.gif", 13, 2, 0]
var bulletimg2=["search.gif", 16, 4, 0]
So if you wanted a link to use a different bullet image, just define a new variable, and set the link's "rel" attribute to the name of that variable, such as "bulletimg2":
<a href="http://cnn.com" class="oldclass ddbullet" rel="bulletimg2">CNN</a>
The above example also illustrates how you can define the "ddbullet" class on top of existing classes for a link, and the script will still pick up on its meaning.
FYI the two images used in the demo are:
Have fun!