| Home | |
 |
JavaScript |
| Today's Date | |
| Dropdown Menu | |
| Mouse Over | |
| Status Bar | |
| Status Runner | |
| Background Color | |
| Script Tester | |
| Mini-Windows | |
| Cookies | |
| Expiration | |
 |
Java Applets |
|
Available CGI |
|
META Tags |
|
Server Elements |
 |
|
Creating a Mouseover Effect
The mouse over effect can be accomplished in multiple ways. Below are two popular script methods for achieving this goal. The first script requires definition of each mouse over item in the javascript code. While the other puts the definitions in the HTML code.
The code required to make this effect work is defined below:
Lets start by breaking the first Javascript code below down and defining the basic elements line by line. The comments are in Blue Arial font.
if (document.images){
This defines
the area that all mouse overs will be defined
controlson = new Image();
Identifies the
variable 'controlson' as an image.
controlson.src = "images/controls3.gif";
Gives the 'controlson'
variable a specific graphic.
controlsoff = new Image();
Identifies the
variable 'controlsoff' as an image.
controlsoff.src = "images/controls2.gif";
Gives the 'controlson'
variable a specific graphic.
}
Ends the definition
section of this code.
function gwebup(name,on) {
This is the
function that begins to choose from the defined variables.
If (document.images) {
A basic if statment
that helps to select 'conrolson' or 'controlsoff'. This statment gets
two variables when the graphic is moused over (The graphic name and the
value 1 or 0.)
image = eval(name + (on == 1 ? "on.src" : "off.src"));
This statment
reads as follows: Take the Graphic name and append either 'on.src' or
'off.src' then go on.
document[name].src = image;
This line selects
the graphic defined by the if statement and the variable definition above
and makes the appropriate changes above.
} }
The code itself will not do anything without a defined graphic to manipulate. The code below showed what is required to properly identify and correct the change.
The Mouseover affect required four important code items.
- ONMOUSEOVER="gwebup('controls',1);
Located in the <A HREF> tag, this element defines the variables to pass to the javascript function when the mouse is over the defined graphic.
- ONMOUSEOUT="gwebup('controls',0);
Located in the <A HREF> tag, this element defines the variables to pass to the javascript function when the mouse is no longer over the defined graphic.
- NAME="controls"
Located in the <IMG SRC> tag, this element identifies the graphic that will be changed when the mouse events occur.
- SRC="images/controls2.gif"
Located in the <IMG> tag, defines the initial state of the graphic before the mouse event.
Example Image:
Version 2 of the Mouse Over Code:
The next script gives has an major advantage over the previous one because the graphical definitions are defined when needed not in the javascript code itself. All that is needed is to place the code below in-between the <Head></Head> statements.
The code below is all that is required to initiate a changed in a graphic.
This code also has a few events:
- onMouseOver="MM_swapImage('objectname','','images/series3_red.jpg',1)"
Instead of passing a variable this code passes all the information needed to make the mouse event. The 'objectname' variable defines the image to change, and the 'images/series3_red.jpg' defines what it will change too. The '1' variable is required but doesn't seem to have much relevance the mouse event.
- onMouseOut="MM_swapImgRestore()"
This part of the code is short and sweet. It basically states to revert the image back to it's original state when the mouse is no longer over the image.
- src="images/series3_blue.jpg"
Located in the <IMG>, defines the initial state of the graphic before the mouse event.
- name="objectname"
Located in the <IMG SRC>, this element identifies the graphic that will be changed when the mouse events occur.
Example Image:
