Solved

multiple disjointed image map rollovers on one page

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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Read about why website design really matters in today's demanding market.
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The viewer will learn how to count occurrences of each item in an array.

707 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now