maphilight | jQuery plugin that adds highlighting to image maps | Plugin library

I used map and area attr and for styling them , i used maphighlight.js which is jquery. When i hover , it shows borders and color fillings etc.

Now i want to put text center of each areas which are determined with coordinates. When page loads , i want to see texts on center of areas "without hover" and after hover i wanna see borders ,color etc. Thanks for your helps. Here's my code. 1)Maphilight

I have a simple html image map and a simple array with states, i want when hover of one area to maphilight all group areas, but now maphilight only hovered state.

this is my function

I am creating a simple ASP.NET web application. I have an image of different machinery combined/joined together in one single image and I want to highlight these machineries with a different color (RED/GREEN/YELLOW) depending on their running status which I am obtaining from an API call with jquery.

I have created an image map using https://www.image-map.net/ and divided my image into 5 sections. I am using (https://davidlynch.org/projects/maphilight/docs/) MapHilight which is helping me to highlight different image maps and it is working properly on a full-screen resolution. The problem is that it doesn't support responsiveness, the moment I resize my browser, as the image map coordinates don't get change automatically according to browser size, the highlight tends to be of a static size and doesn't matches with the image map. Also when the browser size becomes very small, it replicates the image 2-3 times on the same page.

Following is the image which appears in the full resolution window size.

I have static e paper but i want to develop dynamic e-paper like below url

https://epaper.dawn.com/?page=15_04_2019_001

I have no idea to start e paper dynamic below is my whole html code

I have question about map resize.we have make a map using area coord.when i resizing map down so resize proper,and resize up map image not resize when i refresh page so it resizing.

below show html :

Background:

My web project with following bower.json was successfully compiled 4 months back with no modifications till date using gitlab ci pipeline (there is no change in code since then). Today, when i re-executed pipeline, bower started throwing ENOTFOUND errors as mentioned later in this question.

Errors in various run are ENOTFOUND Package mkdirp not found or ENOTFOUND Package minimist not found. How to rectify or trace source of this error maybe in terms of 3rd party package problems considering no change in bower.json and source code and also log file does not mention from which 3rd party mkdirp or minimist is demanded. As such, This is wired as Why would bower remove pre-existing packages from repository.

bower.json snippet

Here is my fiddle. https://jsfiddle.net/vsjtfhkk/

On my page http://www.veniria.esy.es/#veniria i have an image map with JQuery maphilight plugin. It was working totally fine, until I have added main page to the site. Now it's not working at all, like JQuery is not detecting mouseover, because this don't work either: