Войти через VK Войти через FB Войти через Google Войти через Яндекс
Поиск по сайту
PHP Поиск
Создание карты изображений в HTML
Карта изображений (Image Map) позволяет привязывать ссылки к фрагментам изображения. Щелкая мышью на отдельных частях изображения, пользователь может переходить по той или иной ссылке на разные Web-страницы.
Карта изображения определяется парным тегом <map>…</map>. HTML-документ может содержать несколько карт изображения, поэтому каждой карте должно быть присвоено уникальное имя, которое определяется атрибутом name.
Карта изображения состоит из участков изображения и соответствующих им ссылок. Описывает участок изображения и ставит ему в соответствие ссылку одиночный тег <area>.
Атрибуты тега <area>
shape | Очертания области. Возможные значения атрибута:
| ||||||
coords | Координаты области. Для прямоугольника – координаты левого верхнего и правого нижнего углов. Для круга – координаты центра и радиус. Для многоугольника – координаты всех углов. |
||||||
href | Адрес файла, на который делается ссылка. | ||||||
nohref | Означает, что эта область не действует. Удобен для вырезания дыр. | ||||||
alt | Текстовое описание области. Служит альтернативой при отключенной в браузере загрузке изображений. | ||||||
title | Всплывающий текст, появляющийся при наведении курсора мышки на заданную область. |
Координаты по умолчанию измеряются в пикселях.
Начало отсчета координат – это верхний левый угол экрана, т.е.
Примеры различных форм областей карты изображений
<!-- прямоугольник 10 на 10 пикселей в верхнем левом углу изображения -->
<area shape="rect" coords="0, 0, 9, 9">
<!-- круг с радиусом в 5 пикселей и центром, расположенном в точке (10, 10) -->
<area shape="circle" coords="10, 10, 5">
<!-- треугольник с координатами вершин (10, 50), (15, 20) и (20, 50) -->
<area shape="poly" coords="10, 50, 15, 20, 20, 50">
Если две описанных области накладываются друг на друга, то используется ссылка, принадлежащая первой из них. Эту особенность можно использовать в ситуации, когда пользователь щелкает мышью на точке, которая не принадлежит ни одной из областей карты, определив последнюю область карты как прямоугольник шириной и высотой во всю картинку.
Чтобы использовать изображение, как карту, в тег <img> необходимо ввести дополнительный атрибут usemap, определяющий имя карты изображения. Перед этим именем ставится знак "#".
Пример использования Image Map
<map name="map0">
<area shape="rect" coords="0, 0, 402, 42" href="#area1">
<area shape="rect" coords="0, 42, 132, 204" href="#area2">
<area shape="poly" coords="260, 96, 331, 42, 403, 96, 377, 180, 286, 180" href="#area4">
<area shape="circle" coords="180, 100, 90" href="#area3">
<area shape="rect" coords="0, 0, 402, 204" href="#area5">
</map>
<img src="imagemap.gif" border="0" width="402" height="204" usemap="#map0">

При кликах на различные области данного изображения меняется цвет соответствующего текста:
Область 1
Область 2
Область 3
Область 4
Применение технологии Image Map
Технология Image Map применяется в самых различных областях. Однако наиболее часто ее применение можно увидеть при создании графических меню, когда создается одно большое изображение с элементами меню, и каждому участку изображения предписывается определенное действие.
Читать дальше: SVG карты
.
Прокомментировать/Отблагодарить
Популярное:
- Анализ сайта
- Проверка email
- Чей IP-адрес?
- Чей домен?
- Где телефон?
- Генератор Sitemap
- Примеры Ajax
- Примеры PHP
- Примеры Javascript
- Примеры HTML, CSS
- Бесплатные прокси
- GEO-сервисы
- Сайт в ТОП (SEO)
- Полезные ссылки
- Генератор Robots.txt
Содержание:
- HTML
- Что такое HTML
- <!DOCTYPE>
- Мета теги в <head>
- Тег <base>
- Текст в html
- HTML списки
- Ссылки
- Картинки на сайте
- Таблицы
- Фреймы
- Формы
- DHTML
- Музыка
- Видео
- Карты изображений
- SVG карты
- Графика в HTML
- SSI .shtml
- Таблица цветов RGB
- Правильное
сочетание цветов - Таблица
«безопасных»
цветов - Таблица символов
- Примеры HTML, CSS
- CSS
- JavaScript
- PHP + MySQL
- Введение в PHP
- Основы языка
- Использование
массивов - $_server
- Создание функций
- Строки
- Функции работы
со строками - Объектное
программирование - Формы
- Файлы
- Загрузка файлов
на сервер - MySQL
- Cookie
- htaccess
- Безопасность
- Сессии
- Отправка почты
- Кэширование
- Дата, время
- Математические
функции - Дополнительные
возможности - Регулярные
выражения - Библиотека Curl
- IMAP, POP3, NNTP
- Оптимизация
- Примеры скриптов
- XML + XSLT
- AJAX
- Графика CorelDRAW
- SEO
- Сервисы
- Разное
- Движки сайтов (CMS)
- Регистрация
доменов и хостинг - Заработок для
web-мастеров - Хостинг
- Настройка DNS
- ADSL
- RSS
- ActiveX и HTML
- Паролирование
страницы - HTTP коды
- HTTP протокол
- HTTP заголовки
- Прячем ссылки
- ☠ Черный список
сайтов - ☭ Заработок
в интернете - Термины и
определения - Продажа доменов
- ✉ Настройки
Яндекс-почты - Кнопки социалок
- ☎ Настроки SIP
в телефоне - Создание
поискового плугина - Сервис
коротких ссылок - Telegram: бот, ссылки
- Шаблоны сайтов
- Друзья
- Задания к л/р
- Примеры
зачетных задач
- Статьи, обзоры
- Новости