I've done something similar for a web page a few years ago, however I did it using only Javascript and HTML, no jQuery. I think I used a site that let me draw the coordinates for the image map like https://www.image-maps.com/, then I used onMouseOver and onMouseOut to have the highlight effect. I had an image that had no highlight effects as the default image that the code would reset to.
Here is an example of the code:
HTML:
<div id="mainCampus">
<img name="defaultImg" usemap="#campus" src="images/campus.png" width="606" height="385" alt="Map of main campus" />
</div>
<map id="campus" name="campus">
<area shape="poly" alt="Softball field" coords="108,47,89,85,4" href="/virtualtour/main/fields" onMouseOver="softball()" onMouseOut="campus()">
<area shape="poly" alt="Baseball field" coords="86,92,74,133" href="/virtualtour/main/fields" onMouseOver="baseball()" onMouseOut="campus()">
</map>
Javascript:
function campus(){
document.defaultImg.src="/virtualtour/main/images/campus.png";
}
function softball(){
document.defaultImg.src="/virtualtour/main/images/softballField.png";
}
function baseball(){
document.defaultImg.src="/virtualtour/main/images/baseballField.png";
}
Edit: There is one problem with the code though, the images don't autoload, so it requires moving the mouse over the sections for the images to load. I didn't figure out a way to autoload the images before running the page, but I'm sure it isn't hard.