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>
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
http://www.mkinteractivedesigns.com/museumplace/fort_worth_condos.html
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
You still on this one?
ASKER
Thank you! That was exactly what I needed!
See below. I believe that is the 02 inmage rollover on you page.
SElvol
Open in new window