JSFiddle - React, Tailwind, and code Playground

by XarX

HTML

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://i.imgur.com/TUBg5aS.png" usemap="#image-map">

<map name="image-map">
    <div><area class="gebiet"  onclick="this.classList.toggle(\"gebiet\")" alt="Die Vergangene Wüste" title="Die Vergangene Wüste"  coords="79,489,81,475,89,481,96,465,105,448,105,433,96,437,80,426,63,418,67,432,51,433,37,431,27,443,29,480,32,485,42,483,54,481,65,489,71,490" shape="poly"></div>
    <area class="gebiet"  alt="Sporenfelder" title="Sporenfelder"  coords="78,490,91,492,116,490,119,466,130,492,107,497,105,511,126,516,154,513,165,524,208,521,216,510,211,493,225,489,226,480,238,479,239,465,243,449,235,435,225,428,214,434,205,412,215,384,231,383,232,373,219,368,201,384,191,385,191,397,181,408,188,415,192,426,198,435,190,449,188,456,177,467,177,476,173,489,164,496,163,482,153,475,134,448,119,455,115,445,105,448,89,480,81,475" shape="poly">
    <area class="gebiet"  alt="Ewiger Stand" title="Ewiger Stand"  coords="181,407,165,401,142,401,138,379,155,377,150,354,162,348,175,356,200,358,228,348,236,358,219,368,202,383,192,385,190,397" shape="poly">
    <area class="gebiet"  alt="Sporenfelder" title="Sporenfelder"  coords="20,443,15,421,19,403,38,391,23,371,29,337,66,339,77,347,77,357,91,360,108,350,124,323,140,306,149,332,164,342,163,348,150,353,155,376,138,378,142,400,158,400,157,407,138,420,131,436,134,447,120,455,115,445,105,447,105,432,96,437,80,425,63,418,68,432,50,433,37,430,27,444" shape="poly">
    <area class="gebiet"  alt="Ebene der Pestilenz" title="Ebene der Pestilenz"  coords="239,357,252,358,242,370,242,377,251,375,262,382,267,392,274,380,276,367,291,359,297,341,307,323,307,309,336,308,350,328,364,326,369,311,360,298,344,292,338,306,331,286,318,269,311,271,285,244,283,229,272,228,267,214,258,214,252,225,247,242,230,264,248,284,248,315,240,335,228,348" shape="poly">
    <area class="gebiet"  alt="Leichenberg" title="Leichenberg" ...

CSS

.gebiet {
  background-color: #fff;
  border: 1px;
  
}
.gebiet_highlight {
  background-color: #000;
}

JavaScript

$("").on("click", function(e){
    //e.preventDefault();
    $(this).toggleClass('gebiet');
    $(this).toggleClass('gebiet_highlight');
});