путешествия и прочее
.photos
Почти месяц назад я по приглашению компании Яндекс ездил в небольшой блог-тур, чтобы посмотреть, как же создаются панорамы для сервиса Яндекс.Карты. Все эти съемки панорам организованы в рамках проекта съемок заповедников России, который Яндекс реализует совместно с компанией Ford. Так что относительно скоро мы сможем побывать в заповедных местах вместе с Яндекс.Картами, посмотреть панорамы и полюбоваться видами уникальных мест. Ведь далеко не факт, что это получится сделать воочию. Вообще я знаю как создавать круговые (трехмерные) панорамы, поэтому технической стороной вопроса совсем не интересовался
Но это не важно, прошу приступить к просмотру фотографий.Фото 1
Фото 2. Небольшую группу журналистов и блогеров собрали перед отелем Мариотт. Нам компанию составляли две прекрасные девушки из компании Яндекс Элина и Оля, Вадик dadson Мельников, Антон nepokolebim , один журналист из Русского Репортера и два из Новосибирска.
Фото 3. До смотровой Култука дорога хоть не скучная, но особо о ней рассказывать нечего. Считается одной из самой опасной дорогой России. Из-за того, что большие перепады высот и сильно виляет, то практически ежедневно случаются аварии и сход фур с трассы. При снегопадах трасса практически всегда перекрывается.
Фото 4. Панорамы для Яндекс.Карт снимает компания подрядчик Neq4. Пока мы стояли любовались видами Южного Байкала, как раз подъехали эти ребята.
Фото 5. Вот так выглядит машина для съемки панорам.
Фото 6. Ребята уже целую неделю ездили по просторам нашей области и снимали панорамы. Вообще компания Neq4 разработала свою систему съемки уличных панорам SMO3. Более подробно о ней можно почитать на сайте http://smo3.neq4.ru/
Фото 7. Потом же мы направились в Слюдянку, чтобы пересесть на кораблик и отправиться на КБЖД.
Фото 8. Там, где не может проехать машина, берется штатив с панорамной головой и вручную, по-классически, снимаются панорамы.
Фото 9. Вадик dadson и я psy_factor селфимся на носу кораблика =)
А вот нас поймал в этот момент фотограф АиФ. =)
Фото 10. Красота вокруг!
Фото 13. Бескрайний Байкал.
Фото 15. Кругобайкальская железная дорога славится тем, что прорублена в отвесных скалах. Раньше была участком Транссибирской магистрали, но после постройки Иркутской ГЭС стала тупиковой веткой и туристической достопримечательностью.
Фото 16. КБЖД является архитектурно-ландшафтным заповедником, где на относительно небольшом участке побережья Байкала сконцентрировано огромное количество инженерных сооружений, многие из которых не только уникальны, но и чрезвычайно живописны.
Фото 18. Железнодорожный путь по берегу Байкала был построен за 2 года 3 месяца и сдан в эксплуатацию почти на год раньше намеченного срока (чему в значительной степени способствовало начало военных действий на Дальнем Востоке).
Фото 19. Кто желает более подробно ознакомиться с информацией про КБЖД, может почитать на сайте http://www.krugobaikalka.ru
Фото 20. Пока мы плыли до КБЖД, представители компании Neq4 рассказали нам, что и КБЖД они уже всю отсняли, установив систему съемки панорам на ЖД поезд. Говорили, что это был очень интересный первый опыт съемки с ЖД поезда. Так что осенью можно будет уже виртуально гулять по КБЖД в Яндекс.Картах.
Фото 21. Потом нас ждал ужин. Угощения бурятской кухни — позы (буузы) и сагудай. Ммммм, пальчики оближешь =)
Фото 22. Практически никто из гостей раньше не ел позы. Многие почему-то называют их большими пельменями или большими мантами. Но общего между пельменями и мантами не так много, как кажется. Позы едят по-своему, сначала надо откусить кусочек теста и насладиться тем бульоном, который внутри позы. Ну а потом можно приправить позу и дальше ее кушать. Только те люди, которые живут в нашем регионе и побывали у нас в гостях, и отведав поз, могут понять сакральный смысл фразы «Горячие бурятские позы» =)))
Фото 24. Небольшая прогулка до ближайшего туннеля.
Фото 27. Селфи на фоне Байкала.
Фото 29. И снова в путь. В обратный путь.
Фото 30. Пока плыли обратно до Култука, нам устроили аттракцион «покорми чайку».
Фото 32. Чайки любят покушать =)
Фото 34. Весь путь сопровождался беседами.
Фото 37. Автобус нас уже ждал у пристани.
Фото 38. Ну и вообще, перед тем как поехать обратно, надо было помочить ножки. Я в очередной раз безуспешно пытался уговорить Вадика искупаться.
Фото 42. Ну вот и все, пора домой. Спасибо всем за компанию!
Фото 43. Ну а перед тем как отправиться в Иркутск, все кто пожелал закупились рыбкой. Я себе взял парочку хвостов омуля холодного копчения, для того, чтобы вечером умять их дома под пивко.
Вот так прошел этот чудесный день в компании прекрасных людей.
ru-travel.livejournal.com
HTML Теги изображения
| Тег | Описание |
|---|---|
| <img> | Определяет изображение |
| <map> | Определяет карту изображений |
| <area> | Определяет кликабельную область внутри карты изображений |
| <picture> | Определяет контейнер для нескольких ресурсов изображений |
Для ознакомления с полным списком всех доступных HTML тегов посетите HTML Справочник тегов на нашем сайте W3Schools на русском.
Вопросы для самоконтроля
- Что такое карта изображений на веб-странице?
- Для чего нужны карты изображений на HTML-странице?
- Какой тег определяет карту изображений?
- С помощью какого тега определяются кликабельные области на изображении?
- Какой атрибут нужно добавить к изображению, чтобы установить взаимосвязь между изображением и картой изображений?
- Какой тег определяет карту изображений на стороне клиента?
- С помощью какого атрибута карта изображений связывается с изображением?
- Какой тег определяет кликабельную область внутри карты изображений?
- Какое значение определяет прямоугольную кликабельную область на изображении?
- Какое значение определяет круговую кликабельную область на изображении?
- Какое значение определяет полигональную кликабельную область на изображении?
- Какое значение делает кликабельным всё изображение?
- Какой атрибут используется для выполнения JavaScript-функции onclick при нажатии на кликабельную область изображения?
- К какому элементу необходимо добавить событие click для выполнения JavaScript-функции onclick?
❮ Prev
Next ❯
Возможности панорам на Яндекс Картах
Яндекс Панорамы – служба, основанная на расширении возможностей Яндекс Карт. Она позволяет посмотреть панорамы улиц городов России и некоторых стран-соседок, в том числе, Беларуси, Армении, Казахстана. Интересно, что Турция и Непал тоже включены в список стран, которые есть в сервисе.
Панорамы – это изображения улиц в 3Д, а также изображения интерьеров зданий и вид городов с высоты птичьего полета. Качество этих картинок и есть главный плюс панорам. Их снимают на профессиональные фотокамеры исключительно в хорошую погоду (весной, летом и осенью). Некоторые панорамы сняты зимой, но их мало.
Сервис не так давно сделал панорамы интерактивными: в десктопной версии Яндекс Карт, а также при использовании в мобильном браузере теперь можно построить маршрут в панорамах. Есть на них и метки организаций, где указан не только адрес, но и рейтинг.
Съемку специалисты Яндекса ведут сразу на несколько зеркальных фотоаппаратов с широкоугольным объективом. Причем снимают не видео, а именно фото в хорошем качестве, которое потом склеивается в панораму – это делает специальное программное обеспечение в автоматическом режиме. Но если открыть готовую панораму, не будет понятно, с помощью фото или видео она сделана.
Панорама Яндекс Карт в 2023 году – это фото с точными координатами локации съемки, потому что изображения привязываются к картам. Только GPS данных недостаточно: система может запаздывать, учитывается и скорость. Съемку проводят на скорости 60 км/ч, окончательное точное расположение объектов вычисляется с учетом этих данных.
Яндекс панорамы помогают актуализировать карты – если ориентироваться по последним, там могут быть неточности (например, переулок успели закрыть блоком и сквозной проезд исключен, но на карте пока этой информации нет).
Пример использования
Давайте рассмотрим пример в котором при клике по определённой фигуре на одном рисунке происходит переход на разные веб-страницы, которые описывают эти фигуры (ссылки на Википедию):
<!DOCTYPE html> <html> <head> <title>Пример использование тега <map></title> </head> <body> <p>Выбери фигуру:</p> <img src = "map.png" usemap = "#figuri" alt = "Доступны 4 фигуры для выбора" > <map name = "figuri" > <area shape = "rect" coords = "25,25,125,125" href = "red.html" alt = "Красный квадрат" > <area shape = "circle" coords = "200,75,50" href = "green.html" alt = "Зелёный круг." > <area shape = "poly" coords = "325,25,262,125,388,125" href = "blue.html" alt = "Голубой треугольник" > <area shape = "poly" coords = "450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60" href = "yellow.html" alt = "Желтая звезда" > </map> </body> </html>
И так по порядку, что мы сделали в этом примере:
Разместили изображение (тег ), которое мы в последствии будем использовать при составлении изображении-карты. В атрибуте usemap необходимо обязательно указать имя изображения-карты, которое мы будем использовать в элементе (необходимо обязательно перед именем указать решетку).
Размещаем изображение-карту (тег ), задаем единственный и обязательный атрибут элемента name (имя)
Обратите внимание, что в отличие от тега мы задаем имя без решетки, в остальном они должны совпадать.
Размещаем четыре тега , которые определяют интерактивные области в изображении-карте:
Первой мы задаем прямоугольную область (атрибут shape со значением «rect» ), она соответствует нашему первому изображению (первые два значения соответствуют верхнему левому углу, следующие два значения определяют правый верхний и нижний угол).
Второй указываем круглую область (атрибут shape со значением «circle» ), она соответствует нашему второму изображению (первое значение соответствует координатам по оси x, а второе по оси y, третее определяет радиус).
Что касается третей и четвертой фигуры, то они составлены по принципу многоугольной области (атрибут shape со значением «poly» ). Вы определяете необходимое количество точек на изображении, высчитываете координаты этих точек (графический редактор) и указываете в таком порядке, чтобы браузер их мог соединить одной линией
На примере треугольника (третий рисунок): первая точка (координаты x и y вершины), вторая точка (координаты x и y левого нижнего угла) и третяя точка (координаты x и y правого нижнего угла).
Обращаю Ваше внимание на то, что если у тега используется атрибут href, который определяет гиперссылку на площади, то необходимо обязательно указывать атрибут alt (альтернативный текст для области). В HTML5, если у элемента указан глобальный атрибут id, то он должен иметь то же значение, что и атрибут name
В HTML5, если у элемента <map> указан глобальный атрибут id, то он должен иметь то же значение, что и атрибут name.
Результат нашего примера в браузере (кликабельно) и на изображении:
Рис. 49 Пример построения изображения-карты в HTML.
Как сделать карту изображения в HTML
Чтобы создать карту изображения в HTML, вставьте вот такой каркас:
<map> <area> <area> <area> </map>
○ тег map
Тег <map></map> — это главный контейнер для создания карты изображения, внутри которого содержатся другие теги, такие как <area> .Закрывающий тег обязательный.
* атрибуты тега map
○ название картыОбязательно карте нужно дать имя и для этого используют атрибут «name»:
<map name="имя_карты">
○ тег area
Тег <area> — этот тег предназначен для указания геометрической области со ссылкой.
* атрибуты тега area
○ как определить форму области
Чтобы определить форму области (прямоугольник, круг, многоугольник) используют для тега <area> атрибут «shape» с такими значениями:
- rect — Прямоугольник. Пример: shape=»rect»;
- circle — Круг. Пример: shape=»circle»;
- poly — Многоугольник. Пример: shape=»poly»
Пример:
<area shape="rect">
○ как указать расположение геометрической формы
Чтобы указать расположение геометрической формы (прямоугольником, кругом, многоугольником) используют для тега <area> атрибут «coords».
В атрибуте «coords» и задаются все параметры размещения геометрической фигуры по такой схеме:
Прямоугольная область
coords="x1,y1,x2,y2"
Обратите внимание на вертикальную ось «y» и горизонтальную ось «x». Вот по этим осям и задаются параметры
Круглая область
coords="x,y,R"
Многоугольная область
coords="x1,y1,x2,y2,x3,y3,x4,y4,x5,y5"
Альтернативные варианты
Не всегда есть острая необходимость использовать карты-изображения, поэтому
следует обратить внимание на то, что существуют и другие возможные варианты
выполнения поставленной задачи
Использование FLash
Во flash-роликах можно создавать разные области ссылок, используя возможности
векторной графики. Благодаря широким возможностям, на Flash можно создавать
потрясающие меню и средства навигации
Но тут тоже требуется осторожность, чтобы
не потерять за деревьями леса
Разрезание изображений
Это одно из популярных средств в дизайне. Одно изображение в этом случае разрезается
с помощью специальных программ на фрагменты, которые окончательно сводятся вместе,
создавая иллюзию цельной картинки. Хотя области разрезания могут быть только
прямоугольные, в большинстве случаев этого вполне достаточно для создания ссылок.
Для каждого фрагмента можно выбрать наиболее подходящий графический формат,
в котором он будет сохранен, параметры оптимизации, добавить альтернативный
текст. Тогда даже при отключенном показе картинок, будут хорошо видны границы
областей и замещающий изображение текст.
HTML Учебник
HTML ДОМHTML ВведениеHTML Редактор кодаHTML ОсновыHTML ЭлементыHTML АтрибутыHTML ЗаголовкиHTML ПараграфыHTML СтилиHTML ФорматированиеHTML ЦитатыHTML КомментарийHTML Цвет
Цвета
RGB
HEX
HSL
HTML с CSSHTML Ссылки
Ссылки
Ссылки цветные
Ссылки закладки
HTML Изображения
Изображение
Изображение карта
Изображение фон
Элемент картинки
HTML ИконкаHTML Таблицы
HTML Таблицы
Границы таблицы
Размеры таблицы
Заголовки таблицы
Заполнение и интервал
Диапазон столбцов и строк
Моделирование таблицы
Оформление столбцов
HTML Списки
Списки
Неупорядоченный список
Упорядоченный список
Описанные списки
HTML БлокиHTML КлассыHTML ИдентификаторыHTML ФреймыHTML с JavaScriptHTML Путь к файлуHTML Мета тегиHTML МакетHTML Адаптивный дизайнHTML Компьютерный кодHTML СемантикаHTML СинтаксисHTML СущностьHTML СимволыHTML ЭмодзиHTML КодировкаHTML URL КодировкаHTML в XHTML
Клиентские карты-изображения, теги и
Клиентские карты-изображения, наоборот, располагаются полностью на компьютере
пользователя и строятся с использованием элементов «map» и «area».
Элемент «map» формируется парным
тегом <map>
(от англ. map – карта). Он связывается с картой-изображением через свой атрибут
name. Значение данного атрибута должно совпадать со значением атрибута usemap
(знак решетки при этом нужно опускать) соответствующего элемента «img», выступающего в роли клиентской
карты-изображения. Кроме того, элемент «map» является контейнером для хранения элементов
«area», каждый из которых определяет активную область карты-изображения и превращает их в гиперссылки. Формируется
элемент «area» при помощи одиночного тега <area>
(от англ. area – область, регион), т.е. является пустым
элементом (см. пример №3).
<!DOCTYPE html> <html> <head> <!-- Привыкаем задавать служебные элементы --> <meta charset="utf-8"> <base href="http://localhost/test/"> <title>Клиентская карта-изображение</title> </head> <body> Это изображение – клиентская графическая карта. <br> <!-- Привязываем к изображению карту map_3 (не забываем про знак решетки) --> <img src="images/html_images/example_4_5a.png" alt="map_3" usemap="#map_3"> <map name="map_3"> <!-- Указываем активные области карты --> <area href="page_1.html" shape="circle" coords="70,75,50"> <!-- Эта ссылка откроется в новом окне --> <area href="page_2.html" target="_blank" shape="poly" coords="130,125, 150,125, 140,25, 130,125"> <area href="page_3.html" shape="rect" coords="170,125, 240,25"> </map> <p> Кликните по нужной фигуре, чтобы перейти <br> на страницу ее описания. </p> </body> </html>
Пример №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″.
Внешне результат отображения страниц, содержащих одно и то же изображение, но используемое в одном случае, как серверная карта-изображение, а в другом,
как клиентская карта, будет одинаков. Результат использования также будет выглядеть для пользователя практически одинаково. Тогда возникает вопрос,
зачем применять два вида карт? Все очень просто и зависит от ситуации. Если изображение небольшое, например, графическое меню, то конечно же
используется клиентская карта-изображение, поскольку изображение быстро загружается на компьютер пользователя, и отсутствует необходимость каждый
раз при нажатии на активную зону посылать запрос на сервер, тем самым дополнительно загружая его и заставляя ждать ответа. Однако, если карта очень
большая, например, представляет спутниковый снимок города, и при выборе объектов на этом снимке должна загружаться отдельная страница с описанием и
фото данного объекта, то загружать ее на компьютер пользователя становится проблематично, т.к. размеры таких карт могут исчисляться мегабайтами одних
только координат.
В конце добавим, что карта может быть поделена на активные зоны произвольным образом, но могут оставаться и непокрытые места. При клике по таким
неактивным областям ничего происходить не будет.
Прямоугольная область
Вы уже знаете, что если вам нужна форма прямоугольника, значит нужно прописать в атрибуте shape значениеrect
<map> <area shape="rect"> </map>
Теперь переходим к координатам.
Точка отсчета начинается с левого верхнего угла картинки, координаты которого (0;0)
Порядок записи координат для атрибута coords будет таким:
<area shape="rect" coords="x1,y1,x2,y2">
Значит, нужно указать координаты рабочей области у прямоугольника верхний-левый и нижний-правый угол.
Для примера с прямоугольником №1 возьмите такие координаты:
x1=25, y1=36, x2=114, y2=98
Вот так будет выглядеть код:
<map> <area shape="rect" coords="25,36,114,98"> </map>
Дальше нужно указать путь(ссылку) для выбранной области. Как сделать ссылку в HTML, вы уже знаете.
<map> <area href="https://bloggood.ru" shape="rect" coords="25,36,114,98"> </map>
Все пока что хорошо. Но нам теперь нужно связать картинку с картой.
Для этого придумайте любое название для карты, например, «karta1» и пропишите его в теге <map> через атрибут name.
<map name="karta1"> <area href="https://bloggood.ru" shape="rect" coords="25,36,114,98"> </map>
Теперь свяжем карту с картинкой. Для этого используем атрибут usemap.
Пример написания:usemap=»#имя_карты»
В нашем случае это будет выглядеть следующим образом:
<img src="kartinka.gif" usemap="#karta1">
Теперь соберем все вместе и пропишем еще координаты к другому прямоугольнику №2 с такими данными (x1=153, y1=11, x2=219, y2=127).
Пример:
<html> <head> <title> Карта изображения в HTML (навигационные карты). Урок №11</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <img src="kartinka.gif" usemap="#karta1"> <map name="karta1"> <area href="https://bloggood.ru/" shape="rect" coords="25,36,114,98"> <area href=" https://bloggood.ru/avtor/" shape="rect" coords="153,11,219,127"> </map> </body> </html>
Теперь смотрите на результат. Нажмите на прямоугольник №1 и на прямоугольник №2
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
- Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл и изображение) в любую папку на вашем жестком диске:
- Используя полученные знания составьте следующую изображение-карту:
Практическое задание № 26.
Нюанс: для чистоты практического задания предлагаю в качестве первой точки использовать вершину звезды и двигаться по часовой стрелке. В качестве значения атрибута href я указал # в этом случае она выступает как заглушка (вы остаетесь на той же странице), вы можете сделать переход на любую страницу.
Подсказка: чтобы получить координаты изображения воспользуйтесь редактором изображений, даже самый простой редактор, например, Paint, отображет координаты курсора. Выпишите координаты на листок или в отдельный файл и внесите значения на страницу.
Если у Вас возникнут трудности с выполнением задания, то проинспектируйте код страницы, открыв пример в отдельном окне и внимательно его изучите.
Теги разметки страницы
Видео и аудио контент
Image Maps
The HTML tag defines an image map. An image map is an image with
clickable areas. The areas are defined with one or more tags.
Try to click on the computer, phone, or the cup of coffee in the image below:
Example
Here is the HTML source code for the image map above:
<img src=»workplace.jpg» alt=»Workplace» usemap=»#workmap»><map name=»workmap»> <area shape=»rect» coords=»34,44,270,350″
alt=»Computer» href=»computer.htm»> <area shape=»rect» coords=»290,172,333,250″
alt=»Phone» href=»phone.htm»> <area shape=»circle» coords=»337,300,44″
alt=»Coffee» href=»coffee.htm»></map>
Атрибуты тега AREA
shape
Определяет форму активной области. Форма может быть в виде окружности (circle),
прямоугольника (rect), полигона (poly).
alt
Добавляет альтернативный текст для каждой области. Служит лишь комментарием
для ссылки, поскольку на экран не выводится.
coords
Задает координаты активной области. Координаты отсчитываются в пикселах от
левого верхнего угла изображения, которому соответствует значение 0,0. Первое
число является координатой по горизонтали, второе — по вертикали. Список
координат зависит от формы области.
Для окружности задаются три числа — координаты центра круга и радиус.
Для прямоугольника — координаты левого верхнего и правого нижнего
угла.
Для полигона задаются координаты его вершин (рис. 2).
Рис. 2. Координатные точки для полигона
href
Определяет адрес ссылки для области. Правила записи такие же, как и для тега
<a>.
Карты-изображения позволяют создавать ссылки на разные области одного изображения.
Использование этого подхода наглядней, чем обычные текстовые ссылки и позволяет
применять всего один графический файл для организации ссылок. Однако не нужно
считать, что карты-изображения следует включать везде, где требуются графические
ссылки. Прежде всего, следует оценить все доводы за и против, а также просмотреть
альтернативные варианты.
Клиентский вариант карты-изображения
Для указания того, что изображение является картой, используется
атрибут usemap тега <img>.
В качестве значения указывается ссылка на описание конфигурации
карты.
Рис. 1. Закладки являются ссылками, созданными с помощью карты
Чтобы сделать ссылки на закладки, показанные на рис. 1, следует использовать
следующий код (пример 1).
Пример 1. Использование карты-изображения
Для указания браузеру, что изображение является картой, применяется атрибут usemap. Он является ссылкой
на описание конфигурации карты, которая задается тегом <map>.
Значение атрибута name данного тега
должно соответствовать имени в usemap.
Для задания активой области, являющейся ссылкой на HTML-документ,
используется тег <area>.
Кликабельные области
Потом добавьте кликабельные области.
Область, на которую можно кликнуть, определяется с помощью элемента .
Форма кликабельной области
Вы должны определить форму области, на которую можно кликнуть, и вы можете выбрать одно из этих значений:
- — определяет прямоугольную область
- — определяет круговую область
- — определяет полигональную область
- — определяет всю область
Вы также должны определить некоторые координаты, чтобы можно было разместить область, на которую можно нажать на изображении.
Shape=»rect»
Координаты для состоят попарно, одна для оси x, и одна для оси y.
Т.о., координаты расположены на 34 пикселей от левого поля и 44 пикселей от верхнего:
Координаты расположены в 270 пикселей от левого поля и 350 пикселей от верхнего:
Теперь у нас есть достаточно данных, чтобы создать прямоугольную область, на которую можно нажать:
Пример
<area shape=»rect» coords=»34, 44, 270, 350″ href=»computer.html»>
Это область, которая становится интерактивной и направляет пользователя на страницу «computer.html»:
Shape=»circle»
Чтобы добавить область круга, сначала найдите координаты центра окружности:
Затем укажите радиус окружности:
pixels
Теперь у вас есть достаточно данных для создания интерактивной круговой области:
Пример
<area shape=»circle» coords=»337, 300, 44″ href=»coffee.html»>
Это область, которая становится интерактивной и направляет пользователя на страницу «coffee.html»:
Shape=»poly»
содержит несколько координатных точек, создает фигуру, образованную прямыми линиями (многоугольник).
Это можно использовать для создания любой фигуры.
Как, возможно, форма круассана!
Как мы можем сделать так, чтобы круассан на картинке ниже стал ссылкой, которую можно кликнуть?
Мы должны найти координаты x и y для всех краев круассана:
Координаты подаются попарно, одна для оси x и одна для оси y:
Пример
<area shape=»poly» coords=»140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147″ href=»croissant.html»>
Это область, которая становится интерактивной и направляет пользователя на страницу «croissant.html»:
