I am writing this tutorial for myself really because I need to reference this. This is a place for me to do that in a single place.
On the page with the image map add this script in:
There are a few things to keep in mind:
This line:
will need to be adjusted for where ever the images are
This line:
the world is actually the name of the map (you'll see below)
As for the map you see name=world that is the correlating document.world.src. These need to be named the same
And that should be that!
On the page with the image map add this script in:
<SCRIPT LANGUAGE="JavaScript">
current_overID = "";
last_overID = "";
function item (img_name,width,height)
{
img_prefix = img_name;
this.slide_img = new Image (width,height);
this.slide_img.src = "/images/banner/" + img_prefix;
}
function new_item (img_name,width,height)
{
item [img_name] = new item (img_name,width,height);
}
function mouseover (itemID)
{
current_overID = itemID;
if (current_overID != last_overID) {
document.world.src = item [current_overID].slide_img.src;
}
}
new_item ("originalimage.png",600,500);
new_item ("nextimage.png",600,500);
</SCRIPT>
This line:
this.slide_img.src = "/images/banner/" + img_prefix;
This line:
document.world.src = item [current_overID].slide_img.src;
As for the map you see name=world that is the correlating document.world.src. These need to be named the same
<img src=/images/baner/originalbanner.png usemap=#banner border=0 name=world> <map name="banner"> <area shape="poly" coords="1,2,3,4,5,6,7,8" href="/link.php" title="[Whatever it is]" /> </map>
And that should be that!