Link to home
Start Free TrialLog in
Avatar of kmurphychi
kmurphychi

asked on

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

Avatar of James Williams
James Williams
Flag of United States of America image

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

Avatar of kmurphychi
kmurphychi

ASKER

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
ASKER CERTIFIED SOLUTION
Avatar of James Williams
James Williams
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
You still on this one?
Thank you!  That was exactly what I needed!