We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

multiple disjointed image map rollovers on one page

kmurphychi
kmurphychi asked
on
Medium Priority
644 Views
Last Modified: 2012-05-07
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

Comment
Watch Question

Commented:
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

Author

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
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Commented:
You still on this one?

Author

Commented:
Thank you!  That was exactly what I needed!
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.