школа по созданию сайтов


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

В HTML присутствует множество потрясающих и замечательных возможностей, и в случае с изображениями и графикой мы можем это также увидеть! Оказывается, любое изображение и графику на Вашем сайте можно сделать интерактивной! В этом нам поможет такая технология, как создание карт изображений. Большинство блогеров даже не знает о такой возможности, но Вы узнаете о ней прямо сейчас или освежите свои знания если Вы уже опытный сайтостроитель!

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

Для того, чтобы сделать отдельные области изображения интерактивными создаётся карта изображения. Для этого используются два основных элемента: элемент «map», «/map» и элемент «area». Содержание блока «map» – «map» описывает графику или изображение в виде «карты», с условно обозначенными областями, которым может быть присвоена активность или задано определённое значение. При наведении курсора на активную область изображения, его «стрелка» превращается в элемент «рука» и может также появляться подсказка «title». Например, при нажатии на такую область происходит переход по ссылке связанной с этой частью изображения.

Элементы «map», «/map» связывают с элементом «img» (а также элементом «input») посредством атрибута usemap, который указывает, в каком месте находится карта изображения, то есть путь к ней. Сама карта невидимым образом как бы спроецирована (наложена) на изображения и показывает, где находится та или иная область, её название и функцию. Возможно, представить также, что, наоборот, изображение наложено на карту.

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

создание карт изображения

Для описания конкретной области служит элемент «area» («зона»), который определяет её координаты, форму и размеры. Элемент «area» указывается для каждой активной зоны карты. Атрибуты, которые определяют форму описываемой области на карте – обязательны.

Атрибут shape. Служит для задания формы активной области на карте и её координат. Для атрибута shape можно прописывать следующие значения:

  • rect – прямоугольная область;
  • circle – область в форме круга;
  • poly – область в форме многоугольника;
  • default – область по умолчанию (вся).

Атрибут coords. Задаёт координаты области на экране. Позиции контрольных точек указываются в единицах длины через запятую:

  • для круга задают координаты центра и радиус в пикселах (координаты центра берут отсчёт от левого и верхнего краёв изображения);
  • для прямоугольной области требуется указать координаты точек четырёх углов;
  • для многоугольной области задаются координаты точек по периметру описываемой области изображения.

С элементом «area» также используются атрибуты title=«…», и alt=«…», которые показывают текст подсказки и выводят альтернативный текст при отсутствии доступа к изображению на месте его локализации. Существует также масса других атрибутов включаемых в состав элемента «area» и используемых для созданных карт изображений, о которых Вы можете узнать из самоучителя по созданию сайтов. В частности, один из самых частых вариантов это привязка к изображению или его части гиперссылки. Вот мы и подошли к изучению самой турбо-основы, супер-мега-драйв концепции создания виртуальной реальности, так сказать, Матрицы!

При редактировании этой главы слушаю видео лекции замечательного человека Владимира Викторовича Довганя. Вас что-то постоянно должно мотивировать по карте изображения жизни, чтобы заниматься творчеством и не утонуть в серых буднях! Статью о мотивации читайте здесь: Мотивирующий сайт! Как и во всём, при создании сайта важна мотивация! А теперь резюмируем наш второй урок и переходим к изучению основы основ, - гиперссылкам, - без которых немыслимо существование сети, как таковой!




по созданию сайтов


© www.1artsite.com | Все права защищены.
© Создание сайта Сергей Меркоев, 2010-2014 гг.