И представляют из себя универсальные пустые контейнеры, которые необходимо заполнить каким-либо содержанием, либо сгруппировать вложенные элементы для их дальнейшей стилизации средствами CSS , и при необходимости динамически манипулировать ими с использованием скриптов, например, на таком языке программирования как Javascript .
Обращаю Ваше внимание на то, что элементы Этот элемент является блочным и это означает, что его содержимое всегда будет начинаться с новой строки, при этом элемент занимает всю доступную ширину. Не так давно, этот элемент занимал абсолютный топ, посвященный делению страницы на логические составляющие, но с приходом HTML 5 было добавлено достаточно семантических элементов, которые позволяют в некоторых ситуациях заменить тег В отличии от блочного элемента Тег вы можете использовать для таких задач как:
Абзацы мы объединили тегом <div>, а это style =
"color:red"
>
слово
мы заключили тегом <span>. С помощью встроенной таблицы стилей мы выделили это слово красным цветом, а блок текста получил зеленый цвет.
Обратите внимание, что тег <div> является блочным и это означает, что его содержимое всегда будет начинаться с новой строки, при этом элемент занимает всю доступную ширину. Этот блок тоже содержит два абзаца. С помощью встроенной таблицы стилей мы указали для всего блока цвет заднего фона - khaki, а для этога style =
"background-color:orangered"
>
слова
orangeRed (мы заключили его в тег <span>). В этом примере мы: ).
Результат нашего примера. Рассмотрим пример как выглядит карта изображений в html: При наведении курсора мышкой на области зеленого прямоугольника видно, что она является ссылкой на "#green_link
" (метка выбрана для примера, можно сделать ссылку на любую страницу в интернете). У красного квадрата на "#red_link
", а у синего круга соответственно на "#blue_link
". Код этого примера: Как видно из примера код не такой уж и сложный. Разберем теги для создания карты ссылок изображения. 1. Необходимо создать связку изображения При создании карты ссылок атрибут usemap
является обязательным для тега img. 2. Описание карты 3. Каждый элемент карты описывается с помощью тега
, в котором указывается тип объекта с помощью атрибута shape
(прямоугольник, круг или многоугольник) и его координаты. Области могут перекрывать друг друга. В этом случае ссылка будет вести на тот объект, что описан последним. 1. Атрибут shape="тип_объекта"
- задает тип объекта. Может принимать следующие значения: 2. Атрибут coords="значения_координат"
- определяет геометрическое расположение объекта и его размеры. Точкой отчета изображения является верхний левый угол. Т.е. если вы указали отступ 10 по высоте, то это означает 10 пикселей вниз. В зависимости от типа объекта нужно задавать значения координат в разных форматах. Все значения указывается в пикселях (пометку px писать не нужно). 3. Атрибут href="адрес_перехода"
- задает ссылка для перехода (аналогично ). Помимо адреса перехода можно использовать функции JavaScript для выполнения какого-то действия. 4. Атрибут target="значение"
- аналогично тегу определяет действие перехода по ссылке. Может принимать значения: 5. Атрибут title="подсказка"
- выводит всплывающую подсказку. можно также сделать более красивую всплывающую подсказку: как сделать красивую всплывающую подсказку для ссылки » 6. Атрибут nohref
- делает область неактивной. Используется при перекрытии объектов. Используется довольно редко, но иногда это может стать незаменимым решением. Например можно сделать маленький круг внутри большого круга неактивным. Обязательно область nohref должна идти первой. Пример кода: Использование карты ссылок на изображении имеет место лишь в узком круг задач. Например, при создании какой-то схемы или карты проезда. В других случаях применение карты при создании меню и других графических элементов выглядит необоснованной. Мы с Вами уже говорили о том как сделать рисунок ссылкой.. в этой главе поговорим о том как сделать фрагмент, область рисунка ссылкой на тот или иной документ, а так же о том как сделать различные области одного и того же рисунка ссылками на различные документы. Для осуществления данной задачи нам не обойтись без так называемых навигационных карт. Предположим, у нас имеется такой рисунок: И нам необходимо сделать, так что бы пользователь, нажав на одну из этих "кнопок" переходил по ссылке в тот или иной документ.. что нам для этого нужно? В первую очередь обозначим наш рисунок не как обыкновенное графическое изображение, а как навигационную карту присвоив этому рисунку своё индивидуальное имя. Делается это при помощи атрибута usemap
тега Назовём наш рисунок/карту именем panel
. Это будет выглядеть так:
Не забываем по правилам синтаксиса поставить знак #
решётки перед именем.. Ну а теперь, собственно, составим навигационную карту. Она задаётся тегом у которого есть атрибут name
- имя.. улавливаете к чему я веду? Ну как Вы наверное уже догадались, укажем на базе какого рисунка мы будем строить нашу навигационную карту указав его имя.. Теперь займемся тем, что укажем браузеру области рисунка которые будут являться ссылками, а заодно пропишем пути переходов по этим ссылкам. Эту задачу берет на себя тег
, закрывающего тега он не требует, и имеет следующие атрибуты, с которыми мы будем работать: Теперь наша карта приобретает такой вид:
По сути теперь "зелёная" квадратная кнопка стала рабочей. В чем Вы можете убедится нажав на неё в этом примере: Немного поспешил с примером толком не объяснив суть написанного.. Заострим внимание на атрибутах тега
. href="primer1.html"
- здесь думаю понятно, это путь к документу, который должен открыться при нажатии на "зелёную кнопку". Так как кнопка у нас квадратная, а квадрат как известно это "правильный" прямоугольник, форму области рисунка назначаем прямоугольной shape="rect"
. А теперь самое интересное coords="15,15,82,82"
- координаты.. Для прямоугольника они задаются двумя точками по принципу "Х1,У1,Х2,У2" Где Х1,У1- первая точка и соответственно Х2,У2 -вторая. Координаты указываются в пикселях.. Наш рисунок/карта имеет размеры 300 на 100 пикселей, её самый верхний левый пиксель имеет координаты Х=0,У=0, а самый нижний правый Х=300,У=100. Если не понятно, окунёмся в геометрию за пятый класс.. Взгляните на рисунок: Так, выбрав прямоугольную форму shape="rect"
для нашей области в виде квадратной кнопки мы указали координаты ёё верхнего левого и нижнего правого пикселей.. которых вполне достаточно для обозначения "рабочей" области всей кнопки. Займёмся "жёлтой кнопкой", она у нас представлена в виде треугольника. Для того чтобы выделить её "рабочую" область из нашего рисунка, присвоим атрибуту shape
значение poly
- полигон, которое определит эту область как некий многоугольник, где координаты через запятую будут являться его вершинами, их может быть сколь угодно много "Х1,У1,Х2,У2,Х3,У3,Х4,У4… Х124,У124" фигура образованная этими точками вершинами углов может иметь вид любого многоугольника как правильного, так и неправильного. В нашем случае угла всего три, на то он и треугольник, следовательно его координаты будут заданы тремя парами значений "Х1,У1,Х2,У2,Х3,У3" Значит всё вместе пишем так:
shape="poly" coords="148,15,185,82,110,82"
>
А вот рисунок который наглядно показывает откуда берутся координаты точек.. Ну и последняя "красная кнопка" она у нас круглая.. значит форма области будет круглой shape= "circle"
. На сей раз с координатами дело обстоит немного иначе. Нам понадобится три значения Х,У,R. Х и У это координаты центра нашей окружности, а R - это длина радиуса в пикселях. Вот рисунок: А вот пример: Теперь немного о том, что ещё желательно было бы сделать с нашей картой прежде чем "монтировать" её в какую либо страницу. Определим фиксированные размеры рисунка-карты атрибутами width
и height
Напишем альтернативный текст, как для всего рисунка карты, так и для её отдельных областей используя атрибут alt
, а также описание элементов атрибутом title
. Избавимся от рамки бордюра.. сделаем border="0"
..(ну если Вам с бордюром больше нравится, можете этого не делать.. я не настаиваю..) В конце должно выглядеть примерно вот так: Иногда удобно формировать "рабочую" область изображения "смешивая" разные формы.. Предположим, наша очередная кнопка имеет такой вид: Конечно, можно определить форму как многоугольник, но придется задать уйму координат для округлой части такой кнопки (ну это если нужна особая точность в навигационной карте). А можно определить в этом примере две формы прямоугольник rect
и окружность circle
как показано на рисунке: А в коде указать путь к одному и тому же документу: Рассмотрим на примере.. предположим необходимо изготовить вот такую кнопку: Как быть с отверстием в ней? Тег
помимо атрибута href
имеет противоположенный по значению атрибут nohref
- неактивная область, то есть если пользователь нажмет на такую область, то ровным счетом ничего не произойдёт, чего нам собственно и необходимо добиться при изготовлении "отверстия" в нашей карте. Карта будет задана двумя областями, неактивной окружностью circle
и активной прямоугольной областью rect
и как показано на рисунке чертеже иметь следующие координаты: Как уже говорилось ранее, при пересечении областей наибольшим приоритетом будет пользоваться та область, которая в коде внутри тега указана первой Следовательно, пример будет иметь такой вид: Отрывок из справочника (атрибуты тега Непонятно? Тогда читаем.. С атрибутом usemap
мы вроде бы разобрались.. Смотрите, пользователь (клиент) открыв Вашу страницу, одновременно со всем остальным содержанием, загружает "на свою сторону" как сам рисунок, так и навигационную карту к нему и всё это дело обрабатывается его браузером. А вот атрибут ismap
тега Пишется так: Где
адрес навигационной карты на каком либо сайте.. размещённом на том или ином сервере.. Всё равно непонятно? Если да, то тогда не стоит заморачивотся по этому поводу.. используйте usemap
, на мой взгляд такое решение будет лучшим в большинстве случаев при использовании навигационных карт. Что бы без труда определить координаты той или иной точки на Вашей навигационной карте откройте рисунок графическим редактором тем же Paint к примеру.. там, когда будете двигать указателем по рисунку, увидите две меняющиеся цифры, это и есть координаты пикселя Х и У на данном рисунке. В Paint эта панелька расположена в нижней части экрана. При создании страницы с навигационной картой тег
Можно, но не нужно.. потому что при загрузке страницы могут возникнуть проблемы, так как карта с разметкой уже загрузилась, а самого рисунка ещё нет.. И ещё что касается загрузки.. В этом месте кода может быть всё что угодно длинный текст, таблицы, графика.. но всё же лучше здесь ничего не писать
А писать здесь, так как во время загрузки страницы, пользователь не дождавшись её окончания, может пытаться нажимать на кнопки указанные в навигационной карте которая к этому времени еще не загрузилась.. Привет. Давеча мне довелось иметь дело с такой специфической фичей html как карта изображения. Скажу честно, что мне не часто доводилось использовать её, и то, обычно, всё обходилось зонами в форме прямоугольника. Но это был не тот самый случай. Задачей было повесить ссылки на отдельные регионы изображения, которым выступала карта страны, и, к сожалению, ни о каких канвасах или svg не могло быть и речи. Только html только хардкор! Итак, задача поставлена, гугл активизирован, можно и начинать. Так как зона выделения у меня должна была быть многоугольной, значение атрибута shape, тега area, мы указываем как poly - полигональная область. В таком режиме через запятую указываются координаты точки относительно левого верхнего угла - x,y. Точки также разделяются запятыми, что по началу при чтении такого кода вызывает недоумение. Для начала подготовим вёрстку: Body {
margin: 0;
padding: 20px;
font-family: Arial, Helvetica, sans-serif;
}
img {
border: none;
outline: none;
display: block;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.canvas {
border: 2px solid #333;
padding: 2px;
margin-bottom: 16px;
display: inline-block;
//display: inline;
//zoom:1;
}
.canvas.draw {
border-color: #3C0;
}
.canvas .inner {
position: relative;
}
.canvas .point {
width: 1px;
height: 1px;
background-color: #fff;
border: 1px solid #000;
overflow: hidden;
position: absolute;
}
.bar {
margin-bottom: 16px;
}
.info {
background-color: #FCFCFC;
border: 1px dotted #CCC;
font-size: 12px;
font-style: italic;
padding: 8px;
word-wrap: break-word;
}
Var addPoint = function(e){
var e = _.getEvent(e),
offset = _.getOffset(nodes["canvas"]),
x = e.clientX + _.getDocScrollLeft() - offset,
y = e.clientY + _.getDocScrollTop() - offset,
node = nodes["canvas"].appendChild(_.node("div", {"class":"point"}));
node.style.top = y-1+"px";
node.style.left = x-1+"px";
points.push({"x" : x, "y" : y, "node" : node});
e.preventDefault && e.preventDefault();
return false;
};
Var renderInfo = function(){
var text;
_.clearNode(nodes["info"]);
nodes["info"].appendChild(_.node("span", ""));
};
Карта изображений (Image Map)
позволяет привязывать ссылки к фрагментам
изображения. Щелкая мышью на отдельных частях изображения, пользователь может
переходить по той или иной ссылке на разные Web-страницы. Карта изображения определяется парным тегом
.
HTML-документ может содержать несколько карт изображения, поэтому каждой карте должно быть присвоено уникальное имя,
которое определяется атрибутом name
. Карта изображения состоит из участков изображения и соответствующих им ссылок.
Описывает участок изображения и ставит ему в соответствие ссылку одиночный тег
. Координаты по умолчанию измеряются в пикселях. Начало отсчета координат – это верхний левый угол экрана, т.е. Если две описанных области накладываются друг на друга, то используется ссылка, принадлежащая первой из них.
Эту особенность можно использовать в ситуации, когда пользователь щелкает мышью на точке, которая не принадлежит
ни одной из областей карты, определив последнюю область карты как прямоугольник шириной и высотой во всю картинку. Чтобы использовать изображение, как карту, в тег При кликах на различные области данного изображения меняется цвет соответствующего текста.Поддержка браузерами
Тег
Opera
IExplorer
Edge
Да
Да
Да
Да
Да
Да
Пример использования
img/primer-kartu-izobrazheniy-1.jpg
">
и карты
Атрибуты тега
(я думаю Вам не стоит напоминать о том что тег
имеет обязательный атрибут src
который указывает путь к той или иной картинке
)
usemap="#panel"
>
shape
- форма области рисунка которая будет служить ссылкой. Может иметь одно из трёх значений:
coords
- координаты формы
Прямоугольная область
usemap="#panel">
Полигон (многоугольник).
Окружность
Доводим до ума..
width="300" height="100" border="0" alt="Панель управления" title="Панель управления">
Пересечение областей
"Не область"
Карта на сервере.
):
ismap
- изображение является навигационной картой на сервере.
говорит браузеру о том, что к данному изображению на сервере, ну там где Вы выложили или собираетесь выложить свой сайт (читаем статью: ), есть навигационная карта. И теперь, когда посетитель (клиент) кликнет по какой либо области рисунка с таким атрибутом, браузер запомнит координаты этого клика и отправит их на сервер, где специальная программка обработает эти данные и перенаправит пользователя на тот адрес который указан в карте на сервере, в соответствии с полученными от браузера клиента координатами точки.
всегда должен быть выше самой карты То есть писать вот так:
Теория
Начнём пожалуй с теории, куда ж без неё. Карта изображения содержит в себе два тега: map
- контейнер карты и area
- зона выделения. Карта не ограничена одной зоной и может содержать неограниченное их количество. Тег area
кроме стандартных атрибутов имеет и свои собственные:
Чтобы подключить карту к изображению, указываем тегу map
атрибут name
с произвольным именем, а на изображения вешаем тег usemap
, значение которому указываем в формате "#имя"
.
Пишем Paint
Меня не тешила перспектива фотошопом находить координаты каждой точки, переписывать вручную цифры с окошка Info, а инструменты, которые попадались в гугле, были слишком монструозны. Было принято решения на коленке написать свой небольшой скрипт, который бы позволял расставлять точки просто кликая по нужной зоне на изображении, и выводил бы готовый код.
В #bar будут вставляться кнопки для управления «пеинтом».
В #info будет выводится сгенерированный html код.
В javascript"е всё достаточно просто. В процессе написания я использовал свою боевую библиотечку, так что не удивляйтесь нестандартным функциям. Для начала повесим событие mousedown на #canvas, в котором будет рендериться точка на изображении и записываться её координаты.
Затем напишем функцию, которая будет генерировать html код нашей карты.
Обрамим всё в класс, немного вспомогательных функций, вот и всё. Надеюсь кому-то будет полезна сея тулза.Атрибуты тега
Примеры различных форм областей карты изображений
необходимо ввести дополнительный атрибут usemap
,
определяющий имя карты изображения. Перед этим именем ставится знак "#".
Пример использования Image Map
Рекомендуем
Удаляем «гугловские» приложения Xiaomi как удалить приложения google
