БЛОГ НА HUSL


Интерактивные области изображения - даже при изменении размеров экрана

Автор вопроса: Alexandr_TT

Я пытаюсь научиться делать простой веб-сайт на HTML.
В настоящее время я создал фоновое изображение, на котором изображено несколько форм. Я хочу, чтобы разные части изображения были интерактивными ссылками.
Я понимаю, как найти координаты и использовать карту изображений, однако интерактивные ссылки не работают, когда я меняю размер экрана.

body, html {
        height: 100%;
        margin: 0;
    }
    
    .bg {
        background-position: left;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
 
   <div class="bg"></div>
    <body>
    <img src="https://cdn.pixabay.com/photo/2018/01/24/18/05/background-3104413_1280.jpg" width="100%" height="100%" usemap="workmap" class="bg">
    <map name="workmap">
        <area target="_blank" alt="Game1" title="Game1" href="game1.html" coords="243,133,79" shape="circle">
        <area target="_blank" alt="Game2" title="Game2" href="game2.html" coords="870,147,680,33" shape="rect">
        <area target="_blank" alt="Game3" title="Game3" href="game3.html" coords="889,379,80" shape="circle">
        <area target="_blank" alt="CS" title="CS" href="https://code.org/educate/csp " coords="770,671,73" shape="circle">
        <area target="_blank" alt="Game4" title="Game4" href="game4.html" coords="163,587,214,492,267,473,335,483,377,603,327,631,249,658,211,641" shape="poly">
    </map>

Как сделать так, чтобы интерактивные области работали для разных размеров экрана?

Свободный перевод вопроса Clickable areas of image - even when screen changes sizes html от участника @Ali.


Источник

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

Автор решения: Alexandr_TT

Почему подход <map> не лучший вариант:

Использование системы изображений HTML <map> / <area> на ваших HTML-страницах имеет множество недостатков.
В первую очередь, когда само изображение будет (должно) быть масштабируемым и динамическим в зависимости от размера экрана клиента, то не существует процесса настройки интерактивных элементов, относящихся к изображению, для отображения любого требуемого размера.
Другими словами, поскольку элементы HTML <map> абсолютны по своему масштабу и размеру, то они не будут работать с содержимым динамического размера, например (width:80% и т. д.).

Что вы можете сделать вместо этого?

Есть несколько вариантов. Вы можете найти несколько Javascript systems, которые будут динамически изменять размер границ области <map> при обнаружении изменении размера window. Это, конечно, добавит некоторые дополнительные расходы, а также приведет к раздуванию JS при загрузке страницы.

Использование SVG

Да, Scalable Vector Graphics - это будущее решение, которое касается щелчков по отображению изображений без накладных расходов Javascript, также вы можете прочитать о них на их wiki или на MDN.

Таким образом, используя SVG, вы можете импортировать стандартный формат изображения (например, JPG и т.д.), А затем наложить на него точки привязки и интерактивные элементы, которые вы можете стилизовать с помощью стилей, подобных CSS, что дает гораздо больше поддержки и возможностей, чем старый <map> синтаксис, такой как затухание, зависание, смешивание и размытие - все, что происходит на статических изображениях из-за взаимодействия с пользователем, в любой заданной точке на экране любого размера.

Покажите мне как!

Настоятельно рекомендуется это руководство по созданию карты области SVG с возможностью щелчка на элементе изображения HTML.

Наведите курсор на круги, прямоугольник и увидите, что щёлкнув по этой облпсти можно перейти по ссылке

#backing {
    vertical-align: middle;
    margin: 0;
    overflow: hidden;
}
#backing svg { 
    display: inline-block;
    position: absolute;
    top: 0; left: 0;
}
    <figure id='backing'>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1280 504" preserveAspectRatio="xMinYMin meet" >
        <image width="1280" height="504" xlink:href="https://cdn.pixabay.com/photo/2018/01/24/18/05/background-3104413_1280.jpg">
        </image>
   <a xlink:href="game1.html"><circle cx="243" cy="133" r="79" fill="#fff" opacity="0.15" /></a>
  <a xlink:href="game2.html"><rect x="870" y="147" width="680" height="33" fill="#fff" opacity="0.25"/></a>
  <a xlink:href="game3.html"><circle cx="889" cy="379" r="80" fill="#fff" opacity="0.1"/></a>
  <a xlink:href="https://code.org/educate/csp"><circle cx="770" cy="671" r="73" fill="#fff" opacity="0.2"/></a>
  <a xlink:href="game4.html"><polygon id="test" points="163,587 214,492 267,473 335,483 377,603 327,631 249,658 211,641" fill="#fff" opacity="0.3"/></a>
        </svg>
      </figure>

Свободный перевод ответа от участника @Martin.

→ Ссылка
Автор решения: Alexandr_TT

Я согласен с @Martin. Лучший вариант здесь - SVG. Ваш SVG может выглядеть так: (Я использую ваши координаты.)

Наведите курсор на цветные круги и кликните для перехода по ссылке

*{margin:0;padding:0;}
svg{width:100vh;border:1px solid;}
svg *{fill:rgba(0, 255, 255, .4)}
<svg viewBox="0 0 1800 1800">
   <image xlink:href="https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg" width="100%"  />
  <a xlink:href="https://ru.stackoverflow.com"><circle cx="243" cy="133" r="79" /></a>
  <a xlink:href="https:///ru.stackoverflow.com"><rect x="870" y="147" width="680" height="33" /></a>
  <a xlink:href="https:///ru.stackoverflow.com"><circle cx="889" cy="379" r="80" /></a>
  <a xlink:href="https:///ru.stackoverflow.com"><circle cx="770" cy="671" r="73" /></a>
  <a xlink:href="https:///ru.stackoverflow.com"><polygon id="test" points="163,587 214,492 267,473 335,483 377,603 327,631 249,658 211,641" /></a>
  
</svg>

Свободный перевод ответа от участника @enxaneta.

→ Ссылка

licensed under cc by-sa 3.0 with attribution.