Главная » Языки программирования

Серверная карта-изображение

Содержание
  1. HTML :: Карты-изображения
  2. Атрибуты ismap и usemap
  3. Серверные карты-изображения
  4. Быстрый переход к другим страницам
  5. HTML Карты изображений
  6. Пример
  7. Как это работает?
  8. Изображения
  9. Создать карту изображений
  10. Кликабельные области
  11. Форма кликабельной области
  12. Shape=»rect»
  13. Пример
  14. Shape=»circle»
  15. Пример
  16. Shape=»poly»
  17. Пример
  18. Карта изображений и JavaScript
  19. Пример
  20. Резюме
  21. HTML Теги изображения
  22. Вопросы для самоконтроля
  23. ПАЛИТРА ЦВЕТОВ
  24. ПРИСОЕДИНЯЙТЕСЬ!
  25. Связь с админом
  26. Топ Учебники
  27. Топ Справочники
  28. Топ Примеры
  29. Веб Сертификаты

HTML :: Карты-изображения

Изображения на веб-странице можно использовать в качестве гиперссылок, для этого нужно поместить тег между открывающим и закрывающим тегами гиперссылки. В результате при клике по любой области данного изображения пользователь перейдет по адресу, указанному в атрибуте href элемента «a». Однако иногда возникает потребность в том, чтобы различные области (части) одного и того же изображения являлись отдельными гиперссылками, ведущими в совершенно разные места. В этом случае приходится использовать карту-изображение, которое как раз и позволяет хранить в себе сразу несколько гиперссылок.

(от англ. image map) – это изображение, содержащее специальные активные зоны, являющиеся гиперссылками.

Атрибуты ismap и usemap

Карты-изображения применяются в двух вариантах: и , которые задаются, соответственно, атрибутами ismap и usemap элемента «img» . Первый атрибут является логическим и не принимает значений, являясь индикатором, а второй – в качестве значения принимает имя специального элемента «map» , перед которым ставится знак решетки. Рассмотрим эти два вида графических карт подробнее.

Серверные карты-изображения

Серверные карты-изображения строятся следующим образом: создается элемент «a» , атрибут href которого указывает адрес программы-обработчика, расположенной на сервере, затем внутри гиперссылки «a» располагается элемент «img» , у которого указывается атрибут ismap . При нажатии по какой-либо активной зоне такого изображения, на сервер будут переданы координаты x и y щелчка мыши, которые отсчитываются от верхнего левого угла изображения. Координаты отправляются на сервер методом GET , т.е. передаются вместе с адресом серверной программы-обработчика, указанного в атрибуте href гиперссылки, непосредственно в самом адресе и перечисляются через запятую после знака вопроса. На сервере программа-обработчик принимает координаты и решает, какой документ необходимо отправить в ответ. Рассмотрим конкретный код, показанный в примере №1 . Отображение соответствующей страницы в браузере показано на рис. №2 .

          Это изображение – серверная карта. 
   map_2 
Кликните по нужной фигуре, чтобы перейти 
на страницу ее описания.

Пример №1. Формирование серверной карты-изображения

Читайте также:  Что такое префиксы css

Рис. №2. Отображение страницы с использованием серверной карты-изображения браузером

Если мы кликнем, например, по прямоугольнику, на сервер будут переданы координаты x и y клика. Программа проверит в какой диапазон попадают данные координаты и после проверки вернет нам веб-страницу с описанием свойств прямоугольника.

Клиентские карты-изображения, теги и

Клиентские карты-изображения, наоборот, располагаются полностью на компьютере пользователя и строятся с использованием элементов «map» и «area» . Элемент «map» формируется парным тегом (от англ. map – карта). Он связывается с картой-изображением через свой атрибут name . Значение данного атрибута должно совпадать со значением атрибута usemap (знак решетки при этом нужно опускать) соответствующего элемента «img» , выступающего в роли клиентской карты-изображения. Кроме того, элемент «map» является контейнером для хранения элементов «area» , каждый из которых определяет активную область карты-изображения и превращает их в гиперссылки. Формируется элемент «area» при помощи одиночного тега (от англ. area – область, регион), т.е. является пустым элементом (см. пример №3 ).

        Это изображение – клиентская графическая карта. 
  map_3      
Кликните по нужной фигуре, чтобы перейти 
на страницу ее описания.

Пример №3. Формирование клиентской карты-изображения

Поскольку элемент «area» служит для создания гиперссылок, то он обладает всеми атрибутами элемента «a» : href , target , download , rel , hreflang , type (смотреть). Кроме того, он связан с изображением и служит для определения его активных зон, поэтому обладает еще и дополнительными атрибутами: alt , shape и coords (от англ. coordinates).

Атрибут alt задает альтернативный текст для данной активной зоны изображения.

Атрибут shape определяет форму данной активной зоны изображения, а coords задает для нее координаты в пикселях, которые отсчитываются от верхнего левого угла изображения, где считается, что x=0px и y=0px . В качестве значений shape принимает:

  • «circle» – область в виде окружности; через запятую указываются координаты x и y центра окружности, а также ее радиус, например, coords=»150, 200, 120″ ;
  • «default» – вся область изображения;
  • «poly» (от англ. polygon) – область в виде произвольного многоугольника; через запятую указываются координаты x , y его вершин, начиная с любой и заканчивая обход в стартовой точке, например, coords=»50,70, 64,82, 85,82, 130,60, 50,70″ ;
  • «rect» (от англ. rectangle) – область в виде прямоугольника; через запятую указываются координаты x , y левого верхнего и правого нижнего углов, например, coords=»50,70, 154,213″ .

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

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

Еще один пример карты-изображения можно посмотреть на соответствующей странице нашего учебного сайта №1 .

Быстрый переход к другим страницам

html.okpython.net Copyright © 2016-2023.

Источник

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

HTML тег определяет карту изображения. Карта изображений — это изображение из кликабельными областями. Области определяются одним или несколькими тегами .

Попробуйте кликнуть на компьютере, телефоне или чашке кофе на изображении ниже:

Карта зображень

Пример

Вот исходный HTML код для карты изображений выше:

Как это работает?

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

Для создания карты изображений вам нужно изображение и некоторый HTML-код, который описывает области, на которые можно кликнуть.

Изображения

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

Workplace

Значение usemap начинается с хеш-тега # , за которым следует имя карты изображений и используется, чтобы создать взаимосвязь между изображением и картой изображений.

Примечание: Вы можете использовать любое изображение для карты изображений!

Создать карту изображений

Элемент используется для создания карты изображений и связывается с изображением с помощью необходимого атрибута name :

Атрибут name должен иметь то самое значение, что и атрибут usemap .

Кликабельные области

Потом добавьте кликабельные области.

Область, на которую можно кликнуть, определяется с помощью элемента .

Форма кликабельной области

Вы должны определить форму области, на которую можно кликнуть, и вы можете выбрать одно из этих значений:

  • rect — определяет прямоугольную область
  • circle — определяет круговую область
  • poly — определяет полигональную область
  • default — определяет всю область

Вы также должны определить некоторые координаты, чтобы можно было разместить область, на которую можно нажать на изображении.

Shape=»rect»

Координаты для shape=»rect» состоят попарно, одна для оси x, и одна для оси y.

Т.о., координаты 34,44 расположены на 34 пикселей от левого поля и 44 пикселей от верхнего:

Карта зображень

Координаты 270,350 расположены в 270 пикселей от левого поля и 350 пикселей от верхнего:

Карта зображень

Теперь у нас есть достаточно данных, чтобы создать прямоугольную область, на которую можно нажать:

Пример

Это область, которая становится интерактивной и направляет пользователя на страницу «computer.html»:

Карта зображень

Shape=»circle»

Чтобы добавить область круга, сначала найдите координаты центра окружности:

Карта зображень

Затем укажите радиус окружности:

Карта зображень

Теперь у вас есть достаточно данных для создания интерактивной круговой области:

Пример

Это область, которая становится интерактивной и направляет пользователя на страницу «coffee.html»:

Карта зображень

Shape=»poly»

shape=»poly» содержит несколько координатных точек, создает фигуру, образованную прямыми линиями (многоугольник).

Это можно использовать для создания любой фигуры.

Как, возможно, форма круассана!

Как мы можем сделать так, чтобы круассан на картинке ниже стал ссылкой, которую можно кликнуть?

Французская еда

Мы должны найти координаты x и y для всех краев круассана:

Французька їжа

Координаты подаются попарно, одна для оси x и одна для оси y:

Пример

Это область, которая становится интерактивной и направляет пользователя на страницу «croissant.html»:

Французская еда

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

Интерактивная область может также вызвать функцию JavaScript.

Добаьте событие click к элементу для выполнения функции JavaScript:

Пример

Здесь мы используем атрибут onclick для выполнения функции JavaScript при нажатии на область:

Резюме

  • Используйте HTML элемент чтобы определить карту изображений
  • Используйте HTML элемент чтобы определить кликабельные области на карте изображений
  • Используйте HTML атрибут usemap элемента для указания на карту изображений

HTML Теги изображения

Тег Описание
Определяет изображение
Определяет карту изображений
Определяет кликабельную область внутри карты изображений
Определяет контейнер для нескольких ресурсов изображений

Для ознакомления с полным списком всех доступных HTML тегов посетите HTML Справочник тегов на нашем сайте W3Schools на русском.

Вопросы для самоконтроля

  • Что такое карта изображений на веб-странице?
  • Для чего нужны карты изображений на HTML-странице?
  • Какой тег определяет карту изображений?
  • С помощью какого тега определяются кликабельные области на изображении?
  • Какой атрибут нужно добавить к изображению, чтобы установить взаимосвязь между изображением и картой изображений?
  • Какой тег определяет карту изображений на стороне клиента?
  • С помощью какого атрибута карта изображений связывается с изображением?
  • Какой тег определяет кликабельную область внутри карты изображений?
  • Какое значение определяет прямоугольную кликабельную область на изображении?
  • Какое значение определяет круговую кликабельную область на изображении?
  • Какое значение определяет полигональную кликабельную область на изображении?
  • Какое значение делает кликабельным всё изображение?
  • Какой атрибут используется для выполнения JavaScript-функции onclick при нажатии на кликабельную область изображения?
  • К какому элементу необходимо добавить событие click для выполнения JavaScript-функции onclick?

ПАЛИТРА ЦВЕТОВ

ПРИСОЕДИНЯЙТЕСЬ!

Связь с админом

Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:

Топ Учебники

Топ Справочники

Топ Примеры

Веб Сертификаты

Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.

Источник

Оцените статью
© 2024 Программирование