JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>title temp</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  </head>

  <body style="background-color:rgb(0, 0, 0);">
  
  <!-- Image Map Generated by http://www.image-map.net/ -->
<div id="portfolio_here">
    <img src="https://i.ibb.co/F59xHXy/portfolio.png" id="portfolio" usemap="#image-map" border="0" width=auto height=auto/>
</div>

<map name="image-map">
      <area class="interactive" alt="interactive" title="lung1" href="interactive.htm" coords="1896,1463,2011,1437,2051,1255,2040,1196,1851,1266,1836,1374,1836,1474,1903,1455,1933,1426,2044,1222,1833,1478" shape="poly">
      <area class="interactive" alt="interactive" title="lung2" href="interactive.htm" coords="2063,1478,2126,1508,2185,1452,2226,1378,2255,1285,2233,1234,2166,1226,2122,1219,2100,1230,2092,1256,2133,1367,2103,1423,2063,1449,2059,1471" shape="poly">
      <area class="misc" alt="miscellaneous" title="heart" href="misc.htm" coords="2051,1278,2018,1415,2066,1445,2114,1415,2126,1360,2092,1278,2092,1215,2055,1193" shape="poly">
      <area class="illust" alt="illustration" title="liver" href="illust.htm" coords="1829,1627,1962,1538,2074,1490,2044,1427,1948,1450,1840,1482,1814,1568" shape="poly">
      <area class="video" alt="video" title="stomach" href="video.htm" coords="2081,1494,2144,1524,2148,1609,2055,1631,1940,1635,1892,1601,1929,1553" shape="poly">
      <area class="physical" alt="physical" title="largeintestine" href="physical.htm" coords="1877,1744,1892,1685,2063,1699,2200,1677,2159,1610,2096,1636,1951,1647,1885,1603,1807,1633,1803,1766,1866,1814,1955,1818,1918,1774" shape="poly">
      <area class="performance" alt="performance" title="smallintestine" href="performance.htm"...

CSS

* {

  padding: 0;
  margin: 0;
  border: none;
  font-family: Arial, sans-serif;
  height: 100vh;
  font-size: 14px;
}

img {
  padding: 0;
  display: block;
  margin: 0 auto;
  min-height: 100vh;
  min-width: 100vh;
}


body {
  display: block;
  margin-left: auto;
  margin-right: auto;

}

JavaScript

var swapImage = 1;

$('.interactive').hover(function(){
        if (swapImage == 1){
            swapImage = 2;
            $('portfolio').attr('src', 'https://i.ibb.co/s32mqsM/interactive.png');
        }else if (swapImage == 2){
            swapImage = 1;
            alert('test');
    				$('portfolio').attr('src', 'https://i.ibb.co/F59xHXy/portfolio.png');
    	}
});