Navigation Button

Internet Brothers: Helpware for the Cybercommunity - DHTML Tips and Tools

The Simple Mouseover Change

This simple two-step process involves creating two or more graphics with seamless integration, then coding the DHTML JavaScript that executes the onmouseover and onmouseout functions. The rollover image switch effect displays the programmed change in the Netscape Navigator 3+ and Microsoft Internet Explorer 4+ browsers. In other browsers a plain, static graphic is displayed. Roll your mouse over the Internet Brothers logo below to observe the demonstration.

IB Logo

Besides changing the property of the original logo to another image with highlights, we've also told the mouseover function to act upon a second object. That second object transforms into the statement about FX from what was originally a totally transparent image. Essentially you are limited only by your imagination. Now let's get into the code to do this.

OK, How Did You Guys Do That?

The first step is to pre-load the images as defined in the image1on and image1off assignments below. Pre-loading prevents your browser client from having to retrieve the image from the server during the hover process, causing an untimely delay in display of the change. Then the turnOn and turnOff script functions below switch the images when the mouseover occurs. The image2 statements control the appearance of the graphic text in the example.

Put this script in the <HEAD> section of your page.
<script language="JavaScript">
  if (document.images) {
  image1on = new Image(); image1on.src = "iblogo120_lit.gif";
  image1off = new Image(); image1off.src = "iblogo120.gif";
    function turnOn(imageName) {
    if (document.images) {
      document[imageName].src = eval(imageName + "on.src");
	  document["image2"].src = "text_lit.jpg"; }}
    function turnOff(imageName) {
    if (document.images) {
      document[imageName].src = eval(imageName + "off.src");
	  document["image2"].src = "blank.gif"; }}
  // -->


Here are the table and anchor tags that activate the DHTML mouseover.
<table border="0" align="center" width="80%">
<tr><td align="center">
<A HREF="#" onmouseout="turnOff('image1')"
onmouseover="turnOn('image1')"> <IMG alt="IB Logo" border="0" height="120" name="image1" src="iblogo120.gif" width="120"></A></td> <td align="center"> <IMG border="0" height="120" name="image2" src="blank.gif" width="127" align="right"></td> </tr></table>

The onmouseout and onmouseover attributes of the anchor tag call the turnOff and turnOn functions defined in the head script block to be executed. The # value in the href attribute merely implies don't go anywhere with this anchor, just evaluate the code. The table simply lays out the appearance of the effect on the page. Notice too the presence of the name attribute on the img src tags. They refer back to the original off condition graphics defined in the preload section.

Please let us know if this tip was helpful to you, or if you have anything you don't understand, by sending us email or visiting the comments page.

Was this site useful to you?
Vote For Us at WebbieWorld

Helpful TipTo print a copy of an Internet Brothers tip or article, simply take a photograph of your computer screen, develop the film and have the photo enlarged to the font size of your choice.

Know anyone who might enjoy this site? Please Let 'em Know!
  Full Name Email Address
Check this box and we'll show you how to add an automated traffic-generating referral system just like this one to your web site for FREE -- within the next 5 minutes!

The Internet Brothers have implemented hierarchical menus for navigation. Easier done than said. In our effort to be friendly to all browsers, the menu tree is functional with version 4 or greater of both the AOL/Netscape and Internet Explorer products.

As stated above, hovering over the button will open the menu for these browsers. But if you have an older product, don't fret, we'll send you to the scum page. Just click the button.

Why haven't you downloaded the newer versions? They're free you know.
Download Internet Explorer
Download Netscape Communicator

The hierarchical menus were created using Peter Belesis' Dynomat DHTML scripting tool from Webreference. Give them a visit, you'll like what you learn.


Our Lovely Email Icon    another darn bug







Tears will get you sympathy. Sweat will get results.






We were put on this earth to accomplish a certain number of things. Right now I'm so far behind I'll probably never die!






Be thankful for problems. If they were less difficult, someone with less ability might have your job.






Visitors who throw litter into the crocodile pit will be asked to retrieve it.






Copyright 1997-2004 Internet Brothers. All Rights Reserved. Really.