Image Mapping  

 
 

Here is the source code:

<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 = img_prefix + ".gif";
  }
 
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.jrcmap.src = item [current_overID].slide_img.src;
  }
}
 
new_item ("lipsv4",210,141);
new_item ("truckin",210,141);
add all images here...etc.
 
// -->
</SCRIPT>
 

<MAP NAME="jrc">
<AREA SHAPE="RECT" COORDS="0, 0, 113, 67" HREF=""
OnMouseOver="mouseover('truckin');window.defaultStatus='';
window.status='Keep on Truckin\''; return true"..." OnMouseOut="mouseover('truckiss')"
etc, etc, etc.
</MAP>

Note: coords may be changed to accommodate any number of "new_item"s....!!

& add a line for your Imap and you're set:

<img src="truckiss.gif" border="0" width="210" height="141" name="jrcmap" usemap="#jrc">

 

Note: If your images are in another directory modify this line:

this.slide_img.src = "images/" + img_prefix + ".gif";
 

Wanna do multiple image maps?
 Add this bit of code to the above script to indicate a new instance:

function mouseover2 (itemID)
{
   current_overID = itemID;
   if (current_overID != last_overID) {
   document.jrcmap2.src = item[current_overID].slide_img.src;
    }
}

And of course add new items & change the next image mouseover:
OnMouseOver="mouseover2('newtruckin') etc. etc.

Thanks to BoneSaw for suggesting the mutiple image section!

 

Download the best ImageMap Generator available.. plus, it's FreeWare!
For a complete description on Image Maps, go here.
If you arrived here via a search engine please click here to open the full site!