John Miles
asked on
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('K Cmetro').s tyle.displ ay = "block"; document.getElementById('K sRegions') .style.dis play = "none";
break;
case 2:
document.getElementById('N Ekansas'). style.disp lay = "block"; document.getElementById('K sRegions') .style.dis play = "none";
break;
case 3:
document.getElementById('S Ekansas'). style.disp lay = "block"; document.getElementById('K sRegions') .style.dis play = "none";
break;
case 4:
document.getElementById('N Central'). style.disp lay = "block"; document.getElementById('K sRegions') .style.dis play = "none";
break;
case 5:
document.getElementById('S Central'). style.disp lay = "block"; document.getElementById('K sRegions') .style.dis play = "none";
break;
case 6: document.getElementById('N Wkansas'). style.disp lay = "block"; document.getElementById('K sRegions') .style.dis play = "none"; break; case 7: document.getElementById('S Wkansas'). style.disp lay = "block"; document.getElementById('K sRegions') .style.dis play = "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.
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('K
break;
case 2:
document.getElementById('N
break;
case 3:
document.getElementById('S
break;
case 4:
document.getElementById('N
break;
case 5:
document.getElementById('S
break;
case 6: document.getElementById('N
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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.