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>