Bullet Links ~ Tested inIE7, IE5.5, IE6.0, Netscape7.02,Opera7.54, Firefox0.9.1 and AOL Explorer1.5

T his 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" (see below for howto), and the script handles the rest. Great way to draw attention to specific links on your page.
Place your cursor on the below links and watch what happens!

Get Code Here
Our Newest Pages
Free Greeting Cards
Windows XP Service Pack 2 ~ Q & A

W e have tested the code in IE7.0, IE6.0, IE5.5, Firefox0.9.1, Opera7.54, Netscape7.02 and AOL Explorer1.5. This script worked well in all platforms with no variations observed.
Place your cursor on the below image and watch what happens!

D epending on your knowledge of HTML and javascript, this is an easy two part, copy and paste code in both the <HEAD> section and <BODY> section. Both with minimal reconfigurations. You must also upload an image* in the same directory for the bullet effect.

* The site you get the copy and paste code from does not offer any bullets for uploading for this effect. The below link has over 200 different bullets for your uploading for this effect.
Bullet Images You Can Upload

<HEAD> Section Reconfigurations

T here is one (1) reconfiguration you must make (rename the image you upload) and a few reconfigurations that you may want to do for positioning of the bullet in relationship to the link(s).

Default Image Name ~ Needs To Be Changed

//Write out bullet image. Change "mybullet.gif" below to desired image path:
var bulletimg='<img id="bullet" style="position:absolute; left: -300px" src="mybullet.gif">'

Reconfigured Image Name

//Write out bullet image. Change "mybullet.gif" below to desired image path:
var bulletimg='<img id="bullet" style="position:absolute; left: -300px" src="Path To Your Image">'

Note! The script that goes in the <HEAD> section contains two variables, "bulletoffsetX" and "bulletoffsetY" that you may find useful. You see, the script by default positions your bullet image at the upper left corner of the link. To shift your image to the left or down slightly, modify the values of these two variables. See below:

var bulletoffX=2 //Set horizontal offset of bullet image from link's root. (ie: -2 or 5)
var bulletoffY=0 //Set vertical offset of bullet image from link's root. (ie: -2 or 5)

On the above reconfiguration(s), play around with the numbers until you like the positioning of the bullet in relation to the link name.

Note Of Importance When you reconfigure the above, remember that this is the setting for All the links you add this effect to. You cannot have different settings for different links that are associated with this effect.

<BODY> Section Reconfigurations

F or the links that you wish to have a link bullet, just give them a CSS class="ddbullet" and place them anywhere within the <BODY> section you want this effect to be seen.
You can add the CSS class="ddbullet" to as many links as you want. There is no limit to how many you can add this effect to. See the below example:

<a href="Path You Your Link"class="ddbullet"> Link Name Here</a>

T o answer your next question, the answer is "Yes", you can add this effect to image links also. Just add the CSS class "ddbullet" into the URL part of the image link. See the below example:

The way this script is designed, if you have your links positioned on the left side of the page, you will not be able to actually see the bullet on mouseover. See Below:

Place Cursor Here For Example

G rab the above link and we will show you howto get the bullet to fully appear on the left side of the page.

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ]

Search Our Site By Individual letter

[ A ] [ B ] [ C ] [ D ] [ E ] [ F ] [ G ] [ H ] [ I ] [ J-K ] [ L ]
[ M ] [ N-O ] [ P-Q ] [ R ] [ S ] [ T ] [ U-V ] [ W ] [ X-Y-Z ]

Little Tips Directory

[ Page 1 ] [ Page 2 ] [ Page 3 ] [ Page 4 ] [ Page 5 ] [ Page 6 ] [ Page 7 ]

[ Index Page 1 ] [ Index Page 2 ] [ Index Page 3 ] [ Index Page 4 ] [ Index Page 5 ]
[ Index Page 6 ] [ Index Page 7 ] [ Index Page 8 ] [ Index Page 9 ] [ Index Page 10 ]
[ Index Page 11 ] [ Index Page 12 ] [ Index Page 13 ] [ Form Index ]
[ 2001 ] [ 2002 ] [ 2003 ] [ 2004 ] [ 2005 ] [ 2006 ] [ 2007 ]
[ Disclaimer ]

[ News Letter Archives ] [ Navigation Page ] [ Archives Of Published Material ]
[ Link To Us ] [ Alphabet Index ] [ Feedback ] [ On Line Support ] [ FAQ ]
[ Webmaster Utilities ] [ Casino ] [ Banner Exchange ] [ Advanced Site Search ]

If you are part of the ever growing number of webmasters who enjoy sharing your knowledge with others on web design, join The Consigliere Ltd. web ring to broaden your scope of exposure.
Join Today

This Site Was Built And Is Maintained Exclusively by
The Webmaster @ Consigliere Ltd.