Simplest Rollover (nonJavaScript!) We’re going to change the image’s source when the event, “onmouseover” occurs: <img src = “pic.jpg” height = “250” width = “250” onmouseover = “src = ‘pic2.jpg’”> Note the quotes!! What if we want to change the image back when the mouse pointer leaves the image? <img src = “pic.jpg” height = “250” width = “250” onmouseover = “src = ‘pic2.jpg’” onmouseout = “src = ‘pic.jpg’”>

Text Rollover (nonJavaScript!) Text doesn’t have attributes (like onmouseover) So we use an anchor tag (<a>) The onmouseover attribute can change the src attribute of the <img> tag, so we need an image tag And we need to identify an image tag explicitly using the “name” attribute E.g., <img height = “100” width = “100” src = “pic3.jpg” name = “textrollover”> <a onmouseover = “document.textrollover.src = “pic4.jpg”><b>Text Rollover Example</b></a>

document.images The document.images object reflects the images on a web page. This is basically an array of all the images in a document each image is also an object of its own. you can refer to an image in one of the following ways: document.images[i] // array notation document.images.imageName // property notation

Document.images Consider the following HTML definition: <IMG SRC="anything.gif" NAME="anything" HEIGHT="100" WIDTH="100"> If this is the third image on the page, the following references reflect that image: document.images[2] // array notation document.images.anything // using the name document.anything // using the name (a shortcut) Array notation drawback: If you change the number of images on the page, the index number of your images In general, use the name.

document.images.length Returns the number of images on the page. if there are 10 images on the page, document.images.length evaluates to 10, document.images[9] reflects the last image

Browser Compatability (reminder) Not all browsers support the document.images object. only Navigator 3.0x, 4.0x, and IE 4.0x have rollovers. To make sure the browser supports the document.images object : if (document.images) { … } This statement determines whether or not the document.images object exists. If the object does not exist document.images is null, so it evaluates to false if an object is not null, it evaluates to true

Creating an Image Object var variableName = new Image(); The following statement preloads the desired image: variableName.src = "imageURL.gif"; The src property enables you to associate an actual image with an instance of the Image object.

Creating a Rollover A rollover requires at least 2 images. For example, take a look at the following images: <IMG SRC="advann.gif" HEIGHT="24" WIDTH="120" NAME="advan"> <IMG SRC="advana.gif" HEIGHT="24" WIDTH="120" NAME="advan"> Note that the active and inactive images in a rollover must both be the same size. Otherwise, the active image is automatically adjusted to the size of the inactive image.

Code for a rollover To combine these two images into a rollover: if (document.images) { var advanoff = new Image(); // for the inactive image advanoff.src = "advann.gif"; var advanon = new Image(); // for the active image advanon.src = "advana.gif"; } function act() document.images.advan.src = advanon.src; function inact() document.images.advan.src = advanoff.src; The corresponding HTML code for this rollover is: <A HREF="advantages.html" onMouseOver="act()" onMouseOut="inact()"> <IMG SRC="advann.gif" HEIGHT="24" WIDTH="120" NAME="advan" BORDER="0" ALT="Netscent Advantages"> </A>

Several Rollovers Now consider a "menu" consisting of several rollovers. Use a standard naming scheme for the variables and image names. For example: advan = the image name, advann = name of a variable Rule of thumb: use a constant suffix for inactive images, and another one for the active images. function act(imgName) { if (document.images) document.images[imgName].src = eval(imgName + "a.src"); } function inact(imgName) document.images[imgName].src = eval(imgName + "n.src"); The parameter, imgName, is used in two expressions: document.images[imgName].src // the instance imgName + "n.src" // the URL the argument is a string. By wisely choosing the variables and image names for our rollovers, we can use two general functions to activate and inactivate any image in the document.

first image is named “home” <SCRIPT LANGUAGE="JavaScript"> <!– if (document.images) { var homen = new Image(); homen.src = "homen.gif"; var homea = new Image(); homea.src = "homea.gif"; var advann = new Image(); advann.src = "advann.gif"; var advana = new Image(); advana.src = "advana.gif"; var packn = new Image(); packn.src = "packn.gif"; var packa = new Image(); packa.src = "packa.gif"; var hebrewn = new Image(); hebrewn.src = "hebrewn.gif"; var hebrewa = new Image(); hebrewa.src = "hebrewa.gif"; } function act(imgName) document.images[imgName].src = eval(imgName + "a.src"); function inact(imgName) document.images[imgName].src = eval(imgName + "n.src"); // --> </SCRIPT> In body: <A HREF="home.html" onMouseOver="act('home')" onMouseOut="inact('home')"> <IMG SRC="homen.gif" HEIGHT="24" WIDTH="120" NAME="home" BORDER="0" ALT="Home"></A><br> <A HREF="advantages.html" onMouseOver="act('advan')" onMouseOut="inact('advan')"> <IMG SRC="advann.gif" HEIGHT="24" WIDTH="120" NAME="advan" BORDER="0" ALT="Advantages"></A><br> <A HREF="pack.html" onMouseOver="act('pack')" onMouseOut="inact('pack')"> <IMG SRC="packn.gif" HEIGHT="24" WIDTH="120" NAME="pack" BORDER="0" ALT="Packages"></A><br> <A HREF="hebrew.html" onMouseOver="act('hebrew')" onMouseOut="inact('hebrew')"> <IMG SRC="hebrewn.gif" HEIGHT="24" WIDTH="120" NAME="hebrew" BORDER="0" ALT="Hebrew"></A><br> Example: first image is named “home” Its onMouseOver event invokes act() with"home". The same rule applies to the image's onMouseOut event handler. Note: the variables are named homen and homea, for the inactive and active image (respectively).

Rollover that swaps 2 images function act(imgName) { if (document.images) document.images[imgName].src = eval(imgName + "a.src"); document.images[“holder”].src = eval(imgName + “info.src”); } function inact(imgName) document.images[imgName].src = eval(imgName + "n.src"); document.images[“holder”].src = “clear.gif”; if (document.images) { var homen = new Image(); homen.src = "homen.gif"; var homea = new Image(); homea.src = "homea.gif"; var advann = new Image(); advann.src = "advann.gif"; var advana = new Image(); advana.src = "advana.gif"; var packn = new Image(); packn.src = "packn.gif"; var packa = new Image(); packa.src = "packa.gif"; var hebrewn = new Image(); hebrewn.src = "hebrewn.gif"; var hebrewa = new Image(); hebrewa.src = "hebrewa.gif"; var homeinfo = new Image(); homeinfo.src = “homeinfo.gif”; var advaninfo = new Image(); advaninfo.src = “advantagesinfo.gif”; var packinfo = new Image(); packinfo.src = “packagesinfo.gif”; var hebrewinfo = new Image(); hebrewinfo.src = “hebrewinfo.gif”; }

In Body In body: Example: first image is named “home” <A HREF="home.html" onMouseOver="act('home')" onMouseOut="inact('home')"> <IMG SRC="homen.gif" HEIGHT="24" WIDTH="120" NAME="home" BORDER="0" ALT="Home"></A><br> <A HREF="advantages.html" onMouseOver="act('advan')" onMouseOut="inact('advan')"> <IMG SRC="advann.gif" HEIGHT="24" WIDTH="120" NAME="advan" BORDER="0" ALT="Advantages"></A><br> <A HREF="pack.html" onMouseOver="act('pack')" onMouseOut="inact('pack')"> <IMG SRC="packn.gif" HEIGHT="24" WIDTH="120" NAME="pack" BORDER="0" ALT="Packages"></A><br> <A HREF="hebrew.html" onMouseOver="act('hebrew')" onMouseOut="inact('hebrew')"> <IMG SRC="hebrewn.gif" HEIGHT="24" WIDTH="120" NAME="hebrew" BORDER="0" ALT="Hebrew"></A><br> <IMG SRC = “clear.gif” Name = “holder” Height = “100” width = “100”> Example: first image is named “home” Its onMouseOver event invokes act() with"home". The same rule applies to the image's onMouseOut event handler. Note: the variables are named homen and homea, for the inactive and active image (respectively).