Help Integrating a Javascript with Image Map

[vlane95678]

Hi there all!

I am hoping someone can lend a helping hand on something.

We are using a javascript that when you click the thumbnail, you get a larger picture of it. When the large picture appears we want it to have 2 'areas' that link to separate pages. We don't know how to integrate the javascript with the image map html.

Here is the javascript:
========
<a href="javascript:doPic('Lanitech_Artwork/ba-gallery2.jpg');">
<img src="Lanitech_Artwork/ba-gallery2.jpg" width=55 height=72 border=0></a>
==========

Here is the html:
=========
<map name="FPMap2">
<area target="_blank" href="ba-gallery2_small.htm" shape="rect" coords="211, 4, 358, 126">
<area target="_blank" coords="11, 7, 204, 6, 205, 138, 358, 140, 353, 483, 4, 483" shape="polygon" href="ba-gallery2_small.htm">
</map>
<img name="mainpic" src="Lanitech_Artwork/ba-gallery2.jpg" border=0 width="359" height="488" usemap="#FPMap2">
===========

Here is what we wrote that doesn't work (every time we save it in Frontpage the map script disappears all by itself!):
==========
<map name="FPMap1">
<a href="javascript:doPic('Lanitech_Artwork/ba-gallery2.jpg',usemap='#FPMap1');">
<area target="_blank" href="ba-gallery2_small.htm" shape="rect" coords="211, 4, 358, 126">
<area target="_blank" coords="11, 7, 204, 6, 205, 138, 358, 140, 353, 483, 4, 483" shape="polygon" href="ba-gallery2_small.htm">
</map>
<img src="Lanitech_Artwork/ba-gallery2.jpg" width=55 height=72 border=0></a>

=========
Please help us write this correctly, anyone PLEASE!!

[Snookerman]

I don't know what javascript code you are using so I don't know if the link should be around the image map or the image, but the way you have it now is wrong. Your first open the map, then the link, but you close the map first and the link last:

<map name="FPMap1">
<a href="javascript:doPic('Lanitech_Artwork/ba-gallery2.jpg',usemap='#FPMap1');">
<area target="_blank" href="ba-gallery2_small.htm" shape="rect" coords="211, 4, 358, 126">
<area target="_blank" coords="11, 7, 204, 6, 205, 138, 358, 140, 353, 483, 4, 483" shape="polygon" href="ba-gallery2_small.htm">
</map>
<img src="Lanitech_Artwork/ba-gallery2.jpg" width=55 height=72 border=0></a>
Your code should look like one of the following two:

<a href="javascript:doPic('Lanitech_Artwork/ba-gallery2.jpg',usemap='#FPMap1');">
<map name="FPMap1">
<area target="_blank" href="ba-gallery2_small.htm" shape="rect" coords="211, 4, 358, 126">
<area target="_blank" coords="11, 7, 204, 6, 205, 138, 358, 140, 353, 483, 4, 483" shape="polygon" href="ba-gallery2_small.htm">
</map>
<img src="Lanitech_Artwork/ba-gallery2.jpg" width=55 height=72 border=0></a>
or

<map name="FPMap1">
<area target="_blank" href="ba-gallery2_small.htm" shape="rect" coords="211, 4, 358, 126">
<area target="_blank" coords="11, 7, 204, 6, 205, 138, 358, 140, 353, 483, 4, 483" shape="polygon" href="ba-gallery2_small.htm">
</map>
<a href="javascript:doPic('Lanitech_Artwork/ba-gallery2.jpg',usemap='#FPMap1');"><img src="Lanitech_Artwork/ba-gallery2.jpg" width=55 height=72 border=0></a>
I'm guessing it's the second one.

To be more specific:
This is invalid: <aaa><bb> </aaa></bb>
This is valid: <aaa><bb> </bb></aaa>

[vlane95678]

We will try both and see what happens! Thank you so much.

[Snookerman]

You're welcome and good luck!

[diltony]

Alternatively, u can use the innerHTML property to render both the map and the image at the same using what frontpage generate, if your present options do nt work, post to me so i can write out a sample code.

[M.SD]

Check this, might be useful:
http://msd-bml.blogspot.com/2008/09/dynamic-image-map.html