|
Quick links
Overview
Examples
Instructions
Overview
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 will only work with newer versions of Internet
Explorer 4.x and above and Netscape 3.1 and above.
Examples
The below example 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.
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 wish 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>
|
