Solved

multiple disjointed image map rollovers on one page

Posted on 2009-06-29
5
584 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

0
Comment
Question by:kmurphychi
  • 3
  • 2
5 Comments
 
LVL 17

Expert Comment

by:selvol
ID: 24740588
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
 

Author Comment

by:kmurphychi
ID: 24741894
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
 
LVL 17

Accepted Solution

by:
selvol earned 500 total points
ID: 24746511
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
 
LVL 17

Expert Comment

by:selvol
ID: 24758606
You still on this one?
0
 

Author Closing Comment

by:kmurphychi
ID: 31598084
Thank you!  That was exactly what I needed!
0

Featured Post

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question