I used jquery.maphilight, html map and area on the layout
This is my layout codepen.
(codepen here)
I want append status icon/image on red color area like this
so....what should I do? If jquery.maphilight can't do that, Could recommend me other javascript?
<!DOCTYPE html>
<html>
<head></hrad>
<body>
<div>
<img style="width: 800px;height:600px;background-repeat:no-repeat;" src="https://online.visual-paradigm.com/images/features/floor-plan-designer/thumbnails/work-office-floorplan-template-02.png" alt="" usemap="#PClayout">
</div>
<map name="PClayout">
<!-- working -->
<area shape="rect" coords="200,100,300,200" id='PC1' href="#">
<!-- close-->
<area shape="rect" coords="490,100,600,200" id='PC2' href="#">
<!-- Error-->
<area shape="rect" coords="200,250,300,350" id='PC3' href="#">
</map>
</body>
</html>
function layoutalert(el, Color){
var data = $(el).data('maphilight') || {};
data.alwaysOn = true;
data.fillColor = Color;
data.strokeColor = Color;
$(el).data('maphilight', data).trigger('alwaysOn.maphilight');
$(el).data('maphilight', data).trigger('fillColor.maphilight');
$(el).data('maphilight', data).trigger('strokeColor.maphilight');
}
layoutalert("#PC1", '00ff00')
layoutalert("#PC2", 'ff0000')
layoutalert("#PC3", 'ff0000')
$('img[usemap]').maphilight();