Image Mapping  


Here is the source code:

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


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

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!