We are building a little website where you can highlight parts of an image using jquery.maphilight.js. The background image is an SVG file and we have a script that exports the correct polygon coordinates for the overlay-polygons into html. Unfortunately, the highlight-polygons all look blurry (not the SVG background image, that's fine). Why is that, and what can we do about it?
Here is the html code:
<!DOCTYPE html>
<html>
<head>
<title> My First Website </title>
<style>
h1 {
text-align: center;
}
h2 {
text-align: center;
}
p {
text-align: center;
}
div.map {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<meta charset="UTF-8">
// ...
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="jquery.maphilight.js"></script>
<script>
$(function() {
$('.map').maphilight({
fillColor: '008800'
});
$('#abcde').click(function(e) {
e.preventDefault();
var data = $(this).mouseout().data('maphilight') || {};
data.alwaysOn = !data.alwaysOn;
$(this).data('maphilight', data).trigger('alwaysOn.maphilight');
});
});
</script>
</head>
<h1><u>title...</u></h1>
<h2>subtitle...</h2>
<br>
<p>
<img src="assets/background.svg" alt="background..." height="X" width="600" class="map" usemap="#features">
<map name="features">
<area id="abcde" shape="poly" coords="483.5,233.5,483.5,237.5,485.5,240.5,485.5,244.5,484.5,246.5,484.5,247.5,484.5,250.5,485.5,251.5,486.5,251.5,487.5,251.5,490.5,251.5,492.5,251.5,492.5,249.5,492.5,245.5,491.5,244.5,491.5,241.5,494.5,237.5,494.5,234.5,493.5,233.5,493.5,233.5,491.5,232.5,489.5,231.5,487.5,231.5,485.5,232.5" href="#" alt="left_hand_ip5" class="group" data-maphilight='{"strokeColor":"000000","strokeWidth":0,"fillColor":"000000","fillOpacity":1}'>
// ...
</map>
</p>
</body>
</html>
The .5 offset of all the coordinates is just one of the things we have tried to get rid of the blurryness, but it doesn't work this way, nor with round coordinates.
Note: We are complete beginners with javascript, html, and css.