multiple disjointed image map rollovers on one page

I have three floorplates that I need to have disjointed image map rollovers.  Each rollover floorplate image with be in a different spry tabbed panel.  How do I go about breaking up the code so that the javascript can be used for different the different floorplans?  Below is the code I am using which works for the single image map.  Any help is greatly appreciated.  Thanks!
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
  <!--
  //JavaScript Disjointed Imagemap Code
  //copyright daxassist, 2000-2004
  //visit http://www.daxassist.com for this and other javascripts with full tutorials.
 
  if(document.images) {
    pics = new Array();
    pics[01] = new Image();
    pics[01].src = "images/views/bfour.gif";
    pics[02] = new Image();
    pics[02].src = "images/views/bone.gif";
    pics[03] = new Image();
    pics[03].src = "images/views/athree.gif";
    pics[04] = new Image();
    pics[04].src = "images/views/building.png";
	pics[05] = new Image();
    pics[05].src = "images/views/cone.gif";
	pics[06] = new Image();
    pics[06].src = "images/views/btwo.gif";
	pics[07] = new Image();
    pics[07].src = "images/views/bfive803.gif";
	pics[08] = new Image();
    pics[08].src = "images/views/bfive.gif";
	pics[09] = new Image();
    pics[09].src = "images/views/atwo.gif";
	pics[10] = new Image();
    pics[10].src = "images/views/aone804.gif";
	pics[11] = new Image();
    pics[11].src = "images/views/aone806.gif";
	pics[12] = new Image();
    pics[12].src = "images/views/aone808.gif";
	pics[13] = new Image();
    pics[13].src = "images/views/bthree.gif";
  }
    function changer(from,to) {
    if(document.images) {
    document.images[from].src = pics[to].src;
    }
  }
  //-->
</SCRIPT>
 
 <div id="rollover">
      <div id="holderimg"><img name="holder" id="holder" src="images/views/building.png" width="300" height="200" border="0" alt="Holder"></div>
      <div id="holderdescrip">Roll over the floorplate see the available views and bedroom and bathrooms avialable for each unit.  Click to view the floorplans.</div> </div>
    <div id="fplans"><img src="images/eighthfloor.jpg" width="735" height="484" border="0" usemap="#Map" id="Image1" />
      <map name="Map" id="Map">
        <area id="atwo" shape="rect" coords="49,380,126,455" href="fps/unita2.pdf" alt="Hotspot1" onMouseOver="changer('holder',09);   document.getElementById('holderdescrip').innerHTML='One bedroom<br>One bathroom<br>1258 square feet.'" 
onMouseOut="changer('holder',04);document.getElementById('holderdescrip').innerHTML=''">
        <area id="bfive" area shape="rect" coords="127,376,271,455" href="fps/unitb5.pdf" alt="Hotspot1" onMouseOver="changer('holder',08);   document.getElementById('holderdescrip').innerHTML='Two bedroom plus study<br>Two bathroom<br>2394 square feet.'" 
onMouseOut="changer('holder',04);document.getElementById('holderdescrip').innerHTML=''">
        <area id="bsix" area shape="rect" coords="271,372,412,456" href="fps/unitb6.pdf" alt="Hotspot1" onMouseOver="changer('holder',07);   document.getElementById('holderdescrip').innerHTML='Two bedroom plus study<br>Two bathroom<br>2478 square feet.'" 
onMouseOut="changer('holder',04);document.getElementById('holderdescrip').innerHTML=''">
        <area id="btwo" area shape="rect" coords="410,371,521,458" href="fps/unitb2.pdf" alt="Hotspot1" onMouseOver="changer('holder',06);   document.getElementById('holderdescrip').innerHTML='Two bedroom<br>Two bathroom<br>1687 square feet.'" 
onMouseOut="changer('holder',04);document.getElementById('holderdescrip').innerHTML=''">
        <area id="cone" area shape="rect" coords="521,376,700,462" href="fps/unitc1.pdf" alt="Hotspot1" onMouseOver="changer('holder',05);   document.getElementById('holderdescrip').innerHTML='Two bedroom plus Den<br>Two and one half bath<br>2660 square feet.'" 
onMouseOut="changer('holder',04);document.getElementById('holderdescrip').innerHTML=''">
        <area id="bthree" area shape="rect" coords="569,293,703,377" href="fps/unitb3.pdf;" alt="Hotspot1" onMouseOver="changer('holder',13); document.getElementById('holderdescrip').innerHTML='One bedroom<br>Two bathroom<br>Plus den<br>1750 square feet.'" 
onMouseOut="changer('holder',04);document.getElementById('holderdescrip').innerHTML=''">
        <area id="athree" area shape="rect" coords="572,218,697,292" href="fps/unita3.pdf" alt="Hotspot1" onMouseOver="changer('holder',03); document.getElementById('holderdescrip').innerHTML='One bedroom<br>One and a Half Bathroom<br>Plus Study<br>1614 square feet.'" 
onMouseOut="changer('holder',04);document.getElementById('holderdescrip').innerHTML=''">
        <area id="bone" area shape="rect" coords="533,131,670,218" href="fps/unitb1new.pdf" alt="Hotspot1" onMouseOver="changer('holder',02);
        document.getElementById('holderdescrip').innerHTML='Two bedroom<br>Two bathroom<br>Plus Study<br>1654 square feet.'" 
onMouseOut="changer('holder',04);document.getElementById('holderdescrip').innerHTML=''">
        <area id="bfour" area shape="rect" coords="460,45,565,132" href="fps/unitb4.pdf" alt="Hotspot1" 
onMouseOver="changer('holder',01); 
document.getElementById('holderdescrip').innerHTML='Two bedroom<br>Two bathroom<br>1814 square feet.'" 
onMouseOut="changer('holder',04);document.getElementById('holderdescrip').innerHTML=''">
        <area id="aoneeight" area shape="rect" coords="341,293,414,351" href="fps/unitb1new.pdf" alt="Hotspot1" onMouseOver="changer('holder',12);   document.getElementById('holderdescrip').innerHTML='One bedroom<br>One bathroom<br>885 square feet.'" 
onMouseOut="changer('holder',04);document.getElementById('holderdescrip').innerHTML=''">
        <area id="aonesix" area shape="rect" coords="270,293,342,352" href="javascript:;" alt="Hotspot1" onMouseOver="changer('holder',11);   document.getElementById('holderdescrip').innerHTML='One bedroom<br>One bathroom<br>885 square feet.'" 
onMouseOut="changer('holder',04);document.getElementById('holderdescrip').innerHTML=''">
        <area id="aonefour" area shape="rect" coords="203,294,270,350" href="javascript:;" alt="Hotspot1" onMouseOver="changer('holder',10);   document.getElementById('holderdescrip').innerHTML='One bedroom<br>One bathroom<br>885 square feet.'" 
onMouseOut="changer('holder',04);document.getElementById('holderdescrip').innerHTML=''">
      </map>
    </div>
  </div>

Open in new window

kmurphychiAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

selvolCommented:
I'd drop the code and just use do eaxh image seperate.

See below. I believe that is the 02 inmage rollover on you page.


SElvol

 
<img src="images/views/building.png" onMouseOver="this.src='images/views/bone.gif" onMouseOut="this.src='images/views/building.png" border="0"  width="" height="" >

Open in new window

0
kmurphychiAuthor Commented:
I can't drop the code I don't think.  Here is a live link to what I need to do with three different floorplates.  Will this work with your suggestion?
http://www.mkinteractivedesigns.com/museumplace/fort_worth_condos.html
0
selvolCommented:
I apologize for the last wrong answer..

If I am understanding you. You would like to re-use the same script for 2 other floor plans.?
I hope that is correct.

If the other floor planes are going to use a picture the is the same but on another level. It will work as long as the "hotspot" are in the same place.

You will need to change the description of the picture where the description are.
And the images to match the new ones. I.e.
images/views/??.gif";  

<!--floor plan 2-->
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
  <!--
  //JavaScript Disjointed Imagemap Code
  //copyright daxassist, 2000-2004
  //visit http://www.daxassist.com for this and other javascripts with full tutorials.
 
  if(document.images) {
    pics = new Array();
    pics[201] = new Image();
    pics[201].src = "images/views/??.gif";
    pics[202] = new Image();
    pics[202].src = "images/views/??.gif";
    pics[203] = new Image();
    pics[203].src = "images/views/??.gif";
    pics[204] = new Image();
    pics[204].src = "images/views/??.png";
	pics[205] = new Image();
    pics[205].src = "images/views/?/.gif";
	pics[206] = new Image();
    pics[206].src = "images/views/??.gif";
	pics[207] = new Image();
    pics[207].src = "images/views/??.gif";
	pics[208] = new Image();
    pics[208].src = "images/views/??.gif";
	pics[209] = new Image();
    pics[209].src = "images/views/??.gif";
	pics[210] = new Image();
    pics[210].src = "images/views/??.gif";
	pics[211] = new Image();
    pics[211].src = "images/views/??.gif";
	pics[212] = new Image();
    pics[212].src = "images/views/??.gif";
	pics[213] = new Image();
    pics[213].src = "images/views/??.gif";
  }
    function changer(from,to) {
    if(document.images) {
    document.images[from].src = pics[to].src;
    }
  }
  //-->
</SCRIPT>
 
 
 <div id="rollover">
      <div id="holderimg"><img name="holder" id="holder" src="images/views/building.png" width="300" height="200" border="0" alt="Holder"></div>
      <div id="holderdescrip">Roll over the floorplate see the available views and bedroom and bathrooms avialable for each unit.  Click to view the floorplans.</div> </div>
    <div id="fplans"><img src="images/eighthfloor.jpg" width="735" height="484" border="0" usemap="#Map" id="Image1" />
      <map name="Map" id="Map">
        <area id="atwo" shape="rect" coords="49,380,126,455" href="fps/unita2.pdf" alt="Hotspot1" onMouseOver="changer('holder',209);   document.getElementById('holderdescrip').innerHTML='One bedroom<br>One bathroom<br>1258 square feet.'"
onMouseOut="changer('holder',04);document.getElementById('holderdescrip').innerHTML=''">
        <area id="bfive" area shape="rect" coords="127,376,271,455" href="fps/unitb5.pdf" alt="Hotspot1" onMouseOver="changer('holder',208);   document.getElementById('holderdescrip').innerHTML='Two bedroom plus study<br>Two bathroom<br>2394 square feet.'"
onMouseOut="changer('holder',04);document.getElementById('holderdescrip').innerHTML=''">
        <area id="bsix" area shape="rect" coords="271,372,412,456" href="fps/unitb6.pdf" alt="Hotspot1" onMouseOver="changer('holder',207);   document.getElementById('holderdescrip').innerHTML='Two bedroom plus study<br>Two bathroom<br>2478 square feet.'"
onMouseOut="changer('holder',04);document.getElementById('holderdescrip').innerHTML=''">
        <area id="btwo" area shape="rect" coords="410,371,521,458" href="fps/unitb2.pdf" alt="Hotspot1" onMouseOver="changer('holder',206);   document.getElementById('holderdescrip').innerHTML='Two bedroom<br>Two bathroom<br>1687 square feet.'"
onMouseOut="changer('holder',04);document.getElementById('holderdescrip').innerHTML=''">
        <area id="cone" area shape="rect" coords="521,376,700,462" href="fps/unitc1.pdf" alt="Hotspot1" onMouseOver="changer('holder',205);   document.getElementById('holderdescrip').innerHTML='Two bedroom plus Den<br>Two and one half bath<br>2660 square feet.'"
onMouseOut="changer('holder',04);document.getElementById('holderdescrip').innerHTML=''">
        <area id="bthree" area shape="rect" coords="569,293,703,377" href="fps/unitb3.pdf;" alt="Hotspot1" onMouseOver="changer('holder',213); document.getElementById('holderdescrip').innerHTML='One bedroom<br>Two bathroom<br>Plus den<br>1750 square feet.'"
onMouseOut="changer('holder',04);document.getElementById('holderdescrip').innerHTML=''">
        <area id="athree" area shape="rect" coords="572,218,697,292" href="fps/unita3.pdf" alt="Hotspot1" onMouseOver="changer('holder',203); document.getElementById('holderdescrip').innerHTML='One bedroom<br>One and a Half Bathroom<br>Plus Study<br>1614 square feet.'"
onMouseOut="changer('holder',04);document.getElementById('holderdescrip').innerHTML=''">
        <area id="bone" area shape="rect" coords="533,131,670,218" href="fps/unitb1new.pdf" alt="Hotspot1" onMouseOver="changer('holder',202);
        document.getElementById('holderdescrip').innerHTML='Two bedroom<br>Two bathroom<br>Plus Study<br>1654 square feet.'"
onMouseOut="changer('holder',04);document.getElementById('holderdescrip').innerHTML=''">
        <area id="bfour" area shape="rect" coords="460,45,565,132" href="fps/unitb4.pdf" alt="Hotspot1"
onMouseOver="changer('holder',01);
document.getElementById('holderdescrip').innerHTML='Two bedroom<br>Two bathroom<br>1814 square feet.'"
onMouseOut="changer('holder',04);document.getElementById('holderdescrip').innerHTML=''">
        <area id="aoneeight" area shape="rect" coords="341,293,414,351" href="fps/unitb1new.pdf" alt="Hotspot1" onMouseOver="changer('holder',212);   document.getElementById('holderdescrip').innerHTML='One bedroom<br>One bathroom<br>885 square feet.'"
onMouseOut="changer('holder',04);document.getElementById('holderdescrip').innerHTML=''">
        <area id="aonesix" area shape="rect" coords="270,293,342,352" href="javascript:;" alt="Hotspot1" onMouseOver="changer('holder',211);   document.getElementById('holderdescrip').innerHTML='One bedroom<br>One bathroom<br>885 square feet.'"
onMouseOut="changer('holder',04);document.getElementById('holderdescrip').innerHTML=''">
        <area id="aonefour" area shape="rect" coords="203,294,270,350" href="javascript:;" alt="Hotspot1" onMouseOver="changer('holder',210);   document.getElementById('holderdescrip').innerHTML='One bedroom<br>One bathroom<br>885 square feet.'"
onMouseOut="changer('holder',04);document.getElementById('holderdescrip').innerHTML=''">
      </map>
    </div>
  </div>
<!--End Floor floor plan 2-->
 
For the third one copt the code and paste it and rename all the lines kike this 
 pics[201].src = "images/views/??.gif";
to 
 pics[301].src = "images/views/NEW.gif";.
 
Please clarify the question.
And explaing the 3 floor plans/
Are the images the same with hotspots the same shape?
 
Which I am unlclear on.  

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
selvolCommented:
You still on this one?
0
kmurphychiAuthor Commented:
Thank you!  That was exactly what I needed!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.