Onmouseover

OnMouseOver is a new feature that allows you to make your page more user friendly by providing images to change when the mouse is over them. We have created this page devoted to OnMouseOver because of the large amounts of e-mail we have got with questions about it. Onmouseover has several possibilities, one of them being to have buttons, such as in the example below when the mouse is placed over those buttons, the buttons will change to let the user know he/she can press on one of the buttons. OnMouseOver only works with newer versions of Internet Explorer 4.x and above and Netscape 3.1 and above.

Examples

The example below shows you how you could create simple buttons that have a multimedia effect. When placing your mouse over one of the categories below the category should change to a darker color indicating that it can be clicked to go to the specified page.

HTML
ON-LINE HELP
VIRUS INFO
Jargon
Internet Info

Instructions

We have attempted to create this script as simple as possible but does take some effort in your part. How this script is written:

As you can notice in the red sections below there are image files: om1 om11; these files are named om for OverMouse/OnMouse image, om1.gif is displayed when the mouse is not over the image, so in the above example would be the lighter blue.I the mouse is placed over the image it would then change to om11.gif. You can follow this same format when creating your images or if so desired you can change the naming format. However keep in mind if this is done you'll also have to change the script.

In the blue section this tells the JavaScript if the image is off or on, so in the name of the number of the image ends with f; for example, onef, this would indicate this image is for the first image with the mouse off of it. If the number ends with o, such as oneo, this would indicate this is the first image with the mouse cursor over it. Also, highlighted in blue is the number of the image; in the above example there are 5 sets of images in 2 so a total of 10 images each numbered by one, two...

In the Orange section this is the images link, for example, learnhtm.htm would link to our HTML page, which is image one of the above example. If you want to link the images you would want to change this to the appropriate link.

The above information is not required to be changed in order for this script to work. However, if you do not want to follow the scheme of how we labeled our images, you will need to change the red sections to the names of your image files. Otherwise, use our scheme and just change the link to point to the appropriate places.

--!!COPY ALL BELOW INFORMATION!!--

<SCRIPT LANGUAGE="JavaScript">
<!--

if (document.images) {
var onef = new Image();
onef.src ="om1.gif";
var oneo = new Image();
oneo.src = "om11.gif";
var twof = new Image();
twof.src = "om2.gif";
var twoo = new Image();
twoo.src = "om22.gif";
var threef = new Image();
threef.src = "om3.gif";
var threeo = new Image();
threeo.src = "om33.gif";
var fourf = new Image();
fourf.src = "om4.gif";
var fouro = new Image();
fouro.src = "om44.gif";
var fivef = new Image();
fivef.src = "om5.gif";
var fiveo = new Image();
fiveo.src = "om55.gif";
}

function act(imgName) {
if (document.images)
document[imgName].src = eval(imgName + "o.src");
}

function inact(imgName) {
if (document.images)
document[imgName].src = eval(imgName + "f.src");
}

// -->
</SCRIPT>
<P><A HREF="learnhtm.htm" onMouseOver="act('one')"
onMouseOut="inact('one')">
<IMG SRC="om1.gif"
NAME="one"
BORDER="0"
ALT="HTML"></A><BR>
<A HREF="oh.htm" onMouseOver="act('two')"
onMouseOut="inact('two')">
<IMG SRC="om2.gif"
NAME="two"
BORDER="0"
ALT="ON-LINE HELP"></A><BR>
<A HREF="vlist.htm" onMouseOver="act('three')"
onMouseOut="inact('three')">
<IMG SRC="om3.gif"
NAME="three"
BORDER="0"
ALT="VIRUS INFO"></A><BR>
<A HREF="jargon.htm" onMouseOver="act('four')"
onMouseOut="inact('four')">
<IMG SRC="om4.gif"
NAME="four"
BORDER="0"
ALT="Jargon"></A><BR>
<A HREF="jargon/i/Internet.htm" onMouseOver="act('five')"
onMouseOut="inact('five')">
<IMG SRC="om5.gif"
NAME="five"
BORDER="0"
ALT="Internet Info"></A></P>