Image map for iOS?

[Construx]

What process does everyone use to create an image map for touch on mobile phones?  Or does anyone know any good resources for this?

I'm using a script to resize the image map to the size of the phone.  Unsure if the code I'm using the resize is working.  This is what I have:

<script src="jquery.min.js"></script>

<script src="jquery.rwdImageMaps.min.js"></script>
<style>

    $(document).ready(function(e) {
        $('img[usemap]').rwdImageMaps();
    
        $('area').on('click', function() {
            alert($(this).attr('alt') + ' clicked');
        });
    });

@media only screen and (max-width:620px) {
  /* For mobile phones: */
      .menu, .main, .right {
        width:100%;
      }
}

</style>
</head>

<div><img src="editbay_mobile.jpg" style="width:100%;" usemap=“#avid”>
    <map name=“avid”>
        <area shape=“rect” coords=“150,290,510,290,150,390,510,390” href=“www.google.com”  />
        <area shape=“rect” coords=“150,410,550,410,150,510,550,510” href=“www.google.com”  />
    </map>
</div>

 

 

[Ingolme]

Unfortunately, image maps don't scale with the image that they are attached to. The way around it is to create normal <a> elements, wrap them in a container the exact size of the image, then set their position and dimensions using percentage values. It takes a bit of calculating but is achievable.