Question

usemap is not working if the image is not on top.
Is there any workaround?
Please help. Thanks.

<div id="wrapper" style="position:relative; width:1000px; height:900px;">
    <div style="width:100%; height:100%; position:absolute; top:10px; left:10px; z-index:10">
        <iframe width="680" height="580" src="http://www.google.com.my"></iframe>
    </div>
    <div style="width:100%; height:100%; position:absolute; top:10px; left:0px;">
        <img src="images/fun run 2012/background.jpg" usemap="#funrun2012" alt="Fun Run 2012" />
        <map id="funrun2012" name="funrun2012">
            <area shape="rect" coords="945,230,770,270" href="EventDetails.aspx" alt="Event Details" />
            <area shape="rect" coords="945,290,770,330" href="Routes.aspx" alt="Routes" />
            <area shape="rect" coords="945,350,770,390" href="Prizes.aspx" alt="Prizes" />
            <area shape="rect" coords="945,410,770,450" href="FAQ.aspx" alt="FAQ" />
            <area shape="rect" coords="945,470,770,510" href="Map.aspx" alt="Map" />
        </map>
    </div>
</div>

Answer 1

Your issue isn’t with the image, its the size of the div of the iframe.

This would work:

<div style="width:700px; height:600px; position:absolute; top:10px; left:10px; z-index:10">
    <iframe width="680" height="580" src="http://www.google.com.my"></iframe>
</div>