Jump to content
Construx

Image map for iOS?

Recommended Posts

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>

 

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×