Arrow Links Script
PayneLess Designs

Description: This neat little JavaScript will indicate which link is selected with a little arrow image. Hold cursor over a link and watch it blink!

Three Steps to Install Arrow Links:

1. Save the two necessary images to your server directory
2. Add the code into the HEAD of your HTML document
3. Copy the last code into the BODY of your HTML document

STEP ONE: Save the following images to your server directory:

You may download the required arrow images in a ZIP file from Download arrow-links.zip or download from PayneLess Designs

STEP TWO: Copy this code into the HEAD of your HTML document as indicated:

Code:
<head>

<script type="text/javascript">
<!-- Original:  (mrenner@rst.de) -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
function imgover(imgname){
imgname.src = "arrow.gif"
}
function imgout(imgname){
imgname.src = "blank.gif"
}
// End -->
</script>

<style type="text/css">
ul li { margin: 1% 0; }

img.menu {
width: 10px;
height: 10px;
}
</style>

</head>

STEP THREE: Put this last code into the BODY of your HTML document:

Code:

<body>

<ul>
<li><img id="pic1" src="blank.gif" alt="">
<a href="http://Domain_Name1.com/" onmouseover="imgover(pic1)" onmouseout="imgout(pic1)" title="Mouseover Description">Link Text</a></li>

<li><img id="pic2" src="blank.gif" alt="">
<a href="http://Domain_Name2.com/" onmouseover="imgover(pic2)" onmouseout="imgout(pic2)" title="Mouseover Description">Link Text</a></li>

<li><img id="pic3" src="blank.gif" alt="">
<a href="http://Domain_Name3.com/" onmouseover="imgover(pic3)" onmouseout="imgout(pic3)" title="Mouseover Description">Link Text</a></li>

<li><img id="pic4" src="blank.gif" alt="">
<a href="http://Domain_Name4.com/" onmouseover="imgover(pic4)" onmouseout="imgout(pic4)" title="Mouseover Description">Link Text</a></li>

<li><img id="pic5" src="blank.gif" alt="">
<a href="http://Domain_Name5.com/" onmouseover="imgover(pic5)" onmouseout="imgout(pic5)" title="Mouseover Description">Link Text</a></li>

<li><img id="pic6" src="blank.gif" alt="">
<a href="http://Domain_Name6.com/" onmouseover="imgover(pic6)" onmouseout="imgout(pic6)" title="Mouseover Description">Link Text</a></li>

<li><img id="pic7" src="blank.gif" alt="">
<a href="http://Domain_Name7.com/" onmouseover="imgover(pic7)" onmouseout="imgout(pic7)" title="Mouseover Description">Link Text</a></li>

<li><img id="pic8" src="blank.gif" alt="">
<a href="http://Domain_Name8.com/" onmouseover="imgover(pic8)" onmouseout="imgout(pic8)" title="Mouseover Description">Link Text</a></li>
</ul>

</body>

Designed for Firefox Browser and 1024x768

Site Nav Links

Off Site Links

« Links open in new window/tab »

Cool Links

« Links open in new window/tab »

Monitor Page for Changes

Arrow Links Script
PayneLess Designs

Three Steps to Install Arrow Links:

Designed for Firefox Browser and 1024x768

Site Nav Links

Off Site Links

« Links open in new window/tab »

Cool Links

« Links open in new window/tab »

Monitor Page for Changes

Arrow Links ScriptPayneLess Designs

Three Steps to Install Arrow Links:

Arrow Links Script
PayneLess Designs