Question

Jump Menu show/hide layers

Asked by: redpoppy

Hi Experts,

Looking through the forum I can see it's possible to attach a behaviour to show or hide a layer when an item is selected from a drop down box but I need to show and hide several layers each time an item is selected. For example if my drop down box contains 2 items; "north" and "south", when "north" is selected I want to show layers "mapnorth", "dirnorth" and "optnorth" whilst hiding "mapsouth", "dirsouth" and "optsouth"  and vice-versa when "south" is selected. Is this possible?

This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.

Subscribe now for full access to Experts Exchange and get

Instant Access to this Solution

  • Plus...
  • 30 Day FREE access, no risk, no obligation
  • Collaborate with the world's top tech experts
  • Unlimited access to our exclusive solution database
  • Never be left without tech help again

Subscribe Now

Asked On
2006-03-22 at 09:14:50ID21784369
Tags

hide

,

show

,

menu

,

layer

,

jump

Topic

Adobe Dreamweaver

Participating Experts
2
Points
250
Comments
16

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

  • "The time we save is the biggest benefit of Experts Exchange to Warner Bros. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange." Mike Kapnisakis, Warner Bros.
  • "Our team likes having a resource that is more secure than just using Google and most experts using this service really know their stuff. It's nice to look here first versus using Google." Dayna Sellner, Lockheed Martin
  • "Anytime that I've been stumped with a problem, 9 out of 10 times Experts Exchange has either the accepted solution or an open discussion of the potential solution to the problem." Kenny Red, eBay Inc.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.

Screenshot of Experts Exchange Knowledgebase

Need individual assistance?

Our experts are ready to help.

If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.

Screenshot of Experts Exchange Knowledgebase

Want to learn from the best?

Read articles from industry experts.

Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.

Screenshot of an Article

Working on a long term project?

Store your work and research.

Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.

Screenshot of Experts Exchange Knowledgebase

Access the answers to your technology questions today.

Subscribe Now

30-day free trial. Register in 60 seconds.

What Makes Experts Exchange Unique?

Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.

Trusted by the world's most respected brands.

image of each brand's logo

Faithfully serving IT professionals since 1996.

Experts Exchange Logo

Try it out and discover for yourself.

Subscribe Now

30-day free trial. Register in 60 seconds.

Related Solutions

  1. Floating Layers
    Hey, Does anyone know any good code that will allow me to have a floating side layer at the edge of my website? I mean like a menu that will follow the viewer when he scrolls up and down the page. Ive already got one working but it appears to be only compatible with Windows E...
  2. Northing Easting Calculations..
    Im using a Postcode component giving me an OS grid Easting and Northing positions. I have 2 coordinates, I need to measure the distance between the 2 points and also get the direction of travel. I have sussed out the direction problem (I think) but im struggling with the dire...
  3. How to specify north,south,center using flow lay out
    hi everybody, plz note:the coding below is incomplete but is compiling without errors. My Objective:To place 3 push buttons b1,b2,b3 in south region,a textarea t1 in center and a label l in north using flow layout.I have tried the program by referring the boo...
  4. jump menu, button and layers
    I have a jump menu which contains a few choices, each of these choices refers to a layer. I would like to be able to make a selection in the jumpmenu and press GO on the buttom and then I would like the layer to become visible. Can any provide with an example of how this w...

Free Tech Articles

  1. WARNING: 5 Reasons why you should NEVER fix a computer for free.
    It is in our nature to love the puzzle. We are obsessed. The lot of us. We love puzzles. We love the challenge. We thrive on finding the answer. We hate disarray. It bothers us deep in our soul. W...
  2. SCCM OSD Basic troubleshooting
    SCCM 2007 OSD is a fantastic way to deploy operating systems, however, like most things SCCM issues can sometimes be difficult to resolve due to the sheer volume of logs to sift through and the dispe...
  3. Migrate Small Business Server 2003 to Exchange 2010 and Windows 2008 R2
    This guide is intended to provide step by step instructions on how to migrate from Small Business Server 2003 to Windows 2008 R2 with Exchange 2010. For this migration to work you will need the fo...
  4. Create a Win7 Gadget
    This article shows you how to create a simple "Gadget" -- a sort of mini-application supported by Windows 7 and Vista. Gadgets can be dropped anywhere on the desktop to provide instant information, ...
  5. Outlook continually prompting for username and password
    There have been a lot of questions recently regarding Outlook prompting for a username and password whilst using Exchange 2007. There are a few reasons why this would happen and I will try to cover t...
  6. Backup Exchange 2010 Information Store using Windows Backup
    There seems to be quite a lot of confusion around the ability to backup Exchange 2010 using the built in Windows Backup feature. This stems from the omission of this feature prior to Exchange 2007 s...

Cloud Class Webinars

  1. Avoiding Bugs in Microsoft Access
    Alison Balter takes and in-depth look at avoiding bugs in Access. In this webinar you will learn about using the immediate window to debug your applications, invoking the debugger, using breakpoints to troubleshoot, stepping through code, setting the next statement to execute, ...
  2. Top 10 Best New Features in Visio 2010
    Scott Helmers gives live demonstrations of the top 10 new features in Visio 2010. This webinar will teach you how to create compelling diagrams by adding shapes to the page with a single click, linking the shapes in a diagram to data in Excel (or SQL Server, or SharePoint), ...
  3. IT Consultant Business Secrets Revealed
    Michael Munger, Experts Exchange tech pro and IT consultant, pulls back the curtain on his very successful businesses and answers question on every IT consultant and business owner should know about. He shares secrets on what he did to solve the 5 most common problems in IT, ...
  4. Disaster Recovery and Business Continuity
    Quest CTO, Mike Billon, gives an overview of the steps involved in building a dunamic disaster recovery plan. Through case studies and an examination of software/hardware tooles for monitoring and testing, you'll gain a better understandin of where you are, where you want ...
  5. Organize Your Visio Diagrams with Containers and Lists
    Scott Helmers uses cross functional flowcharts, wireframe diagrams, data graphic legends and seating charts to teach you: how to ustilize all three new structured diagram components in Visio 2010, the best practices for organizeing shapes in previous version of Visio, how to organize ...
  6. How to Us Objects, Properties, Events and Methods in Microsoft Access
    Alison Dalter gives an in-depbth look at objects, properties, events and methods in Microsoft Access. In this webinar you will learn about using the object browser, referring to objects, working with properties and methods, working with object variables, understanding the ...

Join the Community

Give a Little. Get a Lot.

Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.

Join the Community

Answers

 

by: jason1178Posted on 2006-03-22 at 10:31:36ID: 16260299

Yes, this is possible.  See this question for the principle:

http://www.experts-exchange.com/Web/WebDevSoftware/DreamWeaver/Q_21748899.html

The edit to the menu items would look something like this:

<select name="select">
      <option onClick="MM_showHideLayers('mapnorth','','show','dirnorth','','show','optnorth','','show','mapsouth','','hide','dirsouth','','hide','optsouth','','hide')" value="North">North</option>
      <option onClick="MM_showHideLayers('mapnorth','','hide','dirnorth','','hide','optnorth','','hide','mapsouth','','show','dirsouth','','show','optsouth','','show') value="South">South</option>
</select>

 

by: redpoppyPosted on 2006-03-23 at 10:02:39ID: 16272125

Hi Jason,

Thanks for reply. I tried putting in this code:
<form>
       <select name="select">
      <option onClick="MM_showHideLayers('mapnorth','','show','mapsouth','','hide')" value="North">North</option>
      <option onClick="MM_showHideLayers('mapsouth','','show','mapnorth','','hide')" value="South">South</option>

  </select></form>

and nothing happened when I clicked on either option. I've tried testing it with a straightforward link to make sure the MM_showHideLayers routine is working OK (v6 by the way)  and that was fine but it just doesn't seem to recognise the "onclick" when attached to the option. I'm using DW8 and XHTML 1.0 Strict, not sure if either of those would make a difference?

Any thoughts please?

 

by: jason1178Posted on 2006-03-23 at 10:16:27ID: 16272272

Post all the code please

 

by: redpoppyPosted on 2006-03-23 at 12:46:13ID: 16274183

Hi Jason - here you go, thanks for your time.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Maps &amp; Itineraries</title>
<link type="text/css" rel="stylesheet" href="morocco_common.css" />
<link type="text/css" rel="stylesheet" title="default" href="morocco_norm.css" />
<link type="text/css" rel="alternate stylesheet" title="large text" href="morocco_large.css" />
<script type="text/javascript" src="common_js.js">
</script>
<style type="text/css" >
<!--
li#ln11 {background-color:#D9D9FF; border-top:#9966CC solid 2px; border-bottom:#9966CC solid 2px;}
-->
</style>
<script type="text/javascript">
<!--


function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>


</head>
<body >
<div id="wrapper"><!-- #BeginLibraryItem "/Library/top.lbi" -->
  <div id="header">
    <a href="#" class="mainlink" onclick="tmt_winOpen('popups/atolextra.htm','newWin','width=620,height=580,left=10,top=10,scrollbars=yes,copyhistory=yes',1)"><img src="images/atol_logo.gif" alt=
        "ATOL Protected 6228 - CLICK for more information on your ATOL Protection"
        width="75" height="75" class="imageright" /></a>
    <span class=
        "tel1">Tel:+44(0)1239 654 466<br />
    UK local rate: 0845 345 7195</span>
    <h1> Naturally Morocco </h1>
    <h3> Experience the Real Morocco </h3>
    <div id="topnavbar">
      <ul>
        <li id="tn1">
          <a href="index.htm" >Home</a>
        </li>
        <li id="tn2">
          <a href="unique-naturally-morocco.htm" >Why We're Unique</a>
        </li>
        <li id="tn3">
          <a href="book_now.htm" >Book Now</a>
        </li>
        <li id="tn4">
          <a href="javascript:addbookmark()">Bookmark</a>
        </li>
        <li id="tn5">
          <a href="request_quote.php">Request Quotation</a>
        </li>
        <li id="tn6">
          <a href="Brochures/Brochure_Index.htm">Brochures</a>
        </li>
        <li id="tn7">
          <a href="contact-details.htm">Contact</a>
        </li>
      </ul>
    </div>
  </div>
  <!-- #EndLibraryItem -->
 
  <div class="clear" >&nbsp;</div>
 
 
  <div  style="width:510px; height:500px; float:right;"   id="rightcont">
    <div  style="height:25px;" id="rightlinks">
     
    <form>
       <select name="select">
      <option onClick="MM_showHideLayers('mapnorth','','show','mapsouth','','hide')" value="North">North</option>
      <option onClick="MM_showHideLayers('mapsouth','','show','mapnorth','','hide')" value="South">South</option>

  </select></form>

<a href="#" onclick="MM_showHideLayers('mapnorth','','show','mapsouth','','hide')">north</a>
<a href="#" onclick="MM_showHideLayers('mapsouth','','show','mapnorth','','hide')">south</a><br />
<!-- north links -->
     
    </div>
    <div  id="maps" >
      <!-- South -->
      <div  style="position:absolute; visibility:visible;z-index:01; padding-top:75px;" id="mapsouth">
        <img src="images/maps/morocco_south.gif" width="508" height="303"  id="morocco_south" usemap="#m_morocco_south" alt="" />
        <p class="ftrlink" style="text-decoration:none; clear:both" >Microsoft &reg; Encarta &reg; 2006. &copy; 1993-2005 Microsoft Corporation. All rights reserved.</p>
      </div>
     
      <!-- North -->
      <div  style="position:absolute; visibility:hidden; "  id="mapnorth">
        <img src="images/maps/morocco_north.gif" width="424" height="481" id="morocco_north" usemap="#m_morocco_north" alt=""   style="display:block; margin-left:auto; margin-right:auto;z-index:01" />
        <p class="ftrlink" style="text-decoration:none; clear:both" >Microsoft &reg; Encarta &reg; 2006. &copy; 1993-2005 Microsoft Corporation. All rights reserved.</p>
      </div>
     
     
  </div></div>
  <p class="paraspacer">&nbsp;</p>
  <!-- #BeginLibraryItem "/Library/footer.lbi" -->
  <p class="paraspacer">&nbsp;</p>
  <p class="ftrtext">Naturally Morocco Limited - Experience the Real Morocco<br />
    <span class="tel1">Tel: +44 (0)1239 654 466 &nbsp;&nbsp;&nbsp;UK local rate: 0845 345 7195</span></p>
  <div class="imgblock">
    <a href="mailto:webenq@naturallymorocco.co.uk" class="ftrlink">Email Us</a>
    <a href="#" class="ftrlink"  onclick="tmt_winOpen('popups/privacy_copyright.htm','newWin','width=620,height=450,left=150,top=50,menubar=yes,scrollbars=yes,resizable=yes',1)">Privacy Policy</a>
    <a href="#" class="ftrlink"  onclick="tmt_winOpen('popups/privacy_copyright.htm','newWin','width=620,height=450,left=150,top=50,menubar=yes,scrollbars=yes,resizable=yes',1)">Copyright Policy</a>
    <a href="#" class="ftrlink"  onclick="tmt_winOpen('popups/booking_conditions.htm','newWin','width=620,height=450,left=150,top=50,menubar=yes,scrollbars=yes,resizable=yes',1)">Booking Conditions</a>
    <a href="#" class="ftrlink" onclick="tmt_winOpen('http://www.xe.com/ucc/','newWin','width=800,height=600,left=10,top=10,scrollbars=yes,copyhistory=yes',1)">Currency Converter</a>
    <br />
    <br />
    <a href="http://validator.w3.org/check?uri=referer"
     onclick="this.href='http://validator.w3.org/check?uri=' + document.URL"><img
      src="images/w3c_val.gif" alt="Valid XHTML 1.0 Strict" width="88" height="31" />    </a>
  </div>
<!-- #EndLibraryItem --></div>
</body>
</html>

 

by: jason1178Posted on 2006-03-23 at 13:02:29ID: 16274389

It does work on this end...but not on the first time you select each option in the pull down.  I think it is because of the initial visibility state combined with "North" coming up first.  I suggest doing the following:

1) Hiding Map North and Map South using body onLoad

2) Make a third option for the select box that has no event.

This works for me.  Modified code (minus Library items) attached:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Maps &amp; Itineraries</title>
<link type="text/css" rel="stylesheet" href="morocco_common.css" />
<link type="text/css" rel="stylesheet" title="default" href="morocco_norm.css" />
<link type="text/css" rel="alternate stylesheet" title="large text" href="morocco_large.css" />
<script type="text/javascript" src="common_js.js">
</script>
<style type="text/css" >
<!--
li#ln11 {background-color:#D9D9FF; border-top:#9966CC solid 2px; border-bottom:#9966CC solid 2px;}
-->
</style>
<script type="text/javascript">
<!--
function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
//-->
</script>


</head>
<body onload="MM_showHideLayers('mapsouth','','hide','mapnorth','','hide')" >
<div id="wrapper">
 
  <div class="clear" >&nbsp;</div>
 
 
  <div  style="width:510px; height:500px; float:right;"   id="rightcont">
    <div  style="height:25px;" id="rightlinks">
     
    <form>
       <select name="select">
      <option selected="selected">Please Select A Region</option>
      <option onClick="MM_showHideLayers('mapnorth','','show','mapsouth','','hide')" value="North">North</option>
      <option onClick="MM_showHideLayers('mapsouth','','show','mapnorth','','hide')" value="South">South</option>

                      </select>
  </form>

<!-- <a href="#" onclick="MM_showHideLayers('mapnorth','','show','mapsouth','','hide')">north</a>
<a href="#" onclick="MM_showHideLayers('mapsouth','','show','mapnorth','','hide')">south</a><br /> -->
<!-- north links -->
     
    </div>
    <div id="maps" >
      <!-- South -->
      <div  style="position:absolute; visibility:visible;z-index:01; padding-top:75px;" id="mapsouth">
        <img src="images/maps/morocco_south.gif" width="508" height="303"  id="morocco_south" usemap="#m_morocco_south" alt="" />
        <p class="ftrlink" style="text-decoration:none; clear:both" >Microsoft &reg; Encarta &reg; 2006. &copy; 1993-2005 Microsoft Corporation. All rights reserved.</p>
      </div>
     
      <!-- North -->
      <div  style="position:absolute; visibility:hidden; "  id="mapnorth">
        <img src="images/maps/morocco_north.gif" width="424" height="481" id="morocco_north" usemap="#m_morocco_north" alt=""   style="display:block; margin-left:auto; margin-right:auto;z-index:01" />
        <p class="ftrlink" style="text-decoration:none; clear:both" >Microsoft &reg; Encarta &reg; 2006. &copy; 1993-2005 Microsoft Corporation. All rights reserved.</p>
      </div>
     
     
  </div></div>
  <p class="paraspacer">&nbsp;</p>
</div>
</body>
</html>

 

by: redpoppyPosted on 2006-03-23 at 13:53:04ID: 16275049

Hi Jason,

Thanks again for looking at this. I've copied your code into my set up and found that it still doesn't work in IE6 but does work in Firefox 1.7  and Opera 8.52 - I hadn't previously checked the latter two.  I've also tried changing the DOCTYPE to xhtml transitional and html 4.01 but it didn't make any difference. Any ideas why it's not working in IE6?

 

by: jason1178Posted on 2006-03-23 at 14:08:20ID: 16275222

Because IE sucks little flat rocks?  I think that IE is choking on the inline event handler and you probably need to re-write the javascript so that it fires off differently.  I'm not the sharpest knife in the drawer when it comes to javascript, though.

 

by: redpoppyPosted on 2006-03-23 at 14:28:15ID: 16275461

OK Jason, I think maybe I should re-post on the Javascript board then. I'm not sure what to do about awarding points, I'd like to send some your way for getting me this far but not sure how to go about it - can you or a Moderator advise please?
P.S just checked out your profile - good luck with your new baby - any sign yet?

 

by: jason1178Posted on 2006-03-23 at 14:33:09ID: 16275504

Not yet.  End of April.

Three ways to handle this:

1) Close this question with a B to reflect a partial answer and start a new question in the JS board.  It isn't my fault that IE doesn't support JS correctly :)

2) Post a 20 pt Pointer Question in the JS board to this questions and if/when you get an answer, split the points here.

3) Ask Community Support to PAQ this and refund your points if you feel the answer is not worth the expenditure.

 

by: RouchiePosted on 2006-03-24 at 03:13:31ID: 16278916

redpoppy
IE doesn't support the OnClick event of the OPTION tag as Jason suggested, so I've re-written your javascript based on code snippets from the net.  Dreamweaver's version has also been removed as I find it totally confusing.  This new version has been tested on IE6 and FF1.5.
All you need to do is add your style div's back in.  I removed these to make the code faster to read...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Maps &amp; Itineraries</title>
<script language="javascript" type="text/javascript">
function hideAll() {
      document.getElementById("mapnorth").visibility = "hidden";
      document.getElementById("mapsouth").visibility = "hidden";
      }
      
function doChange() {
            document.getElementById("mapnorth").style.visibility = "hidden";
            document.getElementById("mapsouth").style.visibility = "hidden";
            var selectBox = document.forms[0].changer;
            var user_input = selectBox.options[selectBox.selectedIndex].value;
            document.getElementById(user_input).style.visibility = "visible";
      }
</script>
</head>
<body onload="hideAll()">

      <form id="form1" name="form1">
        <select name="changer" id="changer" onchange="doChange()">
          <option selected="selected">Please Select A Region</option>
          <option value="mapnorth" id="north" title="north">North</option>
          <option value="mapsouth" id="south" title="south">South</option>
        </select>
      </form>

      <div  style="position:absolute; z-index:01; padding-top:75px; visibility:hidden;" id="mapsouth">
            <img src="images/maps/morocco_south.gif" width="508" height="303"  id="morocco_south" usemap="#m_morocco_south" alt="" />
            <p class="ftrlink" style="text-decoration:none; clear:both" >
            Microsoft &reg; Encarta &reg; 2006. &copy; 1993-2005 Microsoft Corporation. All rights reserved.</p>
      </div>
        
      <div  style="position:absolute; visibility:hidden;"  id="mapnorth">
            <img src="images/maps/morocco_north.gif" width="424" height="481" id="morocco_north" usemap="#m_morocco_north" alt="" style="display:block; margin-left:auto; margin-right:auto;z-index:01" />
            <p class="ftrlink" style="text-decoration:none; clear:both" >
            Microsoft &reg; Encarta &reg; 2006. &copy; 1993-2005 Microsoft Corporation. All rights reserved.</p>
      </div>
</body>
</html>

 

by: redpoppyPosted on 2006-03-24 at 05:29:18ID: 16279639

Hi Rouchie,
Thanks a lot for having a look at this for me - using your code is it possble to show/hide more than 1 layer when an option is selected, eg: when "north" is selected to show layers"mapnorth", "dirnorth" and "optnorth" whilst hiding "mapsouth", "dirsouth" and "optsouth"  and vice-versa when "south" is selected?

 

by: RouchiePosted on 2006-03-24 at 06:22:42ID: 16280150

Yes it is but it will need expanding.  After some experimenting (Googling!) the following should do the trick.  Just expand the form options using the same pattern as I've started with in the first option.

What happens is that 3 values are now passed to javascript from the form options.  Javascript then breaks them up using the , symbol and then loops through the 3 choices and hides each one.

To hide everything to begin with, just add any new DIV ID's to the hideAll() function.

------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Maps &amp; Itineraries</title>
<script language="javascript" type="text/javascript">
function hideAll() {
      document.getElementById("mapnorth").style.visibility = "hidden";
      document.getElementById("dirnorth").style.visibility = "hidden";
      document.getElementById("optnorth").style.visibility = "hidden";
      document.getElementById("mapsouth").style.visibility = "hidden";
      }
      
function doChange() {
            // hide everything to begin with
            hideAll()
            
            // get values taken from form and seperate them with ,
            var selectBox = document.forms[0].changer;
            var user_input = selectBox.options[selectBox.selectedIndex].value;
            var myArray = user_input.split(",");
            // loop through and show each one in turn
            for (i=0;i<myArray.length;i++)
            {
                  document.getElementById(myArray[i]).style.visibility = "visible";
            }
      }
</script>
</head>
<body onload="hideAll()">


      <form id="form1" name="form1">
        <select name="changer" id="changer" onchange="doChange()">
          <option selected="selected">Please Select A Region</option>
          <option value="mapnorth,dirnorth,optnorth" id="north" title="north">North</option>
          <option value="mapsouth" id="south" title="south">South</option>
        </select>
      </form>

      <div  style="position:absolute; z-index:01; padding-top:75px; visibility:hidden;" id="mapsouth">
            <img src="images/maps/morocco_south.gif" width="508" height="303"  id="morocco_south" usemap="#m_morocco_south" alt="" />
            <p class="ftrlink" style="text-decoration:none; clear:both" >
            Microsoft &reg; Encarta &reg; 2006. &copy; 1993-2005 Microsoft Corporation. All rights reserved.</p>
      </div>
        
      <div  style="position:absolute; visibility:hidden;"  id="mapnorth">
            <img src="images/maps/morocco_north.gif" width="424" height="481" id="morocco_north" usemap="#m_morocco_north" alt="" style="display:block; margin-left:auto; margin-right:auto;z-index:01" />
            <p class="ftrlink" style="text-decoration:none; clear:both" >
            Microsoft &reg; Encarta &reg; 2006. &copy; 1993-2005 Microsoft Corporation. All rights reserved.</p>
      </div>

        <div id="dirnorth">DIRNORTH content goes here</div>
        <div id="optnorth">OPTNORTH content goes here</div>

</body>
</html>

 

by: redpoppyPosted on 2006-03-25 at 09:41:07ID: 16289578

Hi Rouchie,

I've now managed to put your code into my routines with a couple of changes and it works fine in all 3 browsers - thanks for all your efforts, much appreciated.

I don't know how I should allocate the points - you've given me the solution but Jason put me on the right track initially. Is this a situation where I split the points, say 200 to you and 50 to Jason? I want to be fair about it all, but I haven't come across this situation before.

 

by: RouchiePosted on 2006-03-26 at 23:57:48ID: 16298295

redpoppy,
Glad it worked for you.  Just split the points down the middle, 125 each.  I'm happy with that if Jason is?
...besides, eventually it will be nice to see a change of names at the top of that OVERALL list .... ;-)

 

by: redpoppyPosted on 2006-03-27 at 10:02:31ID: 16302543

I've taken your suggestion Rouchie, hope that's OK with you Jason- thanks again for all your help, much appreciated.

 

by: jason1178Posted on 2006-03-27 at 10:10:58ID: 16302601

Whoops, late back to the party...sorry guys.

Any split is fine.  Rouchie deserves more points for this because his solution is clearly better, but I won't argue with a 50/50 :)

I'll try to displace some people up there before I have to semi-retire...

20120131-EE-VQP-002

3 Ways to Join

30-Day Free Trial

The Experts

98% positive feedback on 31,087 answers since March 2000. angeliii is a Microsoft Most Valuable Professional for his work with MS SQL Server & Develoment.

He has also proven his knowledge of Visual Basic Programming, PHP Scripting and Oracle Databases.

The Experts

97% positive feedback on 10,752 answers since July 2000. lrmoore has more than 18 years experience in the networking industry.

The six-time Mircosoft MVPs specialties include firewalls, virtual private networking, and network management.

Testimonials

"...and excellent source for support... Kind of like having your very own IT dept." Electriciansnet

Testimonials

"I was apprehensive at signing up at first. However... it has already made my life as an IT administrator much easier." JaCrews

Testimonials

"WOW! You guys have great, active, and knowledgeable people on here." moore50

Business Clients

Business Clients

In the Press

"If you’ve got a question... Experts Exchange can supply an answer.”

In the Press

"...an invaluable aid for both IT professionals and those who require tech support."

In the Press

"where IT professionals provide quick answers on just about any topic"

Business Account Plans

Loading Advertisement...