Кликабельное изображение, которое расширяет его части

Question

Я пытаюсь сделать интерактивную карту США, в которой вы нажимаете на штат, штат расширяется «над остальными штатами» и в нем дается небольшое описание выбранного штата. Я попытался найти такие вещи и нашел то, что искал, но не совсем то же самое. Я узнал, что мне нужно использовать svg, но мне трудно найти руководство о том, как выполнять то, что мне нужно.

Answer 1

Лично я бы вставил изображение карты США на страницу.

Тогда я бы использовал функцию HTML <map> для создания гиперссылок на «каждую область карты», которую вы хотите «связать». Затем я бы дал гиперссылку на разные страницы (или всплывающую подсказку через CSS), которая содержала бы более подробную информацию о конкретном c Штате США.

Если вы ранее не использовали функцию <map> Вот простое краткое изложение:

<img src="XXX" width="XXX" height="XXX" alt="XXX" usemap="#mapname">

<map name="mapname">
    <area shape="rect" coords="SEE BELOW" href="XXX" alt="XXX">
</map>

Атрибут coords="XXX" должен быть отформатирован следующим образом: coords="x1,y1,x2,y2" где:

x1 = top left X coordinate
y1 = top left Y coordinate
x2 = bottom right X coordinate
y2 = bottom right Y coordinate

Обратите внимание: 1. Атрибут usemap="#mapname" должен включать #. 2. Вы должны поместить свою собственную информацию, где XXX был размещен. 3. Вам не нужно включать href="XXX" в <area>, если вы собираетесь использовать функцию всплывающей подсказки, используя CSS. Это потребуется, если вы собираетесь связать каждый штат США с отдельной выделенной страницей.

Если вы хотите изучить опции CSS Tooltips, это было бы хорошим началом: https://kazzkiq.github.io/balloon.css/.

Есть и другие способы сделать это, используя только CSS, или используя Javascript / JQuery, но это будет чистый HTML метод для использования, довольно удобный для этого.

Надеюсь это поможет.