jquery mobile popup and image maps

jquery mobile popup and image maps

Hi,

I have a page which has an image as the backgroud. I have 30 different points on the image and need to open a new image on click of these point in form of a popup on the same page (exactly like an jquery mobile popup). Since the JQMobile popup is liked to a <a> tag and the image map is using <area> tag i am unable to do it. Here is what i did..

<img src="images/img/landing.png" alt="landing" usemap="#Map">
    <map name="Map">
      <area shape="rect" coords="1369,176,1470,222" href=" #dialog" alt="something">
      <area shape="rect" coords="1368,448,1468,490" href="images/img/PortCD2.png" id="CD2">
      <area shape="rect" coords="1369,864,1468,906" href="images/img/PortCD3.png" id="CD3">
      <area shape="rect" coords="1368,1028,1467,1072" href="images/img/PortCD4.png" target="_self">
    </map>


<div data-role="popup" id="dialog" style="background-image: url(photo-run.jpeg);>
</div>

Can anyone help me with this? i want a popup of this sort  http://jquerymobile.com/test/docs/pages/popup/popup-images.html#&ui-state=dialog

Thanks