Hot Links
Home/JavaScript Categories/Enhancements/Hot Links
Hot Links
Credits: TheHTMLSource.com
Description: This will show a small arrow next to the link you have your mouse over.
Demo:
Place you mouse over the following link's, An arrow pops up next to them.
TheHTMLSource.com
AcidWater.net
Yahoo
Search.com
Monster.com
MyComputer.com!
Directions
Step 1: Insert the following
code into the <head> section of your page:
Step 2: Copy the
following into the <body> section of your page where you would like the links to apear:
Step 3: Download the following file, it contains the Arrow graphics, you can use the arrows or any other graphic you want.
Download The Arrows
Configuring the menu
Note: This script is for 2 links, if you wish to add more you have to do as follows This can be kinda tricky but you can do it:
1.) First you have to change the amount of links you want on your page in the script of step 1, so for example the above script is for 2 links, so the script looks like this:
IMG01 = "on.gif" //image when mouse is over the link
IMG02 = "off.gif" //image when mouse isn't over the link
If you wanted 4 links on your page instead of 2, your script would looks like this:
IMG01 = "on.gif" //image when mouse is over the link
IMG02 = "off.gif" //image when mouse isn't over the link
IMG03 = "on.gif" //image when mouse is over the link
IMG04 = "off.gif" //image when mouse isn't over the link
Basiclly all you do is add 2 more and change the first parts of the script IMG01,IMG02,IMG03 etc.. etc.. for however many you want
2.) Next you change the script right below the one you just did, since this script is for 2 link's it looks like this:
function imgover(imgname){
imgname.src = IMG01
}
function imgout(imgname){
imgname.src = IMG02
}
If you wanted 4 links, you just add 2 more, It would look like this:
function imgover(imgname){
imgname.src = IMG01
}
function imgout(imgname){
imgname.src = IMG02
}
function imgover(imgname){
imgname.src = IMG03
}
function imgout(imgname){
imgname.src = IMG04
}
We just added 2 more codes, and changed them to IMG03, and IMG 04, if you want more just add IMG05, IMG06, IMG07, and so on and so on.
Still with me, Good!
3.) Next you edit the code from Step 2 simply add more links, so for example, the above code is set for 2 links, so the script looks like this:
<IMG NAME="IMG01" SRC="off.gif" WIDTH=10 HEIGHT=10 BORDER=0>
<A HREF="http://www.link1.com" onMouseOver="imgover(IMG01)" onMouseOut="imgout(IMG01)">Link 1</A>
<br>
<IMG NAME="IMG02" SRC="off.gif" WIDTH=10 HEIGHT=10 BORDER=0>
<A HREF="http://www.link2.com" onMouseOver="imgover(IMG02)" onMouseOut="imgout(IMG02)">Link 2</A>
If you wanted 4 links, just add 2 more links to the script, like this:
<IMG NAME="IMG01" SRC="off.gif" WIDTH=10 HEIGHT=10 BORDER=0>
<A HREF="http://www.link1.com" onMouseOver="imgover(IMG01)" onMouseOut="imgout(IMG01)">Link 1</A>
<br>
<IMG NAME="IMG02" SRC="off.gif" WIDTH=10 HEIGHT=10 BORDER=0>
<A HREF="http://www.link2.com" onMouseOver="imgover(IMG02)" onMouseOut="imgout(IMG02)">Link 2</A>
<br>
<IMG NAME="IMG01" SRC="off.gif" WIDTH=10 HEIGHT=10 BORDER=0>
<A HREF="http://www.link3.com" onMouseOver="imgover(IMG03)" onMouseOut="imgout(IMG03)">Link 3</A>
<br>
<IMG NAME="IMG02" SRC="off.gif" WIDTH=10 HEIGHT=10 BORDER=0>
<A HREF="http://www.link4.com" onMouseOver="imgover(IMG04)" onMouseOut="imgout(IMG04)">Link 4</A>
And that's it, Make sure you change the have the right IMG01, IMG02, IMG03, etc.. part of the code, Javascript is very very touchy, one wrong number and the whole code wont work, it can get kinda agrevating, but in the end it's all worth it.
Enjoy!
Company | Careers | Partners | Advertising | Help
Privacy
Policy | Trademark
Notices | User
Agreement
© 2001 TheHTMlSource.com, INC. All Rights
Reserved.
