jQuery maphilight(), would highlight the photo on defined coordinates and apply default red stroke on mouseover. The css zoom property is control the magnification level to 50% zooms out of the original photo:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.maphilight.min.js"></script> <script type="text/javascript">$(function() { $(".map").maphilight(); }); </script> <div class="picture"> <img src="http://www.content.onemexico.net/rosa.jpg" class="map" width="640" height="640" border="0" usemap="#Map"> <map name="Map" id="Map"> <area shape="rect" coords="0,0,640,640" href="#" /> </map> </div>

The script works fine both in Chrome and Internet Explorer, but I need to apply as below, different css code separately for each browser (both together cancel each other).

For Chrome: .picture {zoom:50%; -moz-transform:scale(50%); -webkit-transform:scale(50%);}

For IE: .picture .map {zoom: 50%;-moz-transform:scale(50%); -webkit-transform:scale(50%);}

How to make it browser compatibility?