Introduction to JS

history

objects

events

functions

arrays

forms

scripts

resources



 


Event Handlers

Event What it handles
onabort User aborted page loading
onblur User left the object
onchange User changed the value of an object
onclick User clicked on an object
ondblclick User double clicked an object
onfocus User made an object active
onkeydown When a keyboard key is on its way down
onkeypress When a keyboard key is pressed
onkeyup When a keyboard key is released
onload Page finished loading
onmousedown User pressed a mouse-button
onmousemove Cursor moving on an object
onmouseover Cursor moved over an object
onmouseout Cursor moved off an object
onmouseup User released a pressed mouse-button
onreset User resets a form
onselect User selected content of a page
onsubmit User submitted a form
onunload User left window

There's No Such Thing as a "Rollover"

So what Are JavaScript Events handlers?
These are "things that happen inside a browser window." Two categories: ones triggered by a mouse or key press; ones that are not. Consider what you can do with the mouse. You can drag it over something, push the mouse button down, release the button, and also click-and-drag with it. In your script, you specify that a certain script is executed by saying on[eventname]="dothis".

To make your script "do" something, you instruct it to execute an action when a mouse event happens by adding "on" to the head of the event. For example, to trigger an action when the user moves the mouse over an area or object, the command is onmouseover="some action". There are 12 JavaScript event handlers: onAbort, onBlur, onChange, onClick, onError, onFocus, onLoad, onMouseOver, onMouseOut, onSelect, onSubmit, onUnload.

Here's where the DOM, Document Object Model, comes into play. The DOM is the way elements, or objects on a page are addressed in scripting. As long as you do not nest your tables or image elements in DIV, LAyer, or SPAN tags, you can use these methods to address your image objects.
document.imagename or documnet['imagename']

The Anatomy of a Simple "Mouse Event"
A simple button <img src="somepic" width="68" height="30" border="0" name="somename">

In order to create a simple on and off effect, you need to have two graphics of the same dimensions. For this example, we'll use the two images below:

how off buttonThe "off" or default image
how over buttonThe "on" or mouse over image

Place the default image object anywhere you wish on your page, and identify it by giving it a name value. A name value gives the img element a unique identity.
The HTML tag will look like this: <img src="how-off.gif" alt="off image" width="197" height="41"name="how_button" id="howbutton"> off image
The code that accomplishes this is:
<a href="javascript://"
onMouseOver="document.howbutton.src='how-over.gif'"
onMouseOut="document.howbutton.src='how.gif'">
<img src="how.gif" alt="off image" width="197" height="41" name="howbutton" id="howbutton" border="0"></a></p>

The name can be anything you want, but be sure to name each image object on your page uniquely, regardless of the graphic you use for it. This is very important to understand if you want to master image object manipulation, or for that matter Dynamic HTML in general: every IMG object tag that you want to manipulate via scripting or CSS individually must have a unique name or (for later browsers) ID value in the markup tag.

Pre-load Your Images into the Browser Memory Cache, in order to make Image object SRC graphic swapping work smoothly. If you don't pre-load your graphics, your users will experience an annoying delay when mousing over or clicking on an Image object, or worse still, see a "missing image" box.

Create image objects, preload all images.

<head>
<script language="JavaScript" type="text/javascript">
<!--
if (document.images) {
img1on = new Image(); //active images
img1on.src = "logo.gif";
img2on = new Image();
img2on.src = "2dbutton2.gif";
img3on = new Image();
img3on.src = "3dbutton2.gif";
img4on = new Image();
img4on.src = "combobutton2.gif";
img5on = new Image();
img5on.src = "resumebutton2.gif";

img1off = new Image(); // inactive image objects displayed when the mouse moves off the btn
img1off.src = "logo2.gif";
img2off = new Image();
img2off.src = "2dbutton.gif";
img3off = new Image();
img3off.src = "3dbutton.gif";
img4off = new Image();
img4off.src = "combobutton.gif";
img5off = new Image();
img5off.src = "resumebutton.gif";
}
function imgon(imgname) {
if (document.images) {
document[imgname].src = eval(imgname + "on.src");
}
}
function imgoff(imgname) {
if (document.images) {
document[imgname].src = eval(imgname + "off.src");
}
}
//-->
</script>
</head>
<body bgcolor="#663333" text="#000000">

<table border=0 width=90% cellspacing=0 cellpadding=0 summary="layout">
<td valign=top align=left rowspan=5><a href="index.html"
onMouseOver = "imgon('img1')"
onMouseOut = "imgoff('img1')"> <img name = "img1" border=0 style="height=100; width=100" src="logo2.gif" alt="homepage"></a></td>
<td valign=top align=center >
<h3>Portfolio of Websites</h3>
</td>
<tr>
<td valign=top align=center>
<hr width=85%>
</td>
<tr>
<td valign=top align=center><a href="2d.htm"
onMouseOver = "imgon('img2')"
onMouseOut = "imgoff('img2')"> <img name="img2" border=0 style="height=25; width=50" src="2dbutton.gif" alt="2d link"></a>
<a href="3d.htm"
onMouseOver = "imgon('img3')"
onMouseOut = "imgoff('img3')"> <img name = "img3" border=0 style="height=25; width=50" src="3dbutton.gif" alt= "3d link"></a>
<a href="combo.htm"
onMouseOver = "imgon('img4')"
onMouseOut = "imgoff('img4')"> <img name = "img4" border=0 style="height=25; width=50" src="combobutton.gif" alt= "combo link"></a>
<a href="resume.htm"
onMouseOver = "imgon('img5')"
onMouseOut = "imgoff('img5')"> <img name = "img5" border=0 style="height=25; width=50" src="resumebutton.gif" alt= "resume link"></a>
</td>
<tr>
<td>Welcome to my personal site. On the following pages you will
find a collection of my website that I have done over the last two years.
My artwork consists of 2-D, 3-D, and a combo of 2-D and 3-D. My resume is
also included on the last page. I hope you enjoy my artwork as much as I
do. Thank you for visiting.</td>
<tr>
<td align=center><img src="anger3-1.jpg" style="height=150; width=300" alt="sample of my 2-d artwork"></td>
</table>
</body>

Creating a Function using the Eval method (reusable function)
Before you we call this function, we have to pre-load the on and off images into variables.

img1off = new Image(); // inactive image objects displayed when the mouse moves off the btn
img1off.src = "logo2.gif";
img1off = new Image(); // inactive image objects displayed when the mouse moves off the btn
img1off.src = "logo2.gif";

Now look at the function, start by define the function
function changeImg (imgObject, newImg)

Add the opening parentheses:
{

In the next line, we introduce the eval.eval function that returns the value of the string (the text) that's contained within parentheses. The first line we evaluate the string of "document", plus the value we plug into the variable imgObject. This gives us the exact address of the Image Object we are trying to manipulate. All this information is contained in our buttonobject.

buttonObject = eval ("document."+imgObject);

In the second line, we evaluate the string of the value plugged into newImg plus ".src". This give us the src object to be swapped into the Image object.

buttonObject = eval ("document."+imgObject);
buttonObject.src = eval ("newImg+".src");
then we close the function with a closing parentheses

}

Intro | History | Dom | Events | Functions | Arrays | Forms | Scripts | Resources