Script to change a second image onMouseOver event within an area tag

[grahamcr]

Hi Folks,
I'v got a map of a line that is being debated. A contractor has created a series of maps at a larger scale all along the path of the line showing exactly where it lies in areas where it twists and turns alot.

I have a JPEG of the main map set up as an image map, and the area tage links to the PDFs of the large scale drawings.

function newWindow(url, target)
{comWin = window.open(url, target, "scrollbars=0,resizable=0,height=350,width=375,status=0,directories=0,menubar=0,toolbar=0");
comWin.focus();
comWin = null;}

<IMG src="Images/MainMapImage.jpg" usemap="#map" border=0>
<map id="map" name="MainMapImage">
<area shape="rect" coords="73,191,80,199" href="Maps/LargeScaleDrawingEx01.pdf" onclick="newWindow(this.href, this.target);return false" target="_blank"/>
</map>

I have been asked to add a second image that will house a simplifed/preview image of each drawing, and will display the image that coresponds to where the user is hovering (if they are on or near the line).

I realize I need to add an image tag to display the preview images, and I need to add an onMouseOver event to the Area tags that calls a function.... But I have no idea how to make that second image tag dynamically accept what the JS function spits out, and really no idea where to start with the JS function

If anyone has something along these lines to start me off I'd really appreciate any help.

 

[grahamcr]

Ok so I'm still working on this issue. Found a bit more info....

Scripts:
-Preload a set of images:
Preview01= new Image(200,259);
Preview01.src="images/Map01.jpg";
//UPTO "Preview24"
-function newWindow(url, target) // Opens a new window with a strict set of params...
-function FP_swapImg() //aparently this is a script generated by FrontPage to do the work...
-function FP_swapImgRestore() // called onmouseout.!?!
-function FP_getObjectByID(id,o) //called by the other FP functions...

Main Image:
<img src="Images/Main_Map.jpg" usemap="#map" border=0>
<map id="map" name="Main_Map">
<area shape="rect" coords="210,220,192,212" href="Maps/Sheet10A.pdf" onmouseover="???" onmouseout="???" onclick="newWindow(this.href, this.target);return false" target="_BLANK">

Second imgage: (changed depending on where mouse is on main image)
<img src="???" border=0>

I have found example calls to the "FP" scripts that I list about, but I have no idea how to edit them to what I need...

EX:
onmouseover="FP_swapImg(1,1,/*id*/'img1',/*url*/'images/newpicturename.jpg')" onmouseout="FP_swapImgRestore()"

In the example above... its passing values to FP_swapImg but that function isnt expecting anyting (ie: the () after the name). Clearly this part of me not being that good with JavaScript.... Also I hope to make use of the preloaded images (for swapping them based on onmouseover). Can I get a handel on them into the call to these "FP" functions?...

So I think I have most of the pieces, but I could really use a hand in putting them together...

Any help would be extremely appreciated...

Thanks,
Craig


PS:

Code for the FrontPage functions: (note Microsoft wrote the code out on just a few lines, I expanded it and formatted as best I could given my JS knowledge. I may have introduced an error, but I dont think the functions themselves are where I am having trouble.

function FP_swapImg()
{
var doc=document,args=arguments,elm,n;
doc.$imgSwaps=new Array();
for(n=2; n<args.length;n+=2)
{ elm=FP_getObjectByID(args[n]);
if(elm)
{ doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; }
}
}

function FP_getObjectByID(id,o)
{
var c,el,els,f,m,n;
if(!o)o=document;
if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers;
else if(o.all) el=o.all[id];
if(el) return el;
if(o.id==id || o.name==id) return o;
if(o.childNodes) c=o.childNodes;
if(c)
for(n=0; n<c.length; n++)
{ el=FP_getObjectByID(id,c[n]);
if(el) return el;
}
f=o.forms;
if(f)
for(n=0; n<f.length; n++)
{ els=f[n].elements;
for(m=0; m<els.length; m++)
{ el=FP_getObjectByID(id,els[n]);
if(el) return el;
}
}
return null;
}

function FP_swapImgRestore()
{
var doc=document,i;
if(doc.$imgSwaps)
{
for(i=0;i<doc.$imgSwaps.length;i++)
{ var elm=doc.$imgSwaps;
if(elm)
{ elm.src=elm.$src; elm.$src=null; }
}
doc.$imgSwaps=null;
}
}