Jazzes up your regular imagemap or navigation bar.One of my favourites.
code: Can't Copy and Paste this? Click here for a copy-and-paste friendly version of this code!
Terms of Agreement:
By using this code, you agree to the following terms...
You may use
this code in your own programs (and may compile it into a program and distribute it in compiled format for languages that allow it) freely and with no charge.
You MAY NOT redistribute this code (for example to a web site) without written permission from the original author. Failure to do so is a violation of copyright laws.
You may link to this code from another website, but ONLY if it is not wrapped in a frame.
You will abide by any additional copyright restrictions which the author may have placed in the code or code's description.
'**************************************
' Name: A Menu which Change on MouseOver
' Description:Jazzes up your regular imagemap or navigation bar.One of my favourites.
' By: John Oyston
'
'This code is copyrighted and has' limited warranties.Please see http://www.Planet-Source-Code.com/vb/scripts/ShowCode.asp?txtCodeId=1927&lngWId=14'for details.'**************************************
<HTML><HEAD><TITLE>Image changes on mouse over</TITLE></HEAD>
<BODY BGCOLOR=aqua>
<FONT FACE=ARIAL COLOR=navy><CENTER><H1>Image changes on mouse over</H1></CENTER>
I saw a menu list like this, and could not figure out how it worked at the time. Then I saw a face which changed when the mouse was over it and realised the trick - JavaScript can change the image (but not the text) on a page! The nice thing about this use of JavaScript is that anyone using a JavaScript browser gets the benefit of the changing image, but all other users can still use the site.</FONT>
<!--Links work - substitute A HREF= "" to make links inoperative.-->
<!--April 9, 1997-->
<HR>
<H3>What sort of fruit would you like?</H3>
<A HREF="apple.htm" onMouseOver="document.img4.src='boxylap.gif';" onMouseOut="document.img4.src='boxap.gif';"><IMG NAME="img4" BORDER=NO SRC="boxap.gif" WIDTH=119 HEIGHT=31></A><BR CLEAR=ALL>
<A HREF="orange.htm" onMouseOver="document.img5.src='boxylor.gif';" onMouseOut="document.img5.src='boxor.gif';"><IMG NAME="img5" BORDER=NO SRC="boxor.gif" WIDTH=119 HEIGHT=31></A><BR CLEAR=ALL>
<A HREF="banana.htm" onMouseOver="document.img6.src='boxylbn.gif';" onMouseOut="document.img6.src='boxbn.gif';"><IMG NAME="img6" BORDER=NO SRC="boxbn.gif" WIDTH=119 HEIGHT=31></A>
<P>
Click on your choice
<!--forces early loading of alternate images at 1x1 pixel size-->
<IMG SRC="boxylap.gif" ALT="." WIDTH=1 HEIGHT=1><IMG SRC="boxylbn.gif" ALT="." WIDTH=1 HEIGHT=1><IMG SRC="boxylor.gif" ALT="." WIDTH=1 HEIGHT=1>
<BR CLEAR=ALL>
<P>
<HR><CENTER>
<FONT FACE=ARIAL COLOR=navy SIZE=4>
<A HREF="../home.htm">Return to JavaScript Page</A>
<H5>John Oyston, (oyston@oyston.com), April 1997</H5></FONT></CENTER>
</BODY></HTML>
The code mentions some gif files. But they are nowhere to be found. Please include them here, so we can download them too. Thanks dr_anil@hotmail.com (If this comment was disrespectful, please report it.)
Javascript can also change text and HTML from onMouseOver and onMouseOut events. Check out the innerHTML and innerText properties.
Oh and you can pre-load hte images on page load so you don't get delays. (If this comment was disrespectful, please report it.)
Add Your Feedback
Your feedback will be posted below and an email sent to
the author. Please remember that the author was kind enough to
share this with you, so any criticisms must be stated politely, or they
will be deleted. (For feedback not related to this particular code, please
click here instead.)
By 4 Users
10/2/2000 4:45:56 PM: 
