hidden div with image map not working

Question

I've been trying to have a simple image map on an image that is in a hidden div.

Once a button is clicked, the hidden div shows and on this image I want to place an image map. but its not working.

I got the show/hide from a jfiddle, take a look...

my button

[label for="home3"][img src="images/bt_modulo.png" alt="" width="92" height="72" /] [/label] 

my hidden div

 [div class="homeinfo3"]
[input id="home3" type=checkbox][div style="display: none;"] [img src="images/modulo_info.png" alt="" width="568" height="98" border="0" usemap="#modulomap" /]
[map name="modulomap" id="modulomap"]
  [area shape="rect" coords="317,9,380,47" class="iframe fancybox-media" href="http://www.youtube.com/embed/azCeJoLcWhI?rel=0" /]
  [area shape="rect" coords="385,10,444,45" class="iframe fancybox-media" href="images/Modulo-red.jpg" /]
[/map]
[/div]

When the image appears (div is visible) the map doesn't work. What am I doing wrong? test link is here http://manuki.net/test/test.html

Answer 1

The z-index for your "homeinfo3" div is 20, while the "imgright" div is 999. The imgright div is on top of your homeinfo, and therefor on top of your map. Increase the z-index of homeinfo3 to 1000 and your map will start working.