Inside Technique : The Rollover Helper Function : Building the Samples

The first page included three examples. We created the three examples as follows:

Update the window status message

<A ONMOUSEOVER='return InitOverEffect(this,window,"Go to our Home Page")' 
   HREF="http://www.siteexperts.com">Home Page
</A> | 
<A ONMOUSEOVER='return InitOverEffect(this,window,"Search SiteExperts.com")' 
   HREF="http://www.siteexperts.com/search/query.asp">Search
</A>

This is the simplest case of the rollover effect. In the onmouseover event, we define the source of the rollover (this specifies the current element), the destination (the window), and the text to display. The window destination causes the status bar text to be updated.

You will notice that we are only setting the onmouseover event. We set the onmouseout event for you automatically. We will explain this in greater detail later.

Update text in an text input or textarea field

<A ONMOUSEOVER='return InitOverEffect(this,document.forms.formtest.elements.hover,"Go to our Home Page")' 
   HREF="http://www.siteexperts.com">Home Page
</A> | 
<A ONMOUSEOVER='return InitOverEffect(this,document.forms.formtest.elements.hover,"Search SiteExperts.com")' 
   HREF="http://www.siteexperts.com/search/query.asp">
Search
</A>

<FORM NAME="formtest">
<INPUT TYPE=text SIZE=30 NAME=hover VALUE="Move over links" ONFOCUS="this.blur()">
</FORM>

This works just like the first example but instead of specifying the window, we specified a text element on the page. When the mouse moves over the link, the text in the input box is updated. When the mouse leaves a link, the default text (Move over links) is redisplayed automatically. Since the input box is intended for output only, we force the input box to never receive the focus by adding a simple ONFOCUS event handler to automatically blur (remove focus) from the input element.

This example exposes a very small risk of a script error because of our forward reference to the input element. If the user moves the mouse over the link before the form part of the HTML is loaded, a script error will occur. By keeping the output HTML very close to the link, you minimize the risk. If put the links and input box in a single table, this risk is eliminated as the links and form will not render until the entire table is loaded.

Change an image

<A ONMOUSEOVER='return InitOverEffect(this,document.images.testimage,"/ads/c/seknows.gif")' 
   HREF="http://www.siteexperts.com">SE Knows
</A> | 
<A ONMOUSEOVER='return InitOverEffect(this,document.images.testimage,"/ads/c/siteexperts.gif")' 
   HREF="http://www.siteexperts.com/">
SE Boogie
</A>
<BR>
<IMG NAME=testimage SRC="/gifs/s.gif" WIDTH=468 HEIGHT=60>

The third approach is used to update an iamge on the page. Just like the form example, you specify the image element that is being changed. When using images, the third argument specifies the SRC of the new image. When the mouse leaves the link, the image is reverted back to the original. In this example, our original image is a transparent GIF so nothing is displayed (Note: Navigator 3.0 sometimes has painting problems with the transparent GIF).

On the last page, we walk you through the script.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.