Как создать карты изображений в HTML?

Создание ссылок на изображения в HTML

Подобно текстовым ссылкам, HTML также поддерживает привязку изображения к целевому ресурсу. В большинстве практических случаев ссылки на изображения более полезны, чем текстовые ссылки, простой пример — загружаемое изображение, которое приведет к большему количеству кликов, чем текстовая ссылка. Для этой цели используется тот же тег привязки вместе с тегом изображения , как показано в приведенном ниже коде.

<a href="https://www.webnots.com/" target="_self" >
<img src="https://img.webnots.com/2015/06/header_logo_home_2x.png" alt="WebNots Home"></a>

Это будет выглядеть в браузере, как показано ниже, и щелчок по изображению приведет пользователя на домашнюю страницу.

Карты изображений HTML

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

Ниже приведены два типа карт изображений, доступных в HTML:

Карты изображений на стороне клиента
Карты изображений на стороне сервера

Обе темы мы обсудим подробно на примере.

Карты изображений на стороне клиента

Карта изображений на стороне клиента использует атрибут «usemap» тега и определяется тегами

. Ниже приведено простое изображение размером 500 на 500 пикселей, имеющее три формы — прямоугольник, круг и многоугольник.

Изображение может быть связано с тремя разными страницами на сайте, и каждая ссылка определяется координатами внутри изображения. Щелчок по определенной форме изображения (как определено координатами) откроет новую страницу соответственно, как показано ниже:

Код для изображения выше должен выглядеть примерно так:

<img src="https://img.webnots.com/2014/01/HTML-Image-Map-Example.png" alt="HTML Image Map" width=500 height=500 border="1" usemap="#imagemap1"/>
<map name="imagemap1">
<area alt="Home" coords="19,36,234,216" shape="rect" href="https://www.webnots.com/" target="_blank" />
<area alt="Blog" coords="363,124,100" shape="circle" href="https://www.webnots.com/webmasters-blog/" target="_blank" />
<area alt="Videos" coords="38,263,205,269,422,249,453,367,394,453,88,456,25,362" shape="poly" href="https://www.webnots.com/demos-and-videos-for-webmasters/" target="_blank" />
</map>

Атрибут Usemap используется для идентификации имени карты вместе с тегом #. И

указывает на различные области, определенные в изображении. Аналогично

используется для определения области в изображении и принимает одну из следующих трех форм:

Прямоугольник

Прямоугольник определяется атрибутом формы «rect» и принимает координаты в формате «x1, y1, x2, y2», где (x1, y1) — это верхний левый угол прямоугольника, а (x2, y2) — нижний правый угол. угол прямоугольника.

Круг

Круг определяется атрибутом формы «circle» и принимает координаты в формате «x1, y1, r1», тогда как (x1, y1) — центр круга, а r1 — радиус круга.

Многоугольник

Многоугольник определяется с помощью атрибута формы «poly» и принимает координаты в формате «x1, y1, x2, y2,…., Xn, yn», где (x1, y1) указывает первую точку многоугольника, а (xn, yn) — последняя точка многоугольника.

Заметка: Используйте любой из инструментов локатора координат, доступных в Интернете, чтобы найти точные координаты изображения. Убедитесь, что размер загруженного изображения такой же, как вы измерили для определения областей ссылок.

Карты изображений на стороне сервера

Карта изображения на стороне сервера использует атрибут «ismap» тега , чтобы информировать сервер о документе, который будет доставлен, когда пользователь щелкает определенные координаты изображения. Координата начинается с верхнего левого угла изображения с (0,0), а к URL-адресу добавляется вопросительный знак. Например, если вы хотите создать ссылку, когда пользователь щелкает координаты (40,40) на изображении, можно использовать следующий код.

<a href="https://www.webnots.com/apps/search?q=html" target="_blank" >
<img ismap src="Home.png" 
        alt="Image Maps" border="1"/>
</a>

Это вызовет запрос / apps / search? Q = html? 40,40 к серверу, и конфигурация должна быть выполнена на стороне сервера, чтобы обработать этот скрипт и доставить требуемый документ.