How can I make coordinates of a polygon responsive?

Question

I return to the depths of imagemap surgery. I'm an amateur working on a website with HTML, CSS, and JQuery. I have an imagemap that should scale responsively to the page size, but I am using polygons and mousemove to change the image when the mouse passes over an area. However, the polygon used with mouse detection is separate from the polygon used by the imagemap. I do not know how to make it responsive.

I have a jsfiddle with my work so far here.

Here's my JQuery code:

$( document ).ready(function() {
    console.log( "ready!" );
   // onmousemove = function(e){console.log("mouse location:", e.clientX, e.clientY)}
});
$('image-map').imageMapResize();

$('#portfolio').mousemove(function( event ) {
  var left = event.pageX - $('#portfolio').offset().left;
  var top = event.pageY - $('#portfolio').offset().top;
  // array of coordinates of each vertex of the polygon
  var polygon = [ [ 193, 124 ], [ 210, 127 ], [ 286, 145 ], [ 189, 148 ] ];
  if (inside([ left, top ], polygon)) {
    console.log('mouse inside');
    $('#portfolio').attr('src', 'https://i.ibb.co/s32mqsM/interactive.png');
        }
  else {
    $('#portfolio').attr('src', 'https://i.ibb.co/F59xHXy/portfolio.png');
    }
});

function inside(point, vs) {
    // ray-casting algorithm based on
    // https://wrf.ecse.rpi.edu/Research/Short_Notes/pnpoly.html
    
    var x = point[0], y = point[1];
    
    var inside = false;
    for (var i = 0, j = vs.length - 1; i < vs.length; j = i++) {
        var xi = vs[i][0], yi = vs[i][1];
        var xj = vs[j][0], yj = vs[j][1];
        
        var intersect = ((yi > y) != (yj > y))
            && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
        if (intersect) inside = !inside;
    }
    
    return inside;
};

I just want the same polygon coordinates used by the imagemap to be responsive and in some way accessed by my JQuery function. If anybody knows how to get these things to shake hands, I would be forever grateful.