imagemaps not functioning in hidden div when made visible

I have a wordpress site that is about obtaining information about services provided in a specific county in the state of Kansas. When you open the page you see a map of Kansas with 7 fairly obvious regions across the state. This image is an imagemap with the href='#". When you click on (onclick(region);return false;) a region it calls a javascript function with a switch selecting a hidden div with an imagemap of the region setting the div from style="hidden" to style="block" . This works fine except that all I get is the image of the region without any functioning imagemap. I run my cursor all around the image and there is no link to be found.

So what I am wanting is for the 7 hidden divs when set to "block" to also show the imagemap along with the image.

So 8 divs total: the initial div set to "style=block" and 7 hidden divs with style="hidden". The imagemap functions properly in the initial div, but when others are made visible the imagemaps do not function.

Here are the first two divs and then following that the javascript I call.

<area shape="RECT" COORDS="565,1,841,193 " onclick="region(2);return false;" alt="NE Kansas Counties" href = "#">

<area shape="RECT" COORDS="566,228,716,278 " onclick="region(3);return false;" alt="SE Kansas Counties" href = "#">

<area shape="RECT" COORDS="687,196,732,277 " onclick="region(3);return false;" alt="SE Kansas Counties" href = "#">

<area shape="RECT" COORDS="736,245,891,277 " onclick="region(3);return false;" alt="SE Kansas Counties" href = "#">

<area shape="RECT" COORDS="735,197,897,242 " onclick="region(3);return false;" alt="SE Kansas Counties" href = "#">

<area shape="RECT" COORDS="839,1,874,120 " onclick="region(2);return false;" alt="NE Kansas Counties" href = "#">

<area shape="RECT" COORDS="565,191,683,226 " onclick="region(2);return false;" alt="NE Kansas Counties" href = "#">

<area shape="RECT" COORDS="428,177,492,227 " onclick="region(4);return false;" alt="N Central Kansas Counties" href = "#">

<area shape="RECT" COORDS="294,1,425,199 " onclick="region(4);return false;" alt="N Central Kansas Counties" href = "#">

<area shape="RECT" COORDS="427,1,563,173 " onclick="region(4);return false;" alt="N Central Kansas Counties" href = "#">

<area shape="RECT" COORDS="495,178,561,160 " onclick="region(4);return false;" alt="N Central Kansas Counties" href = "#">

<area shape="RECT" COORDS="296,201,425,281 " onclick="region(5);return false;" alt="S Central Kansas Counties" href = "#">

<area shape="RECT" COORDS="298,280,587,456 " onclick="region(5);return false;" alt="S Central Kansas Counties" href = "#">

<area shape="RECT" COORDS="427,221,562,278 " onclick="region(5);return false;" alt="S Central Kansas Counties" href = "#">

<area shape="RECT" COORDS="1,1,292,198 " onclick="region(6);return false;" alt="NW Kansas Counties" href = "#">

<area shape="RECT" COORDS="1,201,293,457 " onclick="region(7);return false;" alt="SW Kansas Counties" href = "#">

<area shape="RECT" COORDS="588,279,893,458 " onclick="region(3);return false;" alt="SE Kansas Counties" href = "#">

javascript

function region(elem
){ switch(elem)
 {
case 1: document.getElementById('KCmetro').style.display = "block"; document.getElementById('KsRegions').style.display =         "none";
 break;

case 2:
document.getElementById('NEkansas').style.display = "block"; document.getElementById('KsRegions').style.display = "none";
break;
 case 3:
document.getElementById('SEkansas').style.display = "block"; document.getElementById('KsRegions').style.display = "none";
break;
case 4:
 document.getElementById('NCentral').style.display = "block"; document.getElementById('KsRegions').style.display = "none";
 break;
case 5:
 document.getElementById('SCentral').style.display = "block"; document.getElementById('KsRegions').style.display = "none";
break;
case 6: document.getElementById('NWkansas').style.display = "block"; document.getElementById('KsRegions').style.display = "none"; break; case 7: document.getElementById('SWkansas').style.display = "block"; document.getElementById('KsRegions').style.display = "none";
break;

}

}

As I say, the divs change and I see the image but not a functioning imagemap. From there they will select a county and that will take them to the a page with services available from the area queried from SQL via PHP. I could redo this in PHP, but it seems that this should work.

Thank you for your time and patience.
John MilesAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Slick812Commented:
greetings  John Miles, , I am commenting here because no one else has, if this question is still active, I will tell you what I think.
I can not understand some of the ways you describe the HTML set up you have, But here is some code that works for me using Images and <map> tags, that show and hide <div> -
<!doctype html>
<html lang=en><head><title>Hidden Image Map TEST</title>
<script>/* <![CDATA[ */
function swapImage() {
var divDis = document.getElementById("imgDiv2");

if(divDis.style.display == "block") {//alert("this is the display = "+document.getElementById("imgDiv2").id);
  divDis.style.display = "none";
  document.getElementById("imgDiv1").style.display = "block";
  } else {
  divDis.style.display = "block";
  document.getElementById("imgDiv1").style.display = "none";
  }
}

function region(elem) {
switch(elem) {
case 1: alert("this is 1 click");
 break;

case 2: alert("this is 2 click");
break;

 case 3: alert("this is 3 click");
break;

case 4: alert("this is 4 click");
 break;
 
case 5: 
case 6: alert("this is 5 & 6 click");
break; 
}
}
/* ]]> */</script>

<style>
.body{background: #eef;}

#imgDiv2{display: none;}
</style>
</head><body>
<h3>Hidden Image Map <b>TEST</b> !</h3>
<button onclick="swapImage()">Change Image Viewed</button>

<div id="imgDiv1">
 <img src="gateApts.png" width="285" height="252" alt="Area1" usemap="#ovr1">

  <map name="ovr1">
    <area shape="rect" coords="0,0,132,86" href="#" onclick="region(1);return false;" alt="Sun">
    <area shape="rect" coords="150,0,250,86" href="#" onclick="region(2);return false;" alt="tue">
    <area shape="rect" coords="0,100,132,226" href="#" onclick="region(3);return false;" alt="wed">
  </map>
</div>

<hr>

<div id="imgDiv2">
 <img src="gateFlr1.png" width="285" height="252" alt="Area2" usemap="#ovr2">

  <map name="ovr2">
    <area shape="rect" coords="0,0,132,86" href="#" onclick="region(4);return false;" alt="Sun">
    <area shape="rect" coords="150,0,250,86" href="#" onclick="region(5);return false;" alt="tue">
    <area shape="rect" coords="0,100,132,226" href="#" onclick="region(6);return false;" alt="wed">
  </map>
</div>

</body></html>

Open in new window


You should have each <img> in the same <div> with it's corresponding <map> that will change the visibility of the <div> that contains both of them.  This works for me and the function region( ) works in the <map> even after it was not shown. Ask questions if you still have problems.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.