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.

Downloads

Categories

Tags

No tags

Social