1. 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’”>

2. 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>

3. 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

4. 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.

5. 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

6. 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

7. 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.

8. 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.

9. 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>

10. 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.

11. 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).

12. 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”; }

13. 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).