Solved

multiple disjointed image map rollovers on one page

Posted on 2009-06-29
5
600 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Will your db performance match your db growth?

In Percona’s white paper “Performance at Scale: Keeping Your Database on Its Toes,” we take a high-level approach to what you need to think about when planning for database scalability.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

623 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