Link descriptions in Javascript
The first step is to create your links. This example uses lists to organise links.
<ul>
<li><a href="http://pixelcode.co.uk">Home</a></li>
<li><a href="tutorials">Tutorials</a></li>
<li><a href="downloads">Downloads</a></li>
</ul>
Adding the description area
Now that the links have been created we need to define an area that the descriptions will appear.
<div id="description">Please select a link.</div>
Note the div has an id, this is important as this is how we will be changing the link descriptions.
Changing the text
To change the text in the div
element we simply use the innerHTML
value.
function show(text)
{
document.getElementById('description').innerHTML = text;
}
This code simply finds the div
element and then changes the value to that specified.
Using the function
To call this function, we will use the onmouseover
and onmouseout
event handlers to change the value.
<ul>
<li><a href="http://pixelcode.co.uk" onmouseover="show('Go to home page');"
onmouseout="show('Please select a link.');">Home</a></li>
<li><a href="tutorials" onmouseover="show('Go to tutorials');"
onmouseout="show('Please select a link.');">Tutorials</a></li>
<li><a href="downloads" onmouseover="show('Go to downloads');"
onmouseout="show('Please select a link.');">Downloads</a></li>
</ul>
Multiple line messages
To create messages over multiple lines use the HTML br
element.
…
<li><a href="http://pixelcode.co.uk" onmouseover="show('Go to <br />home page');"
onmouseout="show('Please select a link.');">Home</a></li>
…
This technique can be applied to more than one description element.
<div id="description1">Please select a link.</div> …
<div id="description2">Please select a link.</div>
In this example two div
tags have been created with different id attributes. We will now change the function slightly to allow for the change.
function show(id, text)
{
document.getElementById(id).innerHTML = text;
}
An extra parameter has been added to allow for multiple description areas.
…
<li><a href="http://pixelcode.co.uk" onmouseover="show('description1', 'Go to home page');"
onmouseout="show('description1', 'Please select a link.');">Home</a>
</li>
<li><a href="tutorials" onmouseover="show('description2', 'Go to tutorials');"
onmouseout="show('description2', 'Please select a link.');">Tutorials</a>
</li>
…
These examples show how to add the extra parameter necessary to change which div
element they change the value of.