Source Code - JsMadeEasy.com

Metachecker.net

FontsMadeEasy.com

RankChecker.net

Learn Java Script Today

Over 5000 Free Fonts

Tutorials

Javascript Forum

Other Javascript Resources

Advance DHTML Tutorial

Mouse Over Imagemap - Change Alt Image

This is an example of changing an alternate image with the different areas of an image map. This is the only way to change images using image maps. Changing the actual image map or the areas in an image map is impossible.

Insert into <HEAD>

if (navigator.appVersion.indexOf("2.") != -1){
        check = false;
        }
if ((navigator.appVersion.indexOf("3.") != -1) && (navigator.appName.indexOf("Explorer") != -1)){
        check = false;
        }
else {
        check = true;
        }

origimage = new Image();
origimage.src = "images/dg1.gif";

image1on = new Image();
image1on.src = "images/dg2.gif";
image2on = new Image();
image2on.src = "images/dg3.gif";
image3on = new Image();
image3on.src = "images/dg4.gif";

function imageon(name)   {
        document.altimg.src = eval(name + "on.src");
}
function imageoff(name)  {
        document.altimg.src = eval(name + ".src");
}

function on(name)  {
        if (check == true){
        imageon(name);
        }
}
function off(name)  {
        if (check == true){
        imageoff(name);
        }
}
// -->
</script>

Insert into <BODY>

Other Options

Move your mouse over the head and the feet of the devil to see the example.

This is an example of changing an alternate image with the different areas of an image map. This is the only way to change images using image maps. Changing the acctuall image map or the areas in an image map is impossible.

To start using this script, put the following lines in your <head></head> tag. You need to change YOUR ORIGIONAL ALT IMAGE and YOUR CHANGING IMAGE. YOUR ORIGIONAL ALT IMAGE should be the image that is viewed when the mouse is off the image map. 
<script language="JavaScript">
<!-- Hide from old browsers
// Copyright © 1999 Doug Popeney
// Created by Doug Popeney (easyjava@easyjavascipt.com)
// JavaScript Made Easy!! - http://www.easyjavascript.com

origimage = new Image();
origimage.src = "YOUR ORIGIONAL ALT IMAGE";

image1on = new Image();
image1on.src = "YOUR CHANGING IMAGE #1";
image2on = new Image();
image2on.src = "YOUR CHANGING IMAGE #2";

function imageon(name)   {
        document.altimg.src = eval(name + "on.src");
}
function imageoff(name)  {
        document.altimg.src = eval(name + ".src");
}

function on(name)  {
        if (check == true){
        imageon(name);
        }
}
function off(name)  {
        if (check == true){
        imageoff(name);
        }
}
// -->
</script>

Here are the images. They go anywhere in your document. For the image map you need to change IMAGE FILE, YOUR WIDTH, YOUR HEIGHT, MAP NAME, # (which are the coordinates), and LINK #. For the alt image, just change YOUR ALT IMAGE. 
Image Map:
<img src="IMAGE FILE" width="YOUR WIDTH" height="YOUR HEIGHT" usemap="#MAP NAME" border=0>
<MAP NAME="MAP NAME">
<AREA SHAPE="rect" COORDS="#,#,#,#" href="LINK #1" onmouseover="on('image1');" onmouseout="off('origimage')">
<AREA SHAPE="rect" COORDS="#,#,#,#" href="LINK #2" onmouseover="on('image2');" onmouseout="off('origimage')">
</MAP>

Alternate Image:
<img src="YOUR ALT IMAGE" name="altimg">

OK, here's a little help on Image Maps. This is my example.

<img src="devil.gif" width=62 height=61 usemap="#devil" border=0>
<MAP NAME="devil">
<AREA SHAPE="rect" COORDS="0,0,62,30" href="jsmain.htm" onmouseover="on('image1');" onmouseout="off('origimage')">
<AREA SHAPE="rect" COORDS="0,30,62,61" href="jscount.htm" onmouseover="on('image2');" onmouseout="off('origimage')">
</MAP>
First thing to do is to change the basic information in uppercase. Next, the coordinates. The first set, "0,0,62,30", is the upper rectangle or the head. "0,0" is the upper left hand corner of the rectangle and ",62,30" is the lower right hand corner of the rectangle. Likewise with the second set of coordinates (feet), "0,30" - upper left, "62,61" lower right. The best way to get these coordinates is by loading the image in a graphics editor. I use Paint Shop Pro.

--------------------------------------------------------------------------------

Making Additions

This will describe how to make a map with three corrdinates...thus three alternate images. First, an example.

Your script and images should now look like this... 
<script language="JavaScript">
<!-- Hide from old browsers
// Copyright © 1999 Doug Popeney
// Created by Doug Popeney (easyjava@easyjavascipt.com)
// JavaScript Made Easy!! - http://www.easyjavascript.com

origimage = new Image();
origimage.src = "YOUR ORIGIONAL ALT IMAGE";

image1on = new Image();
image1on.src = "YOUR CHANGING IMAGE #1";
image2on = new Image();
image2on.src = "YOUR CHANGING IMAGE #2";
image3on = new Image();
image3on.src = "YOUR CHANGING IMAGE #3";

function imageon(name)   {
        document.altimg.src = eval(name + "on.src");
}
function imageoff(name)  {
        document.altimg.src = eval(name + ".src");
}

function on(name)  {
        if (check == true){
        imageon(name);
        }
}
function off(name)  {
        if (check == true){
        imageoff(name);
        }
}
// -->
</script>

Image Map:
<img src="IMAGE FILE" width="YOUR WIDTH" height="YOUR HEIGHT" usemap="#MAP NAME" border=0>
<MAP NAME="MAP NAME">
<AREA SHAPE="rect" COORDS="#,#,#,#" href="LINK #1" onmouseover="on('image1');" onmouseout="off('origimage')">
<AREA SHAPE="rect" COORDS="#,#,#,#" href="LINK #2" onmouseover="on('image2');" onmouseout="off('origimage')">
<AREA SHAPE="rect" COORDS="#,#,#,#" href="LINK #3" onmouseover="on('image3');" onmouseout="off('origimage')">
</MAP>

Alternate Image:
<img src="YOUR ALT IMAGE" name="altimg">