JavaScript notes: Rollovers
syllabus | schedule | assignments | Web Resources | ARTC courses
[Intro]     [Tags]     [CSSStyles]     [Lists]     [Links]     [ImageTypes]     [Optimization]    [GlobalCSS]     [CSSBackgrounds]
[Tables]     [Slices]     [IR Rollovers]     [Animated GIFs]     [JS Rollovers]     [CSS Margins]     [Windows]     [Video]     [Metatags]     [Imagemaps]     [FormInput]     [FormAtttributes]    [AdvancedForms]    [WhatisJavaScript]    [Windows2]    [Windows3]    [BrowserInfo]    [StatusBar]    [Alerts]    [Randomness]    [Frames]    [iFrames]    [Frames2]   
A rollover is a screen event that occurs when the mouse is moved over or clicks on an area of a web page, utilizing JavaScript to do so.

Here are my two images: This one will be my over state:


In the HEAD tag, first define how the swap will happen:

<SCRIPT language="JavaScript" TYPE="TEXT/JavaScript">
<!-- Hide Script from Old Browsers

if (document.images){

/*This part is for NEW browsers with javaScript 1.1+ */

upimage = new Image(100, 100);
upimage.src = "images/tile1.gif";

/* and loads it into memory */

downimage = new Image(100, 100);
downimage.src = "images/tile2.jpg";



/* This part is for the OLD browsers (they failed the above test; Creates a placeholder for the images and then creates and sets document.square to empty */

upimage = "";
downimage = "";
document.square = "";


// End hiding Script from old browsers -->

In the BODY tag, create the link where the rollover occurs:

<!-- This code swaps the upbutton for the overbutton when the user puts the mouse over the
upbutton, and switches it back to the upbutton when the mouse leaves the button -->

<A HREF=""
onMouseover="document.square.src = downimage.src;"
onMouseout="document.square.src = upimage.src;">
<IMG SRC="images/tile1.gif" WIDTH=72 HEIGHT=72 BORDER=1 NAME="square">

<!-- Don't forget to put the NAME tag into your IMG SRC tag!! -->

EX: View > Source (of this page to see code in use)