This might be a duplicate question so I apologize for that. I'm mapping an image and using a plug-in Image Map Resize and I get this error in my console. "The “coords” attribute of the tag is not in the “left,top,right,bottom” format."
Here's my code:
<body>
<h1>Image Mapping</h1>
<img name="parkMap" src="https://i.ibb.co/cbmgggd/AGRIECOMAP.gif" id="image" usemap="#image-map" border="0" width="100%">
<map name="image-map">
<area target="" shape="rect" coords=" 345, 204, 435, 283" href="kubo" alt="Kubo">
<area target="" shape="rect" coords="439, 325, 500, 369" href="" alt="Bee">
<area target="" shape="rect" coords="314, 356, 356, 384" href="" alt="Bridge">
</map><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>js/imageMapResizer.min.js"></script>
<script type="text/javascript">
$('map').imageMapResize();
</script>
I find your coods have a blank space,you can delete this blank space.and alt is useless,you can use title
<map name="image-map">
<area target="" shape="rect" coords="345, 204, 435, 283" href="kubo" title="Kubo">
<area target="" shape="rect" coords="439, 325, 500, 369" href="" title="Bee">
<area target="" shape="rect" coords="314, 356, 356, 384" href="" title="Bridge">
</map>