JS HTML Хочу отследить на какой из 19 областей сейчас находится мышка и выводить её класс в консоль каждую секунду

Question

Есть код, состоит из 19 картинок (цветные части тела), поверх неё другая картинка (чёрно-белая, цельная одна картинка). В чём задача: хочу отследить на какой из областей находится мышка, у и у одинаковый классы, и вывести это одну картинку из 19 частей тела (цветную) поверх чёрно-белой, чтобы она как бы подсвечивалась. Но у меня не работает ни консоль, ни alarm, чтобы проверить.

document.addEventListener('DOMContentLoaded', function() {
  const areas = document.getElementsByTagName('area');

  function handleMouseOver(event) {
    const className = event.target.getAttribute('class');
    alert(className);
    console.log(className);
  }
  Array.from(areas).forEach(area => {
    area.addEventListener('mouseover', handleMouseOver);
  });
});

<div class="image-container">
  <img src="4 Model Human common black.png" alt="Черно-белое изображение" />

  <dir class='humanColored'>
    <img class='human knee_9' src="human_model\PNG\coloredModels\knee_9.png" />
    <img class='human leg_3' src="human_model\PNG\coloredModels\leg_3.png" />
    <img class='human leg_2' src="human_model\PNG\coloredModels\leg_2.png" />
    <img class='human kist_12' src="human_model\PNG\coloredModels\kist_12.png" />
    <img class='human leg_7' src="human_model\PNG\coloredModels\leg_7.png" />
    <img class='human leg_8' src="human_model\PNG\coloredModels\leg_8.png" />
    <img class='human leg_1' src="human_model\PNG\coloredModels\leg_1.png" />
    <img class='human leg_10' src="human_model\PNG\coloredModels\leg_10.png" />
    <img class='human bedro_11' src="human_model\PNG\coloredModels\bedro_11.png" />
    <img class='human bedro_4' src="human_model\PNG\coloredModels\bedro_4.png" />
    <img class='human body_11' src="human_model\PNG\coloredModels\body_11.png" />
    <img class='human shoulder_13' src="human_model\PNG\coloredModels\shoulder_13.png" />
    <img class='human hand_5' src="human_model\PNG\coloredModels\hand_5.png" />
    <img class='human shoulder_14' src="human_model\PNG\coloredModels\shoulder_14.png" />
    <img class='human body_6' src="human_model\PNG\coloredModels\body_6.png" />
    <img class='human shoulder_15' src="human_model\PNG\coloredModels\shoulder_15.png" />
    <img class='human neck' src="human_model\PNG\coloredModels\neck.png" />
    <img class='human head' src="human_model\PNG\coloredModels\head.png" />
    <img class='human head_2' src="human_model\PNG\coloredModels\head_2.png" />
  </dir>

  <img src="4 Model Human common black.png" alt="Черно-белое изображение" usemap="#human" />

  <map name="human">
    <area class='maphuman knee_9' shape="poly" coords="196, 948, 196, 976, 189, 1024, 187, 1039, 260, 1041, 257, 1023, 257, 1007, 262, 995, 266, 968, 266, 949, 267, 948" alt="a11"/>
    <area class='maphuman leg_3' shape="poly" coords="402, 711, 406, 749, 400, 806, 386, 868, 376, 907, 374, 932, 370, 968, 374, 1005, 376, 1041, 301, 1041, 305, 1023, 302, 1004, 300, 987, 297, 943, 293, 907, 293, 862, 292, 814, 282, 782" alt="a6" />
    <area class='maphuman leg_2' shape="poly" coords="300, 1042, 297, 1057, 295, 1107, 300, 1149, 307, 1181, 308, 1212, 310, 1232, 305, 1240, 306, 1250, 311, 1262, 350, 1262, 349, 1229, 355, 1195, 363, 1158, 374, 1120, 377, 1086, 376, 1040" alt="a7" />
    <area class='maphuman kist_12' shape="poly" coords="78, 711, 128, 729, 109, 800, 83, 817, 74, 824, 61, 805, 72, 748, 53, 767, 45, 761, 55, 743, 61, 726" alt="a18" />
    <area class='maphuman leg_7' shape="poly" coords="210, 1264, 204, 1278, 192, 1291, 181, 1306, 177, 1329, 192, 1337, 203, 1343, 211, 1330, 218, 1325, 213, 1339, 218, 1344, 227, 1343, 237, 1331, 242, 1325, 247, 1315, 247, 1305, 250, 1298, 258, 1293, 255, 1262" alt="a9" />
    <area class="maphuman leg_8" shape="poly" coords="185, 1039, 180, 1066, 184, 1097, 195, 1148, 206, 1204, 212, 1242, 206, 1250, 210, 1262, 254, 1263, 252, 1250, 255, 1244, 254, 1232, 251, 1228, 253, 1163, 260, 1111, 264, 1063, 259, 1040" alt="a10" />
    <area class='maphuman leg_1' shape="poly" coords="309, 1263, 303, 1280, 307, 1299, 314, 1304, 314, 1314, 326, 1332, 326, 1341, 338, 1347, 346, 1342, 341, 1331, 347, 1327, 352, 1341, 363, 1338, 378, 1333, 381, 1329, 387, 1316, 381, 1311, 376, 1300, 367, 1288, 357, 1277, 354, 1270, 351, 1262, 351, 1261" alt="a8" />
    <area class='maphuman leg_10' shape="poly" coords="283, 783, 277, 805, 271, 847, 271, 882, 270, 919, 266, 948, 197, 949, 191, 913, 183, 883, 174, 844, 169, 803, 166, 763, 162, 710" alt="a12" />
    <area class='maphuman bedro_11' shape="poly" coords="196, 534, 186, 580, 185, 603, 177, 625, 171, 658, 163, 711, 282, 782, 283, 537" alt="a13" />
    <area class='maphuman bedro_4' shape="poly" coords="281, 537, 282, 781, 403, 711, 394, 671, 385, 620, 379, 576, 375, 534" alt="a5" />
    <area class='maphuman body_11' shape="poly" coords="282, 537, 198, 534, 192, 507, 180, 476, 178, 325, 284, 326" alt="a14" />
    <area class='maphuman shoulder_13' shape="poly" coords="120, 505, 107, 542, 99, 595, 97, 649, 90, 697, 79, 709, 127, 729, 127, 707, 145, 654, 157, 616, 164, 588, 167, 557, 170, 522" alt="a17" />
    <area class='maphuman hand_5' shape="poly" coords="388, 288, 420, 306, 433, 323, 444, 350, 450, 377, 445, 388, 447, 421, 446, 456, 447, 503, 461, 548, 473, 617, 471, 656, 478, 700, 506, 726, 522, 760, 513, 765, 500, 749, 496, 744, 499, 765, 507, 802, 502, 809, 494, 793, 490, 779, 486, 784, 495, 809, 495, 821, 488, 823, 483, 812, 470, 804, 467, 799, 455, 791, 446, 769, 441, 707, 412, 623, 404, 567, 395, 507, 387, 471" alt="a4" />
    <area class='maphuman shoulder_14' shape="poly" coords="178, 325, 179, 479, 171, 521, 119, 505, 119, 448, 121, 422, 125, 414, 123, 395, 120, 385, 121, 367, 125, 347, 131, 331, 136, 326" alt="a16" />
    <area class='maphuman body_6' shape="poly" coords="319, 258, 388, 290, 387, 472, 376, 502, 374, 535, 283, 537, 284, 325, 284, 266" alt="a3" />
    <area class='maphuman shoulder_15' shape="poly" coords="248, 257, 147, 303, 138, 316, 135, 326, 285, 326, 284, 266" alt="a15" />
    <area class='maphuman neck'shape="poly" coords="284, 205, 333, 195, 328, 214, 321, 221, 317, 243, 317, 257, 285, 267" alt="a2" />
    <area class='maphuman head' shape="poly" coords="283, 267, 283, 72, 256, 82, 241, 94, 229, 110, 225, 142, 226, 156, 221, 160, 224, 176, 231, 197, 240, 197, 244, 214, 249, 241, 249, 255" alt="a19" />
    <area class='maphuman head_2' shape="poly" coords="283, 73, 283, 205, 334, 196, 342, 180, 346, 165, 346, 156, 341, 154, 339, 138, 341, 120, 334, 100, 320, 84, 299, 73" alt="a1" />
</map>
  <script type="text/javascript" src="script.js"></script>
</div>

Нейросеть не может решить эту задачу, почему-то. Я думаю можно добавлять новый класс к объекту, или поставить эти 19 цветных картинок поверх чёрно-белой, убрать им opacity и возвращает его при наведении в этой картинки.

Прикладываю картинку цельную чёрно-белую, и сверху неё 19 img, и у каждой есть area просто opacity 0.

помогите решить

Answer 1

 document.addEventListener('DOMContentLoaded', function () {
    var imageContainer = document.querySelector('.image-container');
    var areas = document.querySelectorAll('.image-container area');

    imageContainer.addEventListener('mousemove', function (event) {
      var mouseX = event.pageX - imageContainer.offsetLeft;
      var mouseY = event.pageY - imageContainer.offsetTop;

      areas.forEach(function (area) {
        var coords = area.coords.split(',').map(Number);
        if (isPointInPoly(mouseX, mouseY, coords)) {
          console.log(area.className);
        }
      });
    });

    function isPointInPoly(x, y, coords) {
      var inside = false;
      for (var i = 0, j = coords.length - 2; i < coords.length - 1; j = i, i += 2) {
        var xi = coords[i];
        var yi = coords[i + 1];
        var xj = coords[j];
        var yj = coords[j + 1];

        var intersect = ((yi > y) != (yj > y)) &&
          (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
        if (intersect) inside = !inside;
      }
      return inside;
    }
  });

<div class="image-container">
  <img src="https://i.stack.imgur.com/pmpLb.png" alt="Черно-белое изображение" usemap="#human" />
  <map name="human">
    <area href="#" class='maphuman knee_9' shape="poly" coords="196, 948, 196, 976, 189, 1024, 187, 1039, 260, 1041, 257, 1023, 257, 1007, 262, 995, 266, 968, 266, 949, 267, 948" alt="a11" />
    <area href="#" class='maphuman leg_3' shape="poly" coords="402, 711, 406, 749, 400, 806, 386, 868, 376, 907, 374, 932, 370, 968, 374, 1005, 376, 1041, 301, 1041, 305, 1023, 302, 1004, 300, 987, 297, 943, 293, 907, 293, 862, 292, 814, 282, 782" alt="a6" />
    <area href="#" class='maphuman leg_2' shape="poly" coords="300, 1042, 297, 1057, 295, 1107, 300, 1149, 307, 1181, 308, 1212, 310, 1232, 305, 1240, 306, 1250, 311, 1262, 350, 1262, 349, 1229, 355, 1195, 363, 1158, 374, 1120, 377, 1086, 376, 1040" alt="a7" />
    <area href="#" class='maphuman kist_12' shape="poly" coords="78, 711, 128, 729, 109, 800, 83, 817, 74, 824, 61, 805, 72, 748, 53, 767, 45, 761, 55, 743, 61, 726" alt="a18" />
    <area href="#" class='maphuman leg_7' shape="poly" coords="210, 1264, 204, 1278, 192, 1291, 181, 1306, 177, 1329, 192, 1337, 203, 1343, 211, 1330, 218, 1325, 213, 1339, 218, 1344, 227, 1343, 237, 1331, 242, 1325, 247, 1315, 247, 1305, 250, 1298, 258, 1293, 255, 1262" alt="a9" />
    <area href="#" class="maphuman leg_8" shape="poly" coords="185, 1039, 180, 1066, 184, 1097, 195, 1148, 206, 1204, 212, 1242, 206, 1250, 210, 1262, 254, 1263, 252, 1250, 255, 1244, 254, 1232, 251, 1228, 253, 1163, 260, 1111, 264, 1063, 259, 1040" alt="a10" />
    <area href="#" class='maphuman leg_1' shape="poly" coords="309, 1263, 303, 1280, 307, 1299, 314, 1304, 314, 1314, 326, 1332, 326, 1341, 338, 1347, 346, 1342, 341, 1331, 347, 1327, 352, 1341, 363, 1338, 378, 1333, 381, 1329, 387, 1316, 381, 1311, 376, 1300, 367, 1288, 357, 1277, 354, 1270, 351, 1262, 351, 1261" alt="a8" />
    <area href="#" class='maphuman leg_10' shape="poly" coords="283, 783, 277, 805, 271, 847, 271, 882, 270, 919, 266, 948, 197, 949, 191, 913, 183, 883, 174, 844, 169, 803, 166, 763, 162, 710" alt="a12" />
    <area href="#" class='maphuman bedro_11' shape="poly" coords="196, 534, 186, 580, 185, 603, 177, 625, 171, 658, 163, 711, 282, 782, 283, 537" alt="a13" />
    <area href="#" class='maphuman bedro_4' shape="poly" coords="281, 537, 282, 781, 403, 711, 394, 671, 385, 620, 379, 576, 375, 534" alt="a5" />
    <area href="#" class='maphuman body_11' shape="poly" coords="282, 537, 198, 534, 192, 507, 180, 476, 178, 325, 284, 326" alt="a14" />
    <area href="#" class='maphuman shoulder_13' shape="poly" coords="120, 505, 107, 542, 99, 595, 97, 649, 90, 697, 79, 709, 127, 729, 127, 707, 145, 654, 157, 616, 164, 588, 167, 557, 170, 522" alt="a17" />
    <area href="#" class='maphuman hand_5' shape="poly" coords="388, 288, 420, 306, 433, 323, 444, 350, 450, 377, 445, 388, 447, 421, 446, 456, 447, 503, 461, 548, 473, 617, 471, 656, 478, 700, 506, 726, 522, 760, 513, 765, 500, 749, 496, 744, 499, 765, 507, 802, 502, 809, 494, 793, 490, 779, 486, 784, 495, 809, 495, 821, 488, 823, 483, 812, 470, 804, 467, 799, 455, 791, 446, 769, 441, 707, 412, 623, 404, 567, 395, 507, 387, 471" alt="a4" />
    <area href="#" class='maphuman shoulder_14' shape="poly" coords="178, 325, 179, 479, 171, 521, 119, 505, 119, 448, 121, 422, 125, 414, 123, 395, 120, 385, 121, 367, 125, 347, 131, 331, 136, 326" alt="a16" />
    <area href="#" class='maphuman body_6' shape="poly" coords="319, 258, 388, 290, 387, 472, 376, 502, 374, 535, 283, 537, 284, 325, 284, 266" alt="a3" />
    <area href="#" class='maphuman shoulder_15' shape="poly" coords="248, 257, 147, 303, 138, 316, 135, 326, 285, 326, 284, 266" alt="a15" />
    <area href="#" class='maphuman neck' shape="poly" coords="284, 205, 333, 195, 328, 214, 321, 221, 317, 243, 317, 257, 285, 267" alt="a2" />
    <area href="#" class='maphuman head' shape="poly" coords="283, 267, 283, 72, 256, 82, 241, 94, 229, 110, 225, 142, 226, 156, 221, 160, 224, 176, 231, 197, 240, 197, 244, 214, 249, 241, 249, 255" alt="a19" />
    <area href="#" class='maphuman head_2' shape="poly" coords="283, 73, 283, 205, 334, 196, 342, 180, 346, 165, 346, 156, 341, 154, 339, 138, 341, 120, 334, 100, 320, 84, 299, 73" alt="a1" />
  </map>
</div>

БЛОГ НА HUSL

JS HTML Хочу отследить на какой из 19 областей сейчас находится мышка и выводить её класс в консоль каждую секунду

Ответы (1 шт):