Warning: file_get_contents(): php_network_getaddresses: getaddrinfo failed: Name or service not known in /var/www/htmler.ru/wp-content/plugins/dodel-dance-booking/inc/api.php on line 22

Warning: file_get_contents(https://.dancecloud.at/index.php?c=PublicCustomers&a=JSON&what=courses): failed to open stream: php_network_getaddresses: getaddrinfo failed: Name or service not known in /var/www/htmler.ru/wp-content/plugins/dodel-dance-booking/inc/api.php on line 22

Warning: Invalid argument supplied for foreach() in /var/www/htmler.ru/wp-content/plugins/dodel-dance-booking/inc/meta.php on line 17
HTML Создание карты изображений - HTMLer.ru
HTML Создание карты изображений
HTML Основы

HTML Создание карты изображений

В данной статье речь пойдет о создании карт изображений. Для чего они нужны? Например, у вас имеется изображение, с помощью определенных манипуляций вы можете сделать ее ссылкой. Ссылкой можно сделать не только изображение целиком, а и любое количество объектов на изображении.
Давайте начнем с самого простого, сделаем одно изображение одной ссылкой. Для этого необходимо перейти в исходный код вашего сайта и найти строчку с нужным изображением. Нашли? Теперь выделяем строчку с изображением и нажимаем на кнопку с изображением звена цепи, она расположена вверху окна. В появившемся окне вводим URL на который перебросит ссылка. Сохраняем и проверяем.

HTML Создание карты изображений

Теперь давайте создадим более сложную карту изображений. В тег IMG добавляем параметр (USEMAP)указывающий место нахождения карты описываемого изображения:

Далее прописываем такой специальный тег, который называется MAP:
Прописываем атрибут name

Чтобы тег map связать с изображением в коде рисунка пишем, тег USEMAP и через знак # прописывает тоже название, что и в атрибуте name, как показано выше.
В теге map прописываем, тег area (описывает участок изображения и ставит ему в соответствие URL), в нем же пишем атрибут href(адрес ссылки который отобразится при щелчке на изображение) далее пишем атрибут shape (этим атрибутом мы говорим браузеру, какой фигурой будет наша ссылочная область). И последний в этом теге атрибут cords (указывает координаты ссылочной области x; y;)
Чтобы сделать ссылкой другую область изображения копируем, тег area и под все вышеописанные атрибуты, находящиеся в нем подставляем другие необходимые нам данные.

Преимущества HTML Создание карты изображений

Если вы решили создать хороший веб сайт, тогда вам необходимо понимать и знать недостатки и преимущества карт-изображений (КИ)

Имеет смысл применять HTML Создание карты изображений в таких ситуациях:

Чтобы отображать пространственные связи, например географические координаты, радиосхемы. Пример, вы обладаете некой информацией по различным предприятиям Украины, очень наглядно будет сделать представление о каждом предприятии в виде карты Украины и при нажатие, на какое либо из них будет происходить переход к желаемой информации.

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

Еще одно преимущество карт-изображений это экономия места на хостинге и облегчение навигации для пользователя.

Недостатки

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

плохо спроектированные КИ могут привести к путанице. Иногда довольно затруднительно определить области, которые являются активными на изображении.

Отсутствие возможности у браузера пройденные ссылки отмечать другим цветом.

Атрибуты тега area

Активные (части) области на рисунке определяются атрибутами тега

, каждая часть это — ссылка. Совокупность таких областей привязанных к картинке называют картой изображения. На первый взгляд этот рисунок похож на все остальные, но разница в том, что он разбит на области различной формы, и эти области по отдельности являются ссылкой.
Для задачи форм области, их размеров, установки адреса документов, имени окна, в которое браузером будет загружаться документ, применяется тег. Месторасположение его не изменно и находится оно в контейнере тега .
Атрибуты:
accesskey – для переходя в область при помощи набора комбинации клавиш;

type – для установки MIME документа, куда ведет ссылка;

tabindex – для задачи последовательности перехода от элемента к другому элементу при помощи кнопки Tab;

hreflang – для указания языка документа, куда ведет ссылка;

alt –альтернатив-ый текст.

href- для указания адреса документа,по которому будет осуществлен переход .
target – для записи имени окна,возможно фрейма, куда браузеру необходимо загрузить документ;

coords- для координат активной области;

shape- для задачи формы области.


Также рекомендуем: