This solution is quite simple technically, but requires that you make one image per highlighted region in addition to the non-highlighted map. You also have to do a bit work to define the coordinates correct in the HTML image map. I recommend that you use Photoshop to find out what the relevant coordinates should be.
The clickable map regions are defined by by an HTML image map as a polygon defined by pixel coordinates (pairs of x,y) relative to the top-left of the image, and in right order in a clock-wise direction. Each polygon (
<area ...>) can contain as many coordinates as you like.
In this example I have an image file named
map.png which is the map that defines the non-highlighted map, and 2 map regions defined by highlighted version of region1 (with image file name
map_region1.png) and region2 (with image file name
map_region2.png), which each file is a copy of
map.png but with the respective region highlighted (Based on what you said in the question, I assume you know how to do this in Photoshop).
In my example, the polygons in the HTML image map is just random polygons that define two areas that don't overlap....
var mapContent = document.getElementById('mapContent');
mapContent.src = 'map_' + regionName + '.png';
mapContent.src = 'map.png';
<img src="map.png" id="mapContent" usemap="#regions" border="0">
coords="0,1, 15,5, 27,17, 12,26, 10,38"
coords="40,51, 45,51, 87,57, 82,76, 49,98"