Блог

У меня есть фотография с несколькими людьми на веб-сайте (сделанная с помощью php), и я хотел бы получить следующее: когда курсор перемещается по лицу человека, имя этого человека отображается внизу фотографии. После долгих поисков я нашел на другом веб-сайте код, который был близок к тому, что я хотел, и после того, как я изменил несколько вещей, я заставил его делать (в основном) то, что я хочу, но я действительно многого не понимаю, и я убежден, что должен быть более простой способ сделать это. Код скопирован ниже. Текст «Name1» появляется внизу фотографии, когда курсор находится в положении, указанном первым классом «точка доступа», а текст «Name2» появляется, когда курсор находится в положении, указанном во втором классе «точка доступа».

Это мои вопросы:

1. Может ли кто-нибудь объяснить, как это работает, и можно ли это упростить
2. Почему, если я заменю Name1 на имя и фамилию, вывод будет в двух разных строках. Кажется, ничто не исправит это, кроме размещения имени, фамилии в таблице с одной строкой, и даже в этом случае интервал между словами неправильный и не поддается контролю
3. Почему этот код работает только с Google Chrome или Firefox, но не с Safari или браузером Windows.

Спасибо за любые подсказки, даже если частичные.

Первая партия кода-это файл css, другая-файл php

 .hotspot {
position: absolute; 
}
.hotspot   * {
pointer-events: none;
opacity: 0;
}
.hotspot:hover   * {
opacity: 1;
}
.wash {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(255, 255, 255, 0.6);
}


<div style="position: relative; height: 1px; width: 1px;">
<img src="photo.jpg" width=900px>
   <div class="hotspot" style="top: 195px; left: 277px; height: 50px; width: 50px;"> 
   </div>
<div>
    <div class="wash"></div>
   <div style="position: absolute; top: 900; left: 300px;font-size:35px;">
   Name1
   </div>
</div>

<div class="hotspot" style="top: 202px; left: 337px; height: 50px; width: 50px;">. 
</div>
<div>
    <div class="wash"></div>
   <div style="position: absolute; top: 900; left: 300px;font-size:35px;">
Name2 </div>
</div>
 

Вот хороший стартер для вас, чтобы поиграть.

 console.clear();

data = {
  Isabelle: {
    left: 100,
    top: 23,
    width: 172,
    height: 142
  },
  Clara: {
    left: 284,
    top: 38,
    width: 121,
    height: 191
  },
  Sylvie: {
    left: 412,
    top: 9,
    width: 121,
    height: 191
  },
  Steeve: {
    left: 498,
    top: 79,
    width: 208,
    height: 191
  },
  Jacques: {
    left: 56,
    top: 179,
    width: 157,
    height: 191
  },
  Julie: {
    left: 213,
    top: 178,
    width: 106,
    height: 178
  },
  Amélie: {
    left: 300,
    top: 319,
    width: 139,
    height: 211
  },
  Robert: {
    left: 456,
    top: 282,
    width: 182,
    height: 229
  }
};

// Positions the zones with their event handler setted
let names = Object.keys(data);
names.forEach((n) => {
  let zone = $("<div>");
  zone
    .addClass("imageMapZone")
    .css(data[n])
    .hover(
      function () {
        $(".namezone").text(n);
      },
      function () {
        $(".namezone").text("");
      }
    );
  $(".imageMapContainer").append(zone);
}); 

 .imageMapContainer{
  position: relative;
}
.imageMapZone{
  position: absolute;
}
.namezone{
  Font-size: 1.4em;
  min-height: 1.6em;
} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="imageMapContainer">
  <img src="https://www.quickanddirtytips.com/sites/default/files/styles/convert_webp_article_main_image/public/images/2332/people-persons-peoples.jpg?itok=wE8o-yua">
</div>
<div class="namezone"></div>