I would like to make a map in HTML/CSS/JAVA. The different countries on this map, should be filled out with a specific colour when I hover the mouse on it. Also for this hover, the specific text connected to that country should be highlighted next to it.
I have this code now, but it does not work properly. Actually almost working, but country maps and texts are not connected. Could anybody help me to find out what is the actual problem?
Here is the code:
<style>
h1,h2 {
color:#0096FF;
}
.regions__map {
background: #fff;
top: 0;
right: 0;
padding: 10px;
height: 100%;
overflow: auto;
}
.regions__list a {
&:hover,
&.-active {
color: #FF7A04;
}
}
svg path {
transition: opacity 0.2s;
&.-active,
&:hover {
fill: #FF7A04;
}
}
</style>
<script>
// Generate region labels
$('.regions__map path').each(function() {
var id = $(this).attr('id');
var el = $('<a />', {
text: parseId(id),
id: id
});
$('.regions__list').append(el);
});
// Show active region on hover
$('.regions__map path').hover(function() {
var id = $(this).attr('class');
$('.regions__list font').removeClass('-active');
$('.regions__list font').find('#' + id).addClass('-active');
}, function() {
$('.regions__list font').removeClass('-active');
});
$('#regions__list').hover(function() {
var id = $(this).attr('id');
$('.regions__map path').removeClass('-active');
$('.regions__map path'+class).addClass('-active');
}, function() {
$('.regions__map path').removeClass('-active');
});
// Convert the path ID to a readable name by removing the end counter, converting the hex character to HTML, and swapping underscores for spaces
function parseClass(class) {
var normalized_str = class.replace(/_1_$/, '').replace(/_(xd+)_/g, '&#$1').replace(/_/g, ' ');
var txt = document.createElement('textarea');
txt.innerHTML = normalized_str;
return txt.value;
}
</script>
<body>
<h1 style="color:#0096FF">Megújultunk!</h1>
<img>LOGO</img>
<h2 style="color:#0096FF">Mi a heureka!<span style="color:#FF7A04">group</span>?</h2>
<div id="introduction">
<p>
<strong>Közép -és Kelet-Európa 9 országa,<br>
több mint 23 millió látogató havonta és <br>
több mint 55 000 online boltból álló hálózat. <br>
Ez a Heureka Csoport, Európa legnagyobb <br>
ár-összehasonlító weboldala és online vásárlási tanácsadója.<br>
</strong>
</p>
</div>
<div id="side-intro">
<p>
Nap mint nap több millió vásárló számára egyszerűsítjük és könnyítjük meg az online<br>
vásárlást. Küldetésünk, hogy összekapcsoljuk az e-shopokat és a márkákat a külföldi <br>
vásárlókkal - hogy segítsünk nekik elérni a Heureka Csoport összes felhasználóját a <br>
régióban, maximális támogatást nyújtva számukra a növekedés során.<br>
</p>
</div>
<div>
<section class="section--white">
<div class="wrap wrap--content">
<div class="regions regions--home">
<div class="regions__list">
<h3>
<font style="vertical-align: inherit;">
<font style="vertical-align: inherit;">Heureka Group</font>
</font>
</h3>
<ul id="regions__list">
<li>
<a data-country="czechia">
<span>
<font style="vertical-align: inherit;">
<font style="vertical-align: inherit;">Czechia</font>
</font>
</span>
<span>
<font style="vertical-align: inherit;">
<font style="vertical-align: inherit;">Heureka.cz</font>
</font>
</span>
</a>
</li>
<li>
<a data-country="slovakia">
<span>
<font style="vertical-align: inherit;">
<font style="vertical-align: inherit;">Slovakia</font>
</font>
</span>
<span>
<font style="vertical-align: inherit;">
<font style="vertical-align: inherit;">Heureka.sk</font>
</font>
</span>
</a>
</li>
<li>
<a data-country="hungary">
<span>
<font style="vertical-align: inherit;">
<font style="vertical-align: inherit;">Hungary</font>
</font>
</span>
<span>
<font style="vertical-align: inherit;">
<font style="vertical-align: inherit;">Árukereső.hu</font>
</font>
</span>
</a>
</li>
<li>
<a data-country="romania">
<span>
<font style="vertical-align: inherit;">
<font style="vertical-align: inherit;">Romania</font>
</font>
</span>
<span>
<font style="vertical-align: inherit;">
<font style="vertical-align: inherit;">Compari.ro</font>
</font>
</span>
</a>
</li>
<li>
<a data-country="bulgaria">
<span><font style="vertical-align: inherit;">
<font style="vertical-align: inherit;">Bulgaria</font>
</font>
</span>
<span>
<font style="vertical-align: inherit;">
<font style="vertical-align: inherit;">Pazaruvaj.com</font>
</font>
</span>
</a>
</li>
<li>
<a data-country="slovenia">
<span><font style="vertical-align: inherit;">
<font style="vertical-align: inherit;">Slovenia</font>
</font>
</span>
<span>
<font style="vertical-align: inherit;">
<font style="vertical-align: inherit;">Ceneje.si</font>
</font>
</span>
</a>
</li>
<li>
<a data-country="croatia">
<span>
<font style="vertical-align: inherit;">
<font style="vertical-align: inherit;">Croatia</font>
</font>
</span>
<span>
<font style="vertical-align: inherit;">
<font style="vertical-align: inherit;">Jeftinije.hr</font>
</font>
</span>
</a>
</li>
<li>
<a data-country="serbia">
<span>
<font style="vertical-align: inherit;">
<font style="vertical-align: inherit;">Serbia</font>
</font>
</span>
<span>
<font style="vertical-align: inherit;">
<font style="vertical-align: inherit;">Ideal.rs</font>
</font>
</span>
</a>
</li>
<li>
<a data-country="bosnia">
<span>
<font style="vertical-align: inherit;">
<font style="vertical-align: inherit;">Bosnia and Herzegovina</font>
</font>
</span>
<span>
<font style="vertical-align: inherit;">
<font style="vertical-align: inherit;">Ideally.ba</font>
</font>
</span>
</a>
</li>
</ul>
</div>
<div class="regions__map">
<svg version="1.1" id="regions__map" width="515" height="386" viewBox="0 0 515 386" fill="none" xmlns="http://www.w3.org/2000/svg">
<a id="romania" xlink:title="Rumunsko" data-country="romania">
<path fill-rule="evenodd" clip-rule="evenodd" d="M511.965 185.407C511.965 185.411 511.965 185.411 511.965 185.411L507.229 182.582L489.702 189.507L479.163 198.736L469.908 193.275L462.844 189.582L460.803 182.491L455.705 128.335C455.705 128.335 448.601 127.45 447.016 127.311C445.434 127.173 440.675 123.83 440.675 123.83L414.329 84.568L402.831 83.2351C403.114 82.6998 403.201 82.5439 403.226 82.4939C403.135 82.6633 402.348 84.1357 395.397 97.0959C394.527 98.721 393.854 100.015 393.331 101.062L386.241 101.76L377.014 100.953L371.894 103.237C371.894 103.237 366.042 107.644 363.633 110.168C361.227 112.695 360.684 112.648 358.913 114.128C357.14 115.615 353.041 112.522 353.041 112.522L346.908 107.612L332.608 108.55C332.608 108.55 322.796 108.238 317.865 108.353C312.932 108.471 305.383 107.261 301.042 106.881C296.701 106.501 293.445 106.216 293.445 106.216L298.771 120.348L279.371 129.589L280.571 134.613L278.09 144.235L260.04 188.033L248.953 189.798L245.46 192.223C245.46 192.223 244.867 192.717 242.555 194.157C240.241 195.597 238.967 197.67 238.967 197.67L248.515 207.252L255.38 210.037L257.737 220.635L267.665 225.873L275.044 235.269C275.044 235.269 274.142 245.575 276.216 246.852C278.293 248.126 290.301 254.645 290.301 254.645L295.726 255.12L303.94 248.731L309.958 248.708L311.347 251.564L308.937 254.087L306.481 257.15L310.75 264.631L321.365 268.294L320.938 273.176C320.938 273.176 333.584 278.655 340.093 279.225C346.605 279.794 368.592 278.44 368.592 278.44C368.592 278.44 377.067 275.355 386.785 276.748C396.507 278.148 402.921 279.801 402.921 279.801L407.498 277.471L416.238 265.112C416.238 265.112 420.745 257.306 429.762 254.268C438.776 251.23 446.21 247.507 450.547 247.886C454.891 248.266 466.449 253.651 470.647 255.656C474.093 257.308 486.72 259.386 491.123 260.081C490.976 258.979 490.709 257.815 490.229 256.823C488.839 253.971 489.381 254.018 488.674 249.579C487.969 245.145 487.482 231.983 487.482 231.983L488.479 220.589L488.981 208.606L491.035 203.866C493.796 203.562 497.049 203.846 496.907 205.472C496.765 207.099 496.479 210.358 496.479 210.358L498.509 212.171L510.379 207.743C510.379 207.743 511.234 197.979 511.471 195.266C511.708 192.555 513.481 191.068 512.63 188.263C512.348 187.316 512.129 186.319 511.965 185.407Z" fill="white" stroke="#FF7A04" stroke-width="4"></path>
</a>
<a id="bulgaria" xlink:title="Bulharsko" data-country="bulgaria">
<path fill-rule="evenodd" clip-rule="evenodd" d="M482.552 275.833L486.988 275.128L491.238 264.019C491.238 264.019 491.4 262.162 491.123 260.081C486.719 259.386 474.093 257.308 470.647 255.656C466.449 253.651 454.891 248.266 450.547 247.886C446.21 247.507 438.776 251.23 429.762 254.268C420.745 257.306 416.238 265.112 416.238 265.112L407.498 277.471L402.921 279.801C402.921 279.801 396.507 278.148 386.785 276.748C377.067 275.355 368.593 278.44 368.593 278.44C368.593 278.44 346.605 279.794 340.093 279.225C333.584 278.655 320.938 273.176 320.938 273.176L321.365 268.294L310.75 264.631L310.373 263.968L307.61 277.963L305.366 283.131L308.008 288.727C308.008 288.727 310.36 292.509 310.65 294.326C310.937 296.139 318.383 303.053 318.383 303.053L328.687 307.976L314.067 326.816L310.879 337.719C310.879 337.719 310.506 347.073 312.164 348.561C313.826 350.049 324.125 354.975 324.125 354.975L330.43 359.549L333.7 383.534L360.832 380.094L370.277 369.297L380.485 370.19L384.901 375.941L397.326 377.027L407.459 378.808C407.459 378.808 417.822 377.926 420.194 376.342C422.569 374.765 431.716 372.434 431.949 369.772C432.182 367.107 432.919 358.679 432.919 358.679L441.241 350.466C441.241 350.466 443.502 339.931 446.688 339.315C449.873 338.696 462.244 335.308 462.244 335.308L466.525 337.474L472.741 338.018L483.147 332.662C481.861 329.944 479.43 325.003 478.327 324.121C476.793 322.891 473.374 318.218 471.253 317.487C469.128 316.755 467.502 316.612 467.502 316.612C467.502 316.612 471.419 309.301 472.697 307.228C473.971 305.151 473.579 290.902 473.579 290.902L474.386 281.68L482.552 275.833Z" fill="white" stroke="#FF7A04" stroke-width="4"></path>
</a>
<a id="serbia" xlink:title="Srbsko" data-country="serbia">
<path fill-rule="evenodd" clip-rule="evenodd" d="M260.803 310.558L272.792 326.639L288.702 335.414L289.205 339.01L283.349 349.707L282.524 355.125L287.303 353.514L290.826 346.534L296.444 344.837L300.957 347.42L307.104 347.958L311.222 345.952C310.686 342.684 310.881 337.719 310.881 337.719L314.069 326.816L328.689 307.976L318.385 303.053C318.385 303.053 310.939 296.139 310.652 294.326C310.362 292.509 308.01 288.727 308.01 288.727L305.368 283.131L307.612 277.963L310.375 263.968L310.752 264.631L306.483 257.15L308.94 254.087L311.349 251.563L309.96 248.707L303.942 248.731L295.728 255.12L290.303 254.645C290.303 254.645 278.295 248.126 276.218 246.852C274.145 245.574 275.046 235.268 275.046 235.268L267.667 225.873L257.739 220.635L255.382 210.037L248.517 207.252L238.969 197.67L216.938 193.283L213.547 197.635L205.737 199.411L198.124 208.312C198.124 208.312 200.664 223.021 201.064 224.695C201.464 226.369 204.107 227.421 204.107 227.421C204.107 227.421 210.877 231.294 211.62 232.18C212.361 233.062 211.526 233.264 211.454 234.079C211.383 234.89 208.349 235.171 207.193 235.894C206.038 236.611 207.684 242.77 207.684 242.77C207.684 242.77 211.573 248.305 211.752 249.409C211.929 250.52 211.395 253.48 211.395 253.48L208.646 256.791L205.219 264.695L209.417 266.704L216.646 274.716L216.666 280.729L215.388 282.806L214.011 282.957L210.846 281.587L207.3 281.552L208.654 287.957L210.003 294.362L206.854 296L206.593 298.983L233.949 323.791L250.01 327.656L256.376 320.559L253.428 316.749L256.427 313.73L260.803 310.558Z" fill="white" stroke="#FF7A04" stroke-width="4"></path>
</a>
<a id="bosnia" xlink:title="Bosna a Hercegovina" data-country="bosnia">
<path fill-rule="evenodd" clip-rule="evenodd" d="M203.538 299.536L208.614 300.819L206.593 298.983L206.854 296L210.003 294.362L208.654 287.957L207.3 281.552L210.846 281.587L214.011 282.957L215.388 282.806L216.666 280.729L216.646 274.716L209.417 266.704L205.219 264.695L208.646 256.791L211.396 253.479C211.396 253.479 211.929 250.52 211.752 249.409C211.626 248.622 209.622 245.594 208.471 243.91L197.259 249.418L194.213 242.593L170.856 238.727L167.614 242.455L152.972 238.986L141.915 236.196L135.769 235.658L132.227 238.629L126.736 238.879L121.259 243.135L117.566 239.535L113.352 237.708L109.129 252.643L114.744 259.331L122.392 276.038L147.938 304.877L154.084 305.414L160.485 311.44L168.927 319.105L168.09 324.497C168.09 324.497 167.111 327.331 171.001 328.76C174.884 330.195 178.2 329.758 181.27 332.212C184.333 334.668 188.935 341.448 188.935 341.448L196.971 333.951L195.407 329.987L196.246 323.499L199.938 321.908L200.049 317.545L194.723 309.696L192.788 300.506L195.862 296.68L203.538 299.536Z" fill="white" stroke="#FF7A04" stroke-width="4"></path>
</a>
<a id="croatia" xlink:title="Chorvatsko" data-country="croatia">
<path fill-rule="evenodd" clip-rule="evenodd" d="M181.272 332.212C178.202 329.759 174.886 330.196 171.003 328.76C167.113 327.331 168.091 324.497 168.091 324.497L168.929 319.105L160.486 311.44L154.086 305.414L147.939 304.877L122.393 276.038L114.746 259.331L109.131 252.643L113.353 237.708L117.567 239.535L121.261 243.135L126.737 238.879L132.229 238.629L135.77 235.658L141.917 236.196L152.974 238.986L167.615 242.455L170.857 238.727L194.214 242.594L197.26 249.418L208.473 243.91C208.014 243.237 207.686 242.77 207.686 242.77C207.686 242.77 206.039 236.611 207.195 235.894C208.351 235.171 211.385 234.89 211.456 234.079C211.527 233.264 212.363 233.062 211.622 232.18C210.878 231.294 204.109 227.421 204.109 227.421C204.109 227.421 201.466 226.369 201.066 224.695C200.666 223.021 198.126 208.312 198.126 208.312L190.677 208.023L184.714 213.697L162.536 208.842L159.962 204.974L147.236 204.588L127.018 185.692L123.04 185.344L119.281 190.843L109.952 193.307L107.05 209.819L99.5587 212.079L97.5215 222.835L94.3463 225.838L82.409 224.794L76.7482 222.841L75.9453 219.49L69.9365 221.515L64.8854 225.081L41.7675 226.551C40.8686 227.558 39.622 229.199 40.0149 230.197C40.6135 231.707 42.3423 236.962 42.3423 236.962C42.3423 236.962 46.9759 246.479 47.6027 247.626C48.233 248.774 47.9798 251.667 49.4267 251.794C50.8735 251.92 50.8735 251.92 50.8735 251.92C50.8735 251.92 55.5132 253.057 56.3615 251.673C57.2132 250.29 58.03 249.266 58.1563 247.822C58.2829 246.376 59.8104 241.406 59.8104 241.406L60.6016 232.363C60.6016 232.363 59.8971 227.929 64.3787 230.871C68.8601 233.816 76.31 240.295 76.31 240.295L83.4636 246.025C83.4636 246.025 80.4262 251.59 81.2607 254.579C82.0915 257.57 87.7038 264.254 87.9715 265.37C88.2354 266.489 90.9888 272.56 90.9888 272.56L94.6008 272.876L96.4879 276.322L93.2461 280.046L91.6235 286.104L95.7109 289.377C95.7109 289.377 101.576 293.167 102.96 294.019C104.343 294.867 111.624 299.15 111.624 299.15L112.363 303.222L114.31 305.943L118.257 306.653L124.896 305.776C124.896 305.776 133.281 305.783 135.386 306.694C137.495 307.609 137.495 307.609 137.495 307.609C137.495 307.609 150.75 318.607 152.851 319.522C154.96 320.433 160.431 324.558 160.431 324.558L165.117 329.341L165.948 332.329L170.887 334.222L176.485 336.893L183.874 344.101L188.684 347.437L189.213 347.55L188.936 341.448C188.936 341.448 184.335 334.668 181.272 332.212Z" fill="white" stroke="#FF7A04" stroke-width="4"></path>
</a>
<a id="slovenia" xlink:title="Slovinsko" data-country="slovenia">
<path fill-rule="evenodd" clip-rule="evenodd" d="M43.5983 201.718L42.4969 205.995L46.5504 215.461L47.4931 215.544L48.5599 220.014C48.5599 220.014 49.6127 220.468 48.4019 221.819C47.1875 223.171 42.5973 225.685 42.5973 225.685C42.5973 225.685 42.2257 226.035 41.7664 226.551L64.8843 225.081L69.9355 221.515L75.9443 219.49L76.7471 222.841L82.4079 224.794L94.3453 225.838L97.5204 222.835L99.5576 212.079L107.048 209.819L109.951 193.307L119.28 190.843L123.039 185.344L127.017 185.692L127.27 182.795L119.475 171.909L112.241 171.277L111.861 175.617L112.791 177.517L107.958 178.552L103.258 178.141L98.5339 182.105L83.0129 180.382L71.6011 189.953L57.5901 187.635L47.163 185.992L37.8281 196.84L43.0667 199.484L43.5983 201.718Z" fill="white" stroke="#FF7A04" stroke-width="4"></path>
</a>
<a id="hungary" xlink:title="Maďarsko" data-country="hungary">
<path fill-rule="evenodd" clip-rule="evenodd" d="M298.77 120.348L293.444 106.216L281.135 96.9392L268.981 100.434L263.859 92.3281L252.562 96.4437L238.816 95.2412L234.57 93.7774C234.57 93.7774 222.635 113.507 221.255 112.655C219.871 111.807 216.977 111.554 216.977 111.554L212.556 107.887L210.655 108.816L207.206 119.084L192.248 119.233L185.635 128.128L168.977 131.044L160.468 132.488L149.681 122.433L139.585 121.184L140.46 136.203L129.244 135.222L126.393 138.619L130.874 141.561L127.242 145.616L123.965 149.706L127.092 159.818L126.743 163.799L119.256 166.056L117.192 171.71L119.471 171.909L127.266 182.795L127.013 185.692L147.232 204.588L159.957 204.974L162.531 208.842L184.71 213.697L190.672 208.023L198.121 208.312L205.734 199.411L213.544 197.635L216.935 193.283L238.966 197.67C238.966 197.67 240.24 195.597 242.554 194.157C244.866 192.717 245.459 192.223 245.459 192.223L248.952 189.797L260.039 188.033L278.089 144.235L280.57 134.613L279.37 129.589L298.77 120.348Z" fill="white" stroke="#FF7A04" stroke-width="4"></path>
</a>
<a id="slovakia" xlink:title="Slovensko" data-country="slovakia">
<path fill-rule="evenodd" clip-rule="evenodd" d="M160.47 132.488L168.978 131.044L185.636 128.128L192.249 119.233L207.207 119.084L210.656 108.816L212.557 107.887L216.979 111.554L217.585 111.624L218.227 111.72C219.182 111.88 220.466 112.171 221.256 112.655C221.539 112.83 222.267 112.139 223.244 110.929L224.021 109.93L224.873 108.77L225.783 107.481L226.731 106.095L227.701 104.645L230.098 100.956L232.228 97.5815L234.571 93.7774L238.817 95.2412L252.564 96.4437L263.86 92.3282L268.983 100.434L281.136 96.9392L281.433 68.538L271.993 56.6454L259.999 58.5534L230.359 59.4083L220.207 68.3764L214.34 67.8632L213.028 60.3554L203.268 53.5908L197.609 61.9638L190.807 60.8748L185.448 53.7646L185.369 53.7993L177.601 61.2538L167.945 67.0159L162.679 83.585L142.297 89.936L137.315 94.5796L135.782 109.19L140.843 121.339L149.683 122.433L160.47 132.488Z" fill="white" stroke="#FF7A04" stroke-width="4"></path>
</a>
<a id="czechia" xlink:title="Česko" data-country="czechia">
<path fill-rule="evenodd" clip-rule="evenodd" d="M137.316 94.5798L142.298 89.9362L162.68 83.5851L167.947 67.016L177.602 61.2539L185.37 53.7995L185.45 53.7647L182.859 50.3269L182.033 42.8652L177.186 41.9507L170.915 40.414C170.915 40.414 170.915 40.414 165.406 41.4108C159.898 42.4075 165.406 41.4108 158.601 40.325C151.8 39.236 156.012 36.1533 156.012 36.1533L155.42 31.6657L150.165 29.7309L146.125 30.8526L142.196 25.092L136.454 23.1112L130.541 23.0879L134.92 29.3819C134.92 29.3819 135.727 31.4216 135.427 34.8431C135.127 38.2715 130.366 36.3765 128.366 36.692C126.368 37.0113 124.352 31.9051 124.352 31.9051C124.352 31.9051 117.083 24.8644 115.3 22.7393C113.513 20.6104 119.594 18.6791 119.594 18.6791L119.808 16.2347L92.1055 11.8388L89.3646 3.71555L83.4549 3.69261L82.6652 7.07125L78.3085 6.1996L76.2229 8.24374L71.1448 9.05546L70.8223 5.58301L71.0395 3.10059L61.5874 3.83584L61.681 6.34544C61.681 6.34544 62.221 7.33202 61.1799 8.4934C60.1388 9.65478 53.9115 12.8639 53.9115 12.8639C53.9115 12.8639 49.2533 12.4564 49.1717 13.3886C49.0901 14.3208 46.9811 16.9509 46.9811 16.9509L42.3652 19.6782L38.0143 19.2976C38.0143 19.2976 36.3282 20.7122 35.6248 21.5935C34.9185 22.4676 31.3402 24.0332 31.3402 24.0332L26.2625 24.8415C26.2625 24.8415 26.558 28.6212 25.3149 28.5125C24.0718 28.4038 15.6877 27.6703 15.6877 27.6703C15.6877 27.6703 12.9605 30.2463 12.5647 31.151C12.1724 32.056 10.3229 35.3385 10.3229 35.3385L7.09807 32.8646L4.7206 31.4042L3.10059 35.6426L7.86061 42.0046L10.9769 45.718L13.2576 51.8632L11.9722 55.8177L16.5301 68.1077L24.1058 70.9622L31.0055 74.3838L34.3631 82.4984L43.3536 87.0387L52.4645 93.7814C52.4645 93.7814 58.0244 101.779 59.264 101.887C60.5106 101.996 77.2788 103.463 77.2788 103.463L84.0379 90.5976L86.5937 86.4411L106.077 89.0848L112.841 94.0566C112.841 94.0566 116.929 93.7879 120.091 93.4383C123.25 93.0884 125.453 92.968 126.699 93.077C127.683 93.1631 133.437 95.0476 137.141 96.2553L137.316 94.5798Z" fill="white" stroke="#FF7A04" stroke-width="4"></path>
</a>
</svg>
</div>
</div>
</div>
</section>
</div>
</body>
I think, there should be some problem with IDs and Classes but I can not really find where is the bug. I tried to work from this example: https://codepen.io/nbence92/pen/LYMzqOd