Image Map. Карты изображений


Содержание
Работа над прямоугольным объектом В окошке Dimension (размеры) можете полюбоваться на уже готовые координаты! Но и это не все! Нам же с вами лень код писать, пускай программа сама напишет, раз уж мы сюда залезли. Выполняем File | Preview in (Файл | Предварительный Просмотр В) и в открывающемся диалоге выбираем браузер для просмотра, нажимаем ОК и о чудо! Открывается браузер, в котором наша картинка, вся информация о ней, а также весь написанный код! Наводим мышкой на книжку, убеждаемся, что появляется всплывающая подсказка «все о книгах», нажимаем, убеждаемся, что ссылка работает и все! Нам остается только сдуть нужный нам код и поместить его на свою страничку. Точно также обрабатываем оставшиеся ссылки – круглую шкатулку и многоугольную пепельницу. Только в этих случаях выбираем соответственно Circle Image Map Tool – для круглой ссылки, либо Polygon Image Map Tool – для многоугольной ссылки. Вот порядок действий для круглой ссылки-пепельницы: Установите указатель мыши слева от окружности. Нажмите и удерживайте левую кнопку мыши. Не отпуская левую кнопку мыши, перемещайте мышь к правому нижнему концу ок-ружности. Отпустите левую кнопку мыши. Вокруг шкатулки появится замкнутая кривая А вот для многоугольника-пепельницы: Щелкните мышкой около любого угла пепельницы с внешней стороны. За мышкой потянулась прямая. Щелкните мышкой около следующего угла пепельницы. Прямая зафиксировалась в этой точке и дальше тянется за мышкой. Обойдите с мышкой вокруг пепельницы, фиксируя нажимами все выступающие точки. Закончите свой путь над первой точкой, появится значок – крестик с кружочком, подтверждающая, что ломаная замкнулась, щелкните по первой точке, линия окра-сится в красный цвет. На этом я заканчиваю тему Карты изображений. Ну, и думаю, нам давно пора заняться звуком. Так что загремим под фанфары. Image Map Pro v5.1.6 — интерактивная карта изображений WordPress Image Map Pro – это нечто большее, чем просто плагин карты изображений. Поместить места на изображение и добавить текст, – это то, где функциональность обычных плагинов заканчивается. Но плагин Image Map Pro поставляется со своим собственным многофункциональным веб-приложением, поэтому вы можете быстро и легко создавать наиболее полный набор пользовательских карт изображений, контактов и пользовательских форм и сразу же экспортировать их на свой сайт. Пользовательский интерфейс всем знаком – Drag & Drop конструктор карты с самостоятельными пояснительными шагами, значками и инструментами формы в вашем распоряжении. Однако, чтобы быть уверенными, что пользователь со всем справится, разработчики также включили в программу супер-пошаговое видео-руководство. Image Map Pro for WordPress — SVG Map Builder Карты-изображения Карты-изображения позволяют создавать ссылки произвольной формы для разных областей одного изображения. Вначале рассмотрим плюсы и минусы данной технологии. Плюсы Карты-изображения позволяют задать любую форму области ссылки, что особенно пригодится для указания географического района. Поэтому, карты-изображения применяются наиболее часто в географической тематике. С одной картинкой удобнее работать — не приходится заботиться о состыковке отдельных фрагментов при разрезании, и рисунок легко можно поместить в нужное место. Минусы При сложной форме области ссылки увеличивается объём кода HTML. Контур аппроксимируется набором прямых отрезков, для каждой точки такого отрезка следует задать две координаты, а общее количество таких точек может быть достаточно велико. Соответственно, увеличивается сложность задания координат. Вручную их указывать не удобно, поэтому приходится пользоваться специальными программами, которые визуально показывают области и позволяют их редактировать. При смене изображения, например, при увеличении масштаба придётся заново задавать координаты всех областей ссылок. К картам-изображениям нельзя применять разные эффекты, которые доступны при разрезании одного рисунка на фрагменты: эффект перекатывания, частичная анимация, индивидуальная оптимизация картинок для их быстрой загрузки. Нет чётко выделенных границ ссылок. Поэтому эти границы приходится выделять разными средствами непосредственно на изображении. Если рисунок не загрузился по каким-либо причинам, то разобраться в наборе ссылок становится весьма проблематично. С позиции удобства пользователей карты-изображения имеют только одно преимущество — включение ссылок разнообразной формы. Это добавляет наглядность в представлении информации — мы не ограничены прямоугольной формой ссылки и можем использовать ссылки сложной конфигурации для своих целей. Карты-изображения реализуются в двух различных вариантах — серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждёт ответа с нужной информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения. В клиентском варианте карта располагается в том же HTML-документе, что и ссылка на изображение. Для указания того, что изображение является картой, применяется атрибут usemap элемента . В качестве значения используется указатель на описание конфигурации карты, которая устанавливается с помощью элемента . Значение атрибута name у должно соответствовать имени в usemap . При этом значение usemap в начинается с символа решётки (пример 1). Пример 1. Создание карты-изображения shape — определяет форму активной области. Форма может быть в виде окружности (circle), прямоугольника (rect), полигона (poly). alt — добавляет альтернативный текст для каждой области. Служит лишь комментарием для ссылки, поскольку на экран не выводится. Обязательный атрибут при наличии href . title — выводит всплывающую подсказку при наведении курсора на область. href — задаёт адрес документа, на который следует перейти, по своему действию аналогичен подобному атрибуту элемента . coords — задаёт координаты активной области. Координаты отсчитываются в пикселях от левого верхнего угла изображения, которому соответствует значение 0, 0. Первое число является координатой по горизонтали, второе — по вертикали. Список координат зависит от формы области. Для окружности задаются три числа — координаты центра круга и радиус. Для прямоугольника — координаты левого верхнего и правого нижнего угла. Для полигона задаются координаты его вершин, как показано на рис. 1. Построение изображения-карты В этой статье мы с Вами рассмотрим как составить клиентскую изображение-карту, при клике на определенную область которой, мы сможем перейти по определенной ссылке. Составление изображений-карт можно редко встретить на сайтах, так как этот процесс довольно-таки трудоемкий, но если вы хотите удивить ваших посетителей необычной формой для ссылок и у вас есть в распоряжении свободное время для самообразования, то эта статья для вас. Атрибут name элемента является обязательным, он связан с атрибутом usemap элемента (создает связь между изображением и картой). Значение атрибута Определение default Весь регион. rect Прямоугольная область (x1,y1,x2,y2). circle Круглая область (x,y,r- радиус). poly Многоугольную область (x1,y1,x2,y2. xn,yn). Рис. 48 Создание активной области с использованием системы координат. Пример использования Давайте рассмотрим пример в котором при клике по определённой фигуре на одном рисунке происходит переход на разные веб-страницы, которые описывают эти фигуры (ссылки на Википедию): И так по порядку, что мы сделали в этом примере: В HTML5, если у элемента указан глобальный атрибут >name . Результат нашего примера в браузере (кликабельно) и на изображении: Вопросы и задачи по теме Перед тем как перейти к изучению следующей темы пройдите практическое задание: Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл и изображение) в любую папку на вашем жестком диске: Используя полученные знания составьте следующую изображение-карту: Практическое задание № 26. Нюанс: для чистоты практического задания предлагаю в качестве первой точки использовать вершину звезды и двигаться по часовой стрелке. В качестве значения атрибута href я указал # в этом случае она выступает как заглушка (вы остаетесь на той же странице), вы можете сделать переход на любую страницу. Подсказка: чтобы получить координаты изображения воспользуйтесь редактором изображений, даже самый простой редактор, например, Paint, отображет координаты курсора. Выпишите координаты на листок или в отдельный файл и внесите значения на страницу. Если у Вас возникнут трудности с выполнением задания, то проинспектируйте код страницы, открыв пример в отдельном окне и внимательно его изучите. Image Map. Карты изображений Create HTML image maps. Choose an image from your computer and highlight areas to create the HTML required for your image. Generated HTML Output Definition and usage The tag is used to define a client-side image-map. An image-map is an image with clickable areas. The required name attribute of the element is associated with the ‘s usemap attribute and creates a relationship between the image and the map. The element contains a number of elements, that defines the clickable areas in the image map. About This tool makes it extremely easy to generate HTML based image maps. All work is done in the browser, so your image is never sent to a server. Плагины для майнкрафт Ты находишься в каталоге «Плагины / Plugins»! В данном разделе вы найдете русифицированные плагины, а также приватные плагины всех версий для вашего сервера майнкрафт. Скачать плагин ImageOnMap | Изображения в Майнкрафте | Картинки на Картах Описание плагина ImageOnMap: Информация для настройки конфига: ### ImageOnMap файл Конфигурации(конфиг) # Язык плагина. Если оставить пусто, будет стоять «язык системы». # Доступны: en_US (English/Английская, по-умолчанию), а также fr_FR(Français/Французская). lang: # Соглашение на коллекцию анонимной статистики плагина и использование. # true — Если соглашаетесь на сбор информации/статистики с вашего сервер и публикации её на сайте. # false — Если вы не желаете, чтобы плагин собирал информацию/статистику с вашего сервер, а также публиковал её. # Статистика будет опубликована и увидеть её можно будет здесь: http://mcstats.org/plugin/ImageOnMap collect-dаta: true # Картинки на картах используют ID Карт Minecraft и их существует только 32 767 штук. # Вы можете создать лимит максимального создания карт игроку или всему серверу. # Если выставить 0, это будет бесконечно. map-global-limit: 0 map-player-limit: 0 Скриншоты: Права и команды: Описание /tomap Эта команда, выполняет функцию Создания картинки на Карте, всё что вам нужно это, выбрать картинку которую вы хотите добавить на сервер, узнать её «url» и вписать команду (/tomap (и саму ссылку)). /maps imageonmap.list, imageonmap.get, imageonmap.rename и imageonmap.delete /maptool imageonmap.new для команды: /maptool new; imageonmap.list для таких команд как: /maptool list и /maptool explore; imageonmap.get для команды: /maptool get; imageonmap.delete для команды: /maptool delete; imageonmap.administrative для команды: /maptool migrate . Команда «/maptool new «, такая же, как и «/tomap «. Создает картинку на карте. Команда «/maptool list», покажет вам все созданные вами Карты. Команда «/maptool get», выдаст вам выбранную вами карту, которую вы уже создавали, к примеру: Вы создавали картинку на карте, а сейчас у вас её нету так вы можете её себе выдать и не бояться потерять. Команда «/maptool delete», эта команда поможет вам удалить карту из списка созданных карт. Image Map. Карты изображений Всем доброго времени суток. Сегодня мы рассмотрим карты изображений благодаря которым мы можем сделать нашу картинку динамичной. Итак, поехали! У нас есть, картинка: На картинке мы видим элементы проигрывателя. Допустим мы хотим чтобы каждый элемент проигрывателя на картинке выполнял свои функции. Здесь нам и пригодится карта изображения. За создание карты изображения отвечают два тега map и area. map — тег map служит контейнером для тега area area — тег area определяет активные области изображения которыми мы можем манипулировать. Сделаем на картинке кнопку play активной: Теперь разбираемся. Для того чтобы связать нашу картинку с контейнером map мы должны задать картинке атрибут usemap и в качестве значения указать имя тега map. Заметьте что значение атрибута usemap начинается с решетки. Далее после того как связали изображение с картой(map), мы определяем активную область с помощью одинарного тега area. В нем указываем следующие обязательные атрибуты: — shape — указывает форму области и может принимать следующие значения (default — весь регион, rect — прямоугольная область, circle — круглая область , poly — многоугольная область) Я выбрал многоугольную область(poly) — coords — данный атрибут задает координаты активной области на изображении. Кто знаком с svg я думаю не составит труда разобраться. Кто же не знаком поясню: У нас задана многоугольная область изображения(poly), поэтому я использую такой формат представления координат coords=»153,153,257,151,263,263,168,280″ где каждая пара чисел это координата x и y определенной точки. Отрисовка идет по ходу перемещения от точки к точке. В результате у нас получается четыре точки соединенные прямыми линиями между собой. Помимо обязательных атрибутов мы указали атрибут title для подсказки и onclick для обработки события клика. если мы кликнем на области изображения кнопки play у нас выполниться следующий код: И воспроизведется содержимое тега audio. Заиграет музыка! С другими элементами проигрывателя действуем по аналогии. Для более удобного отслеживания координат точек на картинке вы можете в консоли браузера выполнить следующий код: В результате в консоли у вас будут выводится координаты курсора вашей мыши относительно картинки и вам будем удобнее находит x и y определенных точек. Помимо обработки событий мы можем в активных областях переходить по ссылкам через атрибут href. Здесь также можно пользоваться атрибутами target, accesskey, alt. Карты сайта хороши тем что мы можем создавать ссылки и активные области любой формы буквально по контурам изображений. Тем самым создавая на сайте динамические картинки. На этом дорогие друзья у меня на сегодня все. Надеюсь данная статья была для вас интересна и познавательна. Пример использования Image Map Рис. 2 При кликах на различные области данного изображения меняется цвет области 4. Средства создания карт-изображений Для автоматизации процесса разметки областей на изображении существует ряд программ, большинство из которых очень похожи друг на друга. Они позволяют создавать и изменять файлы конфигурации, работая непосредственно с изображением на экране. Эти программы позволяют сохранять создаваемый конфигурационный файл либо в буфере обмена Windows, либо в файле на диске. Все программы позволяют размечать на изображении области трех основных типов — rect, circle и poly. Некоторые редакторы поддерживают тип default. Пожалуй, единственным критерием выбора программы редактирования карт-изображений является удобство ее использования, так как по функциональным свойствам все программы очень близки. Программа MapEdit Одной из наиболее простых и известных программ редактирования конфигурационных файлов является утилита MapEdit, разработанная Томасом Бутеллом (Thomas Boutell). Эта программа существует уже на протяжении нескольких лет и реализована для различных платформ. В частности, имеются версии для Windows 3.x и Windows 95/98/NT. (http://www.boutell.cora/mapedit/) Программа MapEdit является условно-бесплатной (shareware) и имеет 30-дневный оценочный период, по истечении которого необходима ее регистрация. Программа невелика по размеру — дистрибутив занимает около 300 Кб, и при этом обладает практически всеми необходимыми возможностями. Программа позволяет редактировать конфигурационные файлы как для серверного варианта (в форматах NCSA и CERN), так и для клиентского. Рассмотрим вкратце основные возможности данной программы. После запуска MapEdit выдается основное окно, содержащее заставку (рис. 3) и меню. Имеется возможность редактирования существующих файлов как для серверного, так и для клиентского вариантов карт-изображений. Есть возможность также создания нового файла конфигурации, однако это касается только серверного варианта. Для клиентского варианта необходимо наличие исходного HTML-файла со ссылками на встроенные изображения, которые будут использоваться в качестве опорных для карт-изображений. Пусть нам необходимо создать новый конфигурационный файл для серверного варианта карт-изображений. Выберем пункт Open/Create Map из меню File. Появится диалоговое окно (рис. 4), в котором следует задать имя создаваемого файла конфигурации (например, Blazons.map), указать существующий файл с изображением и формат создаваемого файла (NCSA или CERN). Файл изображения может иметь формат GIF, JPG или PNG. Рис. 4. Диалоговое окно Open/Create Map для создания конфигурационного файла Примечание Многие из программ интерпретации файлов конфигурации для серверного варианта требуют, чтобы файл имел расширение MAP. Можно рекомендовать всегда придерживаться этого правила. Программа загрузит выбранный файл с изображением, на котором можно будет произвести разметку активных областей . После разметки любой из областей следует задать адрес ссылки, соответствующий данной области, а также комментирующую информацию. Можно задать адрес ссылки для области по умолчанию, который будет peaлизовываться для части области изображения, не входящей ни в одну из активных областей. После разметки областей можно визуально проконтролировать или изменить созданные активные области, воспользовавшись пунктом Test меню Edit. Последним шагом работы является сохранение результатов в виде файла конфигурации (пункт Save меню File). Можно также использовать пункт Save As, в котором задать требуемый формат сохранения файла (рис. 5). Рис. 5. Диалоговое окно Default URL для задания URL-адреса для области по умолчанию Рис. 6. Диалоговое окно команды Save As Программа Map THIS! Еще одной утилитой создания и редактирования конфигурационных файлов карт-изображений является программа Map THIS!, информацию о которой можно получить по адресу: Работа с данной программой по идеологии схожа с программой MapEdit. Основой работы с программой является визуальное конструирование активных областей с дальнейшим сохранением результатов в файле в одном из выбранных форматов. Редактор поддерживает оба формата серверного варианта карт-изображений (NCSA и CERN) и клиентский вариант. Изображения могут загружаться из файлов в форматах GIF и JPG. Программа CrossEye Программа-редактор конфигурационных файлов CrossEye, созданная известной австралийской компанией Sausage Software. Эта программа будет встречена с радостью поклонниками популярного HTML-редактора HotDog, поскольку она создана той же компанией и имеет весьма привлекательный, выполненный с юмором, интерфейс. Информация о пакете CrossEye может быть получена по адресу: Отличительными особенностями программы является довольно большой размер дистрибутива (около 2,5 Мб), а также небольшой период времени (14 дней), в течение которого можно ее эксплуатировать в режиме оценки. Большой размер программ характерен для всего программного обеспечения, создаваемого компанией Sausage Software, что, видимо, обусловлено выбором инструментария, используемым для разработки (Visual Basic). В конечном итоге выбор редактора для создания карт-изображений остается за пользователем.
  • Как сделать карту ссылок изображений
  • Атрибуты тега 1. Атрибут shape=»тип_объекта» — задает тип объекта. Может принимать следующие значения: circle — круг; rect — прямоугольник; poly — многоугольник; 2. Атрибут coords=»значения_координат» — определяет геометрическое расположение объекта и его размеры. Точкой отчета изображения является верхний левый угол. Т.е. если вы указали отступ 10 по высоте, то это означает 10 пикселей вниз. В зависимости от типа объекта нужно задавать значения координат в разных форматах. Все значения указывается в пикселях (пометку px писать не нужно). Для типа circle: coords = (x,y,r) , где x,y координаты центра круга, а r — радиус круга; Для типа rect: coords = (x1,y1,x2,y2) , где x1,y1 координаты левой верхней точки прямоугольника, x2,y2 — координаты нижний правой точки прямоугольника; Для типа poly: coords = (x1,y1,x2,y2. xn,yn) , последовательно указываются координаты x,y каждой точки многоугольника; _blank — открывает страницу в новом окне _self — загружает страницу в текущее окно _parent — загружает страницу во фрейм-родитель _top — отменяет все фреймы и загружает страницу в полном окне браузера 5. Атрибут title=»подсказка» — выводит всплывающую подсказку. можно также сделать более красивую всплывающую подсказку: как сделать красивую всплывающую подсказку для ссылки » 6. Атрибут nohref — делает область неактивной. Используется при перекрытии объектов. Используется довольно редко, но иногда это может стать незаменимым решением. Например можно сделать маленький круг внутри большого круга неактивным. Обязательно область nohref должна идти первой. Использование карты ссылок на изображении имеет место лишь в узком круг задач. Например, при создании какой-то схемы или карты проезда. В других случаях применение карты при создании меню и других графических элементов выглядит необоснованной. High Star Уроки веб-мастеру Как самому с нуля сделать сайт? Здесь даны основы сайтостроения, которых еще никто не отменял. Как пользоваться такими программами, как PhotoShop, ImageReady и другими. Полезные советы вебмастерам. Карты изображений Adobe Photoshop Мы уже с вами умеем делать ссылки. Ссылками могут быть и просто какой-то текст, при нажатии на который мы можем попасть на другую страничку. Ссылкой может быть и рисунок и анимированый gif. Это все мы знаем и вроде что тут еще рассусоливать? Однако вспомните, как порою сложно разместить эту ссылку в нужном месте страницы. Например, мы хотим разместить на главной странице нашего сайта несколько изображений-ссылок, причем в определенном месте! До этого урока у нас был бы всего лишь один выход для этого — сделать таблицу, и в какой-то ячейке поместить наш рисунок. Ну, а если мы захотим сделать какой-то рисунок, определенные области которого служат ссылками на другие странички. Это может быть и карта мира, где при нажатии на любую страну открывалась бы страничка, рассказывающая именно об этой стране. А может это рисунок скелета, где при нажатии на какой-то косточки открывался бы рассказ об этой косточке. А может это картинка с дикими зверями, при нажатии на любого зверюгу открывался бы рассказ об этом животном. Короче, вы уже наверняка догадались, что все это можно сделать с помощью Image Map (Карты Изображений). Вообще бывают два типа таких карт. Один из них — серверный. Смысл тут вот в чем. Пользователь щелкает мышкой по карте-изображению, программа просмотра запоминает координаты вашего щелчка и посылает данные серверу. Сервер запускает программу GGI, которая смотрит, а не попадают ли эти координаты в ту область, по нажатию на которой нужно послать человека туда-то и туда? Если это так, то она дает ответ браузеру послать или не послать кого-то по такому-то адресу. Да, это не смешно. Я вижу, как у вас опускаются уголки рта, тяжко склоняется голова на грудь и валятся обессиленно руки с клавы. Но. Проснись и пой мой читатель! Потому что я не буду объяснять всю эту галиматью. Потому что есть еще другой тип! клиентский. Вот этим клиентским типом мы и займемся. Не обещаю, что уложимся в один урок. Так что запаситесь терпеньем! Для этого урока я подготовила фотографию, на которой расположены вещи различной формы – шкатулка (круг), книжка (прямоугольник) и пепельница (многоугольник). Ради наглядности я их даже обвела: И сделаем их кнопками – ссылками. Предположим, при нажатии на книжку мы попадаем на страничку book.html, при нажатии на кнопку-шкатулку попадаем прямиком на страничку shkatulka.html, ну и при нажатии на пепельницу попадаем на страничку, рассказывающую о вреде курения – nosmok.html. Скажу вам сразу, я специально взяла такие формы. Дело в том, что можно описать Shape (Формы) только трех видов: RECT (Прямоугольник), CIRCLE (Круг) и POLY (Многоугольник). Каждая форма описывается координатами X и Y, отсчет начинается с левого верхнего угла. Для RECT (Прямоугольника) достаточно всего двух точек координат — координаты X,Y верхнего левого угла и координаты правого нижнего угла. Для CIRCLE (окружности) хватает координаты центра окружности X,Y и величины радиуса R, а вот для сложной фигуры нужно задать координаты всех точек замкнутой ломаной. Если сложная фигура имеет плавные изгибы, ничего страшного! Можно ее обвести ломаными кривыми. Только хочу заметить, чем меньше будет этих ломаных, тем быстрее ваше творение загрузится. Так что особо не усердствуйте и не стремитесь к бесконечности. Открыв в Adobe Photoshop панель Info, кто не знает, тот нажимает Window | Info (Окно | Инфо) и, елозя мышкой от начала координат к нужным точкам, запоминаю сколько у меня там этих пикселов получилось. Если вам это непонятно, не переживайте, ниже мы это проделаем в нашей программе Image Ready. Итак, вот эти точки и вот эти координаты: Координаты каждой точки Приступим к самому главному. Начнем прописывать эти точки и все остальное в тегах. Пишем: Думаю тут нечего сложного для восприятия нет. Я загрузила свою картинку myris.jpg, указала, ширину 500 и высоту 355. А дальше присвоила имя этой карты, назвав ее mykarta. Обратите внимание, что перед именем я поставила решетку #. В следующей строчке указываю, что это рисунок не просто рисунок, а карта MAP и что карта эта привязана к mykarta. И тут уже решетка не нужна. Едем дальше. Сначала определяем область квадратной кнопки: Объясняю: определяемая область AREA SHAPE – Rect (Прямоугольник), значит для нее берем координаты левого верхнего угла (X=39 Y=33) и правого нижнего угла (X=173, y=259). TITLE — всплывающая подсказка, HREF=». « — сценарий, который выполняется при нажатии кнопки. В принципе, я могла написать просто какой-то адрес, например такой HREF=»http://www.dikarka.ru”, и тогда при нажатии этой кнопки вы попали бы на мою страничку. Но я — человек скромный, а потому решила ограничиться приветствием. Можно было бы еще заставить кнопку проигрывать музыку. но это мы еще с вами не проходили, так что обойдемся без музыкального туша. Далее опишем область воздействия на круглую кнопку-шкатулку. Как видим, радиус этого круга равен R=50 пикселам, а координаты центра окружности: X=274 и Y=112. Определяемой областью тут является Circle (Круг), а потому вы даже и без меня догадаетесь как нужно написать. Едем дальше. У нас осталась незадействованной третья кнопка-пепельница. К каждой точке мы у же определили координаты, так что нам осталось только указать тип AREA SHAPE обозначить как Poly (Многоугольник) и выставить по очереди координаты. Ну, и на этой стрелке моя скромность закончилась и я написала, что при нажатии на эту ссыл-ку вы попадете на мою начальную страничку сайта www.dikarka.ru Вот как это выглядит: Ну, и закончи все это закрывающимся тегом А вот и полный код всех трех кнопок нашего изображения, его можно поместить в том месте вашей странички, где у вас эта карта будет находиться: Теперь, когда мы нажмем на любую из трех картинок, мы перенесемся по нужному адресу. И это здорово, не так ли? Кажется, я рассказала все, о чем собиралась рассказать. На следующем уроке мы сделаем что-то подобное, но уже в программе Image Ready. А пока поработайте с этим уроком. Лично мне это дело понравилось. Карты изображений в Image Ready Опять возвращаемся в программу Image Ready. Надеюсь, вы уже подготовили рисунок, который мы украсим ссылками на другие странички? Работать будем с тем же изображением, как и в предыдущем уроке. Вызываем панель Image Map (Карта Изображений) — Window | Image Map (Окно | Карта Изображений). На вертикальной панели инструментов выбираем Rectangle Image Map Tool Удерживая мышку нажатой в левом верхнем углу нашего первого предмета – прямоугольной книжки, перетаскиваем ее к нижнему правому углу книжки. Теперь можно отпустить мышку и немного передохнуть. Мы увидим, что вокруг мышки образовалась замкнутая кривая с точками по углам и по центру каждой прямой, которые можно перемещать, чтобы подредактировать положение. Теперь можно перейти ко вкладке Image Map и заполнить окошечки. Я, например, решила Name (Имя) оставить по умолчанию — ImageMap_01, URL – адрес странички, которая загрузится после нажатия книжки-ссылки, Target – выбираем окно, в которое загрузится наш документ (я выбрала _blank – в новое окно) и, наконец, в окошке Alt – всплывающая подсказка, я написала “все о книгах” Работа над прямоугольным объектом В окошке Dimension (размеры) можете полюбоваться на уже готовые координаты! Но и это не все! Нам же с вами лень код писать, пускай программа сама напишет, раз уж мы сюда залезли. Выполняем File | Preview in (Файл | Предварительный Просмотр В) и в открывающемся диалоге выбираем браузер для просмотра, нажимаем ОК и о чудо! Открывается браузер, в котором наша картинка, вся информация о ней, а также весь написанный код! Наводим мышкой на книжку, убеждаемся, что появляется всплывающая подсказка «все о книгах», нажимаем, убеждаемся, что ссылка работает и все! Нам остается только сдуть нужный нам код и поместить его на свою страничку. Точно также обрабатываем оставшиеся ссылки – круглую шкатулку и многоугольную пепельницу. Только в этих случаях выбираем соответственно Circle Image Map Tool – для круглой ссылки, либо Polygon Image Map Tool – для многоугольной ссылки. Вот порядок действий для круглой ссылки-пепельницы: Установите указатель мыши слева от окружности. Нажмите и удерживайте левую кнопку мыши. Не отпуская левую кнопку мыши, перемещайте мышь к правому нижнему концу ок-ружности. Отпустите левую кнопку мыши. Вокруг шкатулки появится замкнутая кривая А вот для многоугольника-пепельницы: Щелкните мышкой около любого угла пепельницы с внешней стороны. За мышкой потянулась прямая. Щелкните мышкой около следующего угла пепельницы. Прямая зафиксировалась в этой точке и дальше тянется за мышкой. Обойдите с мышкой вокруг пепельницы, фиксируя нажимами все выступающие точки. Закончите свой путь над первой точкой, появится значок – крестик с кружочком, подтверждающая, что ломаная замкнулась, щелкните по первой точке, линия окра-сится в красный цвет. На этом я заканчиваю тему Карты изображений. Ну, и думаю, нам давно пора заняться звуком. Так что загремим под фанфары. Image Map Pro v5.1.6 — интерактивная карта изображений WordPress Image Map Pro – это нечто большее, чем просто плагин карты изображений. Поместить места на изображение и добавить текст, – это то, где функциональность обычных плагинов заканчивается. Но плагин Image Map Pro поставляется со своим собственным многофункциональным веб-приложением, поэтому вы можете быстро и легко создавать наиболее полный набор пользовательских карт изображений, контактов и пользовательских форм и сразу же экспортировать их на свой сайт. Пользовательский интерфейс всем знаком – Drag & Drop конструктор карты с самостоятельными пояснительными шагами, значками и инструментами формы в вашем распоряжении. Однако, чтобы быть уверенными, что пользователь со всем справится, разработчики также включили в программу супер-пошаговое видео-руководство. Image Map Pro for WordPress — SVG Map Builder Карты-изображения Карты-изображения позволяют создавать ссылки произвольной формы для разных областей одного изображения. Вначале рассмотрим плюсы и минусы данной технологии. Плюсы Карты-изображения позволяют задать любую форму области ссылки, что особенно пригодится для указания географического района. Поэтому, карты-изображения применяются наиболее часто в географической тематике. С одной картинкой удобнее работать — не приходится заботиться о состыковке отдельных фрагментов при разрезании, и рисунок легко можно поместить в нужное место. Минусы При сложной форме области ссылки увеличивается объём кода HTML. Контур аппроксимируется набором прямых отрезков, для каждой точки такого отрезка следует задать две координаты, а общее количество таких точек может быть достаточно велико. Соответственно, увеличивается сложность задания координат. Вручную их указывать не удобно, поэтому приходится пользоваться специальными программами, которые визуально показывают области и позволяют их редактировать. При смене изображения, например, при увеличении масштаба придётся заново задавать координаты всех областей ссылок. К картам-изображениям нельзя применять разные эффекты, которые доступны при разрезании одного рисунка на фрагменты: эффект перекатывания, частичная анимация, индивидуальная оптимизация картинок для их быстрой загрузки. Нет чётко выделенных границ ссылок. Поэтому эти границы приходится выделять разными средствами непосредственно на изображении. Если рисунок не загрузился по каким-либо причинам, то разобраться в наборе ссылок становится весьма проблематично. С позиции удобства пользователей карты-изображения имеют только одно преимущество — включение ссылок разнообразной формы. Это добавляет наглядность в представлении информации — мы не ограничены прямоугольной формой ссылки и можем использовать ссылки сложной конфигурации для своих целей. Карты-изображения реализуются в двух различных вариантах — серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждёт ответа с нужной информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения. В клиентском варианте карта располагается в том же HTML-документе, что и ссылка на изображение. Для указания того, что изображение является картой, применяется атрибут usemap элемента . В качестве значения используется указатель на описание конфигурации карты, которая устанавливается с помощью элемента . Значение атрибута name у должно соответствовать имени в usemap . При этом значение usemap в начинается с символа решётки (пример 1). Пример 1. Создание карты-изображения shape — определяет форму активной области. Форма может быть в виде окружности (circle), прямоугольника (rect), полигона (poly). alt — добавляет альтернативный текст для каждой области. Служит лишь комментарием для ссылки, поскольку на экран не выводится. Обязательный атрибут при наличии href . title — выводит всплывающую подсказку при наведении курсора на область. href — задаёт адрес документа, на который следует перейти, по своему действию аналогичен подобному атрибуту элемента . coords — задаёт координаты активной области. Координаты отсчитываются в пикселях от левого верхнего угла изображения, которому соответствует значение 0, 0. Первое число является координатой по горизонтали, второе — по вертикали. Список координат зависит от формы области. Для окружности задаются три числа — координаты центра круга и радиус. Для прямоугольника — координаты левого верхнего и правого нижнего угла. Для полигона задаются координаты его вершин, как показано на рис. 1. Построение изображения-карты В этой статье мы с Вами рассмотрим как составить клиентскую изображение-карту, при клике на определенную область которой, мы сможем перейти по определенной ссылке. Составление изображений-карт можно редко встретить на сайтах, так как этот процесс довольно-таки трудоемкий, но если вы хотите удивить ваших посетителей необычной формой для ссылок и у вас есть в распоряжении свободное время для самообразования, то эта статья для вас. Атрибут name элемента является обязательным, он связан с атрибутом usemap элемента (создает связь между изображением и картой). Значение атрибута Определение default Весь регион. rect Прямоугольная область (x1,y1,x2,y2). circle Круглая область (x,y,r- радиус). poly Многоугольную область (x1,y1,x2,y2. xn,yn). Рис. 48 Создание активной области с использованием системы координат. Пример использования Давайте рассмотрим пример в котором при клике по определённой фигуре на одном рисунке происходит переход на разные веб-страницы, которые описывают эти фигуры (ссылки на Википедию): И так по порядку, что мы сделали в этом примере: В HTML5, если у элемента указан глобальный атрибут >name . Результат нашего примера в браузере (кликабельно) и на изображении: Вопросы и задачи по теме Перед тем как перейти к изучению следующей темы пройдите практическое задание: Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл и изображение) в любую папку на вашем жестком диске: Используя полученные знания составьте следующую изображение-карту: Практическое задание № 26. Нюанс: для чистоты практического задания предлагаю в качестве первой точки использовать вершину звезды и двигаться по часовой стрелке. В качестве значения атрибута href я указал # в этом случае она выступает как заглушка (вы остаетесь на той же странице), вы можете сделать переход на любую страницу. Подсказка: чтобы получить координаты изображения воспользуйтесь редактором изображений, даже самый простой редактор, например, Paint, отображет координаты курсора. Выпишите координаты на листок или в отдельный файл и внесите значения на страницу. Если у Вас возникнут трудности с выполнением задания, то проинспектируйте код страницы, открыв пример в отдельном окне и внимательно его изучите. Image Map. Карты изображений Create HTML image maps. Choose an image from your computer and highlight areas to create the HTML required for your image. Generated HTML Output Definition and usage The tag is used to define a client-side image-map. An image-map is an image with clickable areas. The required name attribute of the element is associated with the ‘s usemap attribute and creates a relationship between the image and the map. The element contains a number of elements, that defines the clickable areas in the image map. About This tool makes it extremely easy to generate HTML based image maps. All work is done in the browser, so your image is never sent to a server. Плагины для майнкрафт Ты находишься в каталоге «Плагины / Plugins»! В данном разделе вы найдете русифицированные плагины, а также приватные плагины всех версий для вашего сервера майнкрафт. Скачать плагин ImageOnMap | Изображения в Майнкрафте | Картинки на Картах Описание плагина ImageOnMap: Информация для настройки конфига: ### ImageOnMap файл Конфигурации(конфиг) # Язык плагина. Если оставить пусто, будет стоять «язык системы». # Доступны: en_US (English/Английская, по-умолчанию), а также fr_FR(Français/Французская). lang: # Соглашение на коллекцию анонимной статистики плагина и использование. # true — Если соглашаетесь на сбор информации/статистики с вашего сервер и публикации её на сайте. # false — Если вы не желаете, чтобы плагин собирал информацию/статистику с вашего сервер, а также публиковал её. # Статистика будет опубликована и увидеть её можно будет здесь: http://mcstats.org/plugin/ImageOnMap collect-dаta: true # Картинки на картах используют ID Карт Minecraft и их существует только 32 767 штук. # Вы можете создать лимит максимального создания карт игроку или всему серверу. # Если выставить 0, это будет бесконечно. map-global-limit: 0 map-player-limit: 0 Скриншоты: Права и команды: Описание /tomap Эта команда, выполняет функцию Создания картинки на Карте, всё что вам нужно это, выбрать картинку которую вы хотите добавить на сервер, узнать её «url» и вписать команду (/tomap (и саму ссылку)). /maps imageonmap.list, imageonmap.get, imageonmap.rename и imageonmap.delete /maptool imageonmap.new для команды: /maptool new; imageonmap.list для таких команд как: /maptool list и /maptool explore; imageonmap.get для команды: /maptool get; imageonmap.delete для команды: /maptool delete; imageonmap.administrative для команды: /maptool migrate . Команда «/maptool new «, такая же, как и «/tomap «. Создает картинку на карте. Команда «/maptool list», покажет вам все созданные вами Карты. Команда «/maptool get», выдаст вам выбранную вами карту, которую вы уже создавали, к примеру: Вы создавали картинку на карте, а сейчас у вас её нету так вы можете её себе выдать и не бояться потерять. Команда «/maptool delete», эта команда поможет вам удалить карту из списка созданных карт. Image Map. Карты изображений Всем доброго времени суток. Сегодня мы рассмотрим карты изображений благодаря которым мы можем сделать нашу картинку динамичной. Итак, поехали! У нас есть, картинка: На картинке мы видим элементы проигрывателя. Допустим мы хотим чтобы каждый элемент проигрывателя на картинке выполнял свои функции. Здесь нам и пригодится карта изображения. За создание карты изображения отвечают два тега map и area. map — тег map служит контейнером для тега area area — тег area определяет активные области изображения которыми мы можем манипулировать. Сделаем на картинке кнопку play активной: Теперь разбираемся. Для того чтобы связать нашу картинку с контейнером map мы должны задать картинке атрибут usemap и в качестве значения указать имя тега map. Заметьте что значение атрибута usemap начинается с решетки. Далее после того как связали изображение с картой(map), мы определяем активную область с помощью одинарного тега area. В нем указываем следующие обязательные атрибуты: — shape — указывает форму области и может принимать следующие значения (default — весь регион, rect — прямоугольная область, circle — круглая область , poly — многоугольная область) Я выбрал многоугольную область(poly) — coords — данный атрибут задает координаты активной области на изображении. Кто знаком с svg я думаю не составит труда разобраться. Кто же не знаком поясню: У нас задана многоугольная область изображения(poly), поэтому я использую такой формат представления координат coords=»153,153,257,151,263,263,168,280″ где каждая пара чисел это координата x и y определенной точки. Отрисовка идет по ходу перемещения от точки к точке. В результате у нас получается четыре точки соединенные прямыми линиями между собой. Помимо обязательных атрибутов мы указали атрибут title для подсказки и onclick для обработки события клика. если мы кликнем на области изображения кнопки play у нас выполниться следующий код: И воспроизведется содержимое тега audio. Заиграет музыка! С другими элементами проигрывателя действуем по аналогии. Для более удобного отслеживания координат точек на картинке вы можете в консоли браузера выполнить следующий код: В результате в консоли у вас будут выводится координаты курсора вашей мыши относительно картинки и вам будем удобнее находит x и y определенных точек. Помимо обработки событий мы можем в активных областях переходить по ссылкам через атрибут href. Здесь также можно пользоваться атрибутами target, accesskey, alt. Карты сайта хороши тем что мы можем создавать ссылки и активные области любой формы буквально по контурам изображений. Тем самым создавая на сайте динамические картинки. На этом дорогие друзья у меня на сегодня все. Надеюсь данная статья была для вас интересна и познавательна. Пример использования Image Map Рис. 2 При кликах на различные области данного изображения меняется цвет области 4. Средства создания карт-изображений Для автоматизации процесса разметки областей на изображении существует ряд программ, большинство из которых очень похожи друг на друга. Они позволяют создавать и изменять файлы конфигурации, работая непосредственно с изображением на экране. Эти программы позволяют сохранять создаваемый конфигурационный файл либо в буфере обмена Windows, либо в файле на диске. Все программы позволяют размечать на изображении области трех основных типов — rect, circle и poly. Некоторые редакторы поддерживают тип default. Пожалуй, единственным критерием выбора программы редактирования карт-изображений является удобство ее использования, так как по функциональным свойствам все программы очень близки. Программа MapEdit Одной из наиболее простых и известных программ редактирования конфигурационных файлов является утилита MapEdit, разработанная Томасом Бутеллом (Thomas Boutell). Эта программа существует уже на протяжении нескольких лет и реализована для различных платформ. В частности, имеются версии для Windows 3.x и Windows 95/98/NT. (http://www.boutell.cora/mapedit/) Программа MapEdit является условно-бесплатной (shareware) и имеет 30-дневный оценочный период, по истечении которого необходима ее регистрация. Программа невелика по размеру — дистрибутив занимает около 300 Кб, и при этом обладает практически всеми необходимыми возможностями. Программа позволяет редактировать конфигурационные файлы как для серверного варианта (в форматах NCSA и CERN), так и для клиентского. Рассмотрим вкратце основные возможности данной программы. После запуска MapEdit выдается основное окно, содержащее заставку (рис. 3) и меню. Имеется возможность редактирования существующих файлов как для серверного, так и для клиентского вариантов карт-изображений. Есть возможность также создания нового файла конфигурации, однако это касается только серверного варианта. Для клиентского варианта необходимо наличие исходного HTML-файла со ссылками на встроенные изображения, которые будут использоваться в качестве опорных для карт-изображений. Пусть нам необходимо создать новый конфигурационный файл для серверного варианта карт-изображений. Выберем пункт Open/Create Map из меню File. Появится диалоговое окно (рис. 4), в котором следует задать имя создаваемого файла конфигурации (например, Blazons.map), указать существующий файл с изображением и формат создаваемого файла (NCSA или CERN). Файл изображения может иметь формат GIF, JPG или PNG. Рис. 4. Диалоговое окно Open/Create Map для создания конфигурационного файла Примечание Многие из программ интерпретации файлов конфигурации для серверного варианта требуют, чтобы файл имел расширение MAP. Можно рекомендовать всегда придерживаться этого правила. Программа загрузит выбранный файл с изображением, на котором можно будет произвести разметку активных областей . После разметки любой из областей следует задать адрес ссылки, соответствующий данной области, а также комментирующую информацию. Можно задать адрес ссылки для области по умолчанию, который будет peaлизовываться для части области изображения, не входящей ни в одну из активных областей. После разметки областей можно визуально проконтролировать или изменить созданные активные области, воспользовавшись пунктом Test меню Edit. Последним шагом работы является сохранение результатов в виде файла конфигурации (пункт Save меню File). Можно также использовать пункт Save As, в котором задать требуемый формат сохранения файла (рис. 5). Рис. 5. Диалоговое окно Default URL для задания URL-адреса для области по умолчанию Рис. 6. Диалоговое окно команды Save As Программа Map THIS! Еще одной утилитой создания и редактирования конфигурационных файлов карт-изображений является программа Map THIS!, информацию о которой можно получить по адресу: Работа с данной программой по идеологии схожа с программой MapEdit. Основой работы с программой является визуальное конструирование активных областей с дальнейшим сохранением результатов в файле в одном из выбранных форматов. Редактор поддерживает оба формата серверного варианта карт-изображений (NCSA и CERN) и клиентский вариант. Изображения могут загружаться из файлов в форматах GIF и JPG. Программа CrossEye Программа-редактор конфигурационных файлов CrossEye, созданная известной австралийской компанией Sausage Software. Эта программа будет встречена с радостью поклонниками популярного HTML-редактора HotDog, поскольку она создана той же компанией и имеет весьма привлекательный, выполненный с юмором, интерфейс. Информация о пакете CrossEye может быть получена по адресу: Отличительными особенностями программы является довольно большой размер дистрибутива (около 2,5 Мб), а также небольшой период времени (14 дней), в течение которого можно ее эксплуатировать в режиме оценки. Большой размер программ характерен для всего программного обеспечения, создаваемого компанией Sausage Software, что, видимо, обусловлено выбором инструментария, используемым для разработки (Visual Basic). В конечном итоге выбор редактора для создания карт-изображений остается за пользователем.
  • High Star
  • Уроки веб-мастеру
  • Карты изображений
  • Adobe Photoshop
  • Карты изображений в Image Ready
  • Image Map Pro v5.1.6 — интерактивная карта изображений WordPress
  • Карты-изображения
  • Плюсы
  • Минусы
  • Построение изображения-карты
  • Пример использования
  • Вопросы и задачи по теме
  • Image Map. Карты изображений
  • Generated HTML Output
  • Definition and usage
  • About
  • Плагины для майнкрафт
  • Скачать плагин ImageOnMap | Изображения в Майнкрафте | Картинки на Картах
  • Описание плагина ImageOnMap:
  • Информация для настройки конфига:
  • Скриншоты:
  • Права и команды:
  • Image Map. Карты изображений
  • Пример использования Image Map
  • Илон Маск рекомендует:  Dos fn 11h найти 1 й совпадающий файл через fcb

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

    Определение карты-изображения

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

    Илон Маск рекомендует:  Как задать цвет активной ссылки

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

    Атрибуты ismap и usemap

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

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

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

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

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

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

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

    Клиентские карты-изображения, наоборот, располагаются полностью на компьютере пользователя и строятся с использованием элементов ‘map’ и ‘area’ . Элемент ‘map’ формируется парным тегом (от англ. map – карта). Он связывается с картой-изображением через свой атрибут name . Значение данного атрибута должно совпадать со значением атрибута usemap (знак решетки при этом нужно опускать) соответствующего элемента ‘img’ , выступающего в роли клиентской карты-изображения. Кроме того, элемент ‘map’ является контейнером для хранения элементов ‘area’ , каждый из которых определяет активную область карты-изображения и превращает их в гиперссылки. Формируется элемент ‘area’ при помощи одиночного тега (от англ. area – область, регион), т.е. является пустым элементом (см. пример №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 (тег ), но с областями-ссылками. Причем таких областей можно создать очень много практически любой формы.

    Рассмотрим пример как выглядит карта изображений в html:

    При наведении курсора мышкой на области зеленого прямоугольника видно, что она является ссылкой на » #green_link » (метка выбрана для примера, можно сделать ссылку на любую страницу в интернете). У красного квадрата на » #red_link «, а у синего круга соответственно на » #blue_link «.

    Код этого примера:


    Как видно из примера код не такой уж и сложный. Разберем теги для создания карты ссылок изображения.

    1. Необходимо создать связку изображения и карты . В изображении нужно сослаться на карту с помощью атрибута usemap=»#primer1″ . А ниже нужно описать код карты.

    При создании карты ссылок атрибут usemap является обязательным для тега img.

    2. Описание карты состоит из обязательного атрибута name , с помощью которого будет осуществляться привязка к изображению.

    Области могут перекрывать друг друга. В этом случае ссылка будет вести на тот объект, что описан последним.

    Атрибуты тега

    1. Атрибут shape=»тип_объекта» — задает тип объекта. Может принимать следующие значения:

    • circle — круг;
    • rect — прямоугольник;
    • poly — многоугольник;

    2. Атрибут coords=»значения_координат» — определяет геометрическое расположение объекта и его размеры.

    Точкой отчета изображения является верхний левый угол. Т.е. если вы указали отступ 10 по высоте, то это означает 10 пикселей вниз.

    В зависимости от типа объекта нужно задавать значения координат в разных форматах. Все значения указывается в пикселях (пометку px писать не нужно).

    • Для типа circle: coords = (x,y,r) , где x,y координаты центра круга, а r — радиус круга;
    • Для типа rect: coords = (x1,y1,x2,y2) , где x1,y1 координаты левой верхней точки прямоугольника, x2,y2 — координаты нижний правой точки прямоугольника;
    • Для типа poly: coords = (x1,y1,x2,y2. xn,yn) , последовательно указываются координаты x,y каждой точки многоугольника;
    • _blank — открывает страницу в новом окне
    • _self — загружает страницу в текущее окно
    • _parent — загружает страницу во фрейм-родитель
    • _top — отменяет все фреймы и загружает страницу в полном окне браузера

    5. Атрибут title=»подсказка» — выводит всплывающую подсказку. можно также сделать более красивую всплывающую подсказку: как сделать красивую всплывающую подсказку для ссылки »

    6. Атрибут nohref — делает область неактивной. Используется при перекрытии объектов. Используется довольно редко, но иногда это может стать незаменимым решением. Например можно сделать маленький круг внутри большого круга неактивным.

    Обязательно область nohref должна идти первой.

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

    High Star

    Уроки веб-мастеру

    Как самому с нуля сделать сайт? Здесь даны основы сайтостроения, которых еще никто не отменял. Как пользоваться такими программами, как PhotoShop, ImageReady и другими. Полезные советы вебмастерам.

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

    Adobe Photoshop

    Мы уже с вами умеем делать ссылки. Ссылками могут быть и просто какой-то текст, при нажатии на который мы можем попасть на другую страничку. Ссылкой может быть и рисунок и анимированый gif. Это все мы знаем и вроде что тут еще рассусоливать? Однако вспомните, как порою сложно разместить эту ссылку в нужном месте страницы. Например, мы хотим разместить на главной странице нашего сайта несколько изображений-ссылок, причем в определенном месте! До этого урока у нас был бы всего лишь один выход для этого — сделать таблицу, и в какой-то ячейке поместить наш рисунок.


    Ну, а если мы захотим сделать какой-то рисунок, определенные области которого служат ссылками на другие странички. Это может быть и карта мира, где при нажатии на любую страну открывалась бы страничка, рассказывающая именно об этой стране. А может это рисунок скелета, где при нажатии на какой-то косточки открывался бы рассказ об этой косточке. А может это картинка с дикими зверями, при нажатии на любого зверюгу открывался бы рассказ об этом животном.

    Короче, вы уже наверняка догадались, что все это можно сделать с помощью Image Map (Карты Изображений).

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

    Да, это не смешно. Я вижу, как у вас опускаются уголки рта, тяжко склоняется голова на грудь и валятся обессиленно руки с клавы. Но. Проснись и пой мой читатель! Потому что я не буду объяснять всю эту галиматью. Потому что есть еще другой тип! клиентский. Вот этим клиентским типом мы и займемся. Не обещаю, что уложимся в один урок. Так что запаситесь терпеньем!

    Для этого урока я подготовила фотографию, на которой расположены вещи различной формы – шкатулка (круг), книжка (прямоугольник) и пепельница (многоугольник). Ради наглядности я их даже обвела:

    И сделаем их кнопками – ссылками. Предположим, при нажатии на книжку мы попадаем на страничку book.html, при нажатии на кнопку-шкатулку попадаем прямиком на страничку shkatulka.html, ну и при нажатии на пепельницу попадаем на страничку, рассказывающую о вреде курения – nosmok.html.

    Скажу вам сразу, я специально взяла такие формы. Дело в том, что можно описать Shape (Формы) только трех видов: RECT (Прямоугольник), CIRCLE (Круг) и POLY (Многоугольник).

    Каждая форма описывается координатами X и Y, отсчет начинается с левого верхнего угла. Для RECT (Прямоугольника) достаточно всего двух точек координат — координаты X,Y верхнего левого угла и координаты правого нижнего угла. Для CIRCLE (окружности) хватает координаты центра окружности X,Y и величины радиуса R, а вот для сложной фигуры нужно задать координаты всех точек замкнутой ломаной. Если сложная фигура имеет плавные изгибы, ничего страшного! Можно ее обвести ломаными кривыми. Только хочу заметить, чем меньше будет этих ломаных, тем быстрее ваше творение загрузится. Так что особо не усердствуйте и не стремитесь к бесконечности.

    Открыв в Adobe Photoshop панель Info, кто не знает, тот нажимает Window | Info (Окно | Инфо) и, елозя мышкой от начала координат к нужным точкам, запоминаю сколько у меня там этих пикселов получилось.

    Если вам это непонятно, не переживайте, ниже мы это проделаем в нашей программе Image Ready.

    Итак, вот эти точки и вот эти координаты:

    Координаты каждой точки

    Приступим к самому главному. Начнем прописывать эти точки и все остальное в тегах. Пишем:

    Думаю тут нечего сложного для восприятия нет. Я загрузила свою картинку myris.jpg, указала, ширину 500 и высоту 355. А дальше присвоила имя этой карты, назвав ее mykarta. Обратите внимание, что перед именем я поставила решетку #. В следующей строчке указываю, что это рисунок не просто рисунок, а карта MAP и что карта эта привязана к mykarta. И тут уже решетка не нужна. Едем дальше. Сначала определяем область квадратной кнопки:

    Объясняю: определяемая область AREA SHAPE – Rect (Прямоугольник), значит для нее берем координаты левого верхнего угла (X=39 Y=33) и правого нижнего угла (X=173, y=259). TITLE — всплывающая подсказка, HREF=». « — сценарий, который выполняется при нажатии кнопки. В принципе, я могла написать просто какой-то адрес, например такой HREF=»http://www.dikarka.ru”, и тогда при нажатии этой кнопки вы попали бы на мою страничку. Но я — человек скромный, а потому решила ограничиться приветствием. Можно было бы еще заставить кнопку проигрывать музыку. но это мы еще с вами не проходили, так что обойдемся без музыкального туша.

    Далее опишем область воздействия на круглую кнопку-шкатулку. Как видим, радиус этого круга равен R=50 пикселам, а координаты центра окружности: X=274 и Y=112. Определяемой областью тут является Circle (Круг), а потому вы даже и без меня догадаетесь как нужно написать.

    Едем дальше. У нас осталась незадействованной третья кнопка-пепельница. К каждой точке мы у же определили координаты, так что нам осталось только указать тип AREA SHAPE обозначить как Poly (Многоугольник) и выставить по очереди координаты. Ну, и на этой стрелке моя скромность закончилась и я написала, что при нажатии на эту ссыл-ку вы попадете на мою начальную страничку сайта www.dikarka.ru Вот как это выглядит:

    Ну, и закончи все это закрывающимся тегом

    А вот и полный код всех трех кнопок нашего изображения, его можно поместить в том месте вашей странички, где у вас эта карта будет находиться:

    Теперь, когда мы нажмем на любую из трех картинок, мы перенесемся по нужному адресу. И это здорово, не так ли? Кажется, я рассказала все, о чем собиралась рассказать. На следующем уроке мы сделаем что-то подобное, но уже в программе Image Ready. А пока поработайте с этим уроком. Лично мне это дело понравилось.

    Карты изображений в Image Ready

    Опять возвращаемся в программу Image Ready. Надеюсь, вы уже подготовили рисунок, который мы украсим ссылками на другие странички? Работать будем с тем же изображением, как и в предыдущем уроке.

    1. Вызываем панель Image Map (Карта Изображений) — Window | Image Map (Окно | Карта Изображений).
    2. На вертикальной панели инструментов выбираем Rectangle Image Map Tool
    3. Удерживая мышку нажатой в левом верхнем углу нашего первого предмета – прямоугольной книжки, перетаскиваем ее к нижнему правому углу книжки. Теперь можно отпустить мышку и немного передохнуть. Мы увидим, что вокруг мышки образовалась замкнутая кривая с точками по углам и по центру каждой прямой, которые можно перемещать, чтобы подредактировать положение.

    Теперь можно перейти ко вкладке Image Map и заполнить окошечки. Я, например, решила Name (Имя) оставить по умолчанию — ImageMap_01, URL – адрес странички, которая загрузится после нажатия книжки-ссылки, Target – выбираем окно, в которое загрузится наш документ (я выбрала _blank – в новое окно) и, наконец, в окошке Alt – всплывающая подсказка, я написала “все о книгах”


    Работа над прямоугольным объектом

    В окошке Dimension (размеры) можете полюбоваться на уже готовые координаты!

    Но и это не все! Нам же с вами лень код писать, пускай программа сама напишет, раз уж мы сюда залезли.

    1. Выполняем File | Preview in (Файл | Предварительный Просмотр В) и в открывающемся диалоге выбираем браузер для просмотра, нажимаем ОК и о чудо! Открывается браузер, в котором наша картинка, вся информация о ней, а также весь написанный код!
    2. Наводим мышкой на книжку, убеждаемся, что появляется всплывающая подсказка «все о книгах», нажимаем, убеждаемся, что ссылка работает и все! Нам остается только сдуть нужный нам код и поместить его на свою страничку.

    Точно также обрабатываем оставшиеся ссылки – круглую шкатулку и многоугольную пепельницу. Только в этих случаях выбираем соответственно Circle Image Map Tool – для круглой ссылки, либо Polygon Image Map Tool – для многоугольной ссылки. Вот порядок действий для круглой ссылки-пепельницы:

    1. Установите указатель мыши слева от окружности.
    2. Нажмите и удерживайте левую кнопку мыши.
    3. Не отпуская левую кнопку мыши, перемещайте мышь к правому нижнему концу ок-ружности.
    4. Отпустите левую кнопку мыши. Вокруг шкатулки появится замкнутая кривая

    А вот для многоугольника-пепельницы:

    1. Щелкните мышкой около любого угла пепельницы с внешней стороны. За мышкой потянулась прямая.
    2. Щелкните мышкой около следующего угла пепельницы. Прямая зафиксировалась в этой точке и дальше тянется за мышкой.
    3. Обойдите с мышкой вокруг пепельницы, фиксируя нажимами все выступающие точки.
    4. Закончите свой путь над первой точкой, появится значок – крестик с кружочком, подтверждающая, что ломаная замкнулась, щелкните по первой точке, линия окра-сится в красный цвет.

    На этом я заканчиваю тему Карты изображений. Ну, и думаю, нам давно пора заняться звуком. Так что загремим под фанфары.

    Image Map Pro v5.1.6 — интерактивная карта изображений WordPress

    Image Map Pro – это нечто большее, чем просто плагин карты изображений. Поместить места на изображение и добавить текст, – это то, где функциональность обычных плагинов заканчивается. Но плагин Image Map Pro поставляется со своим собственным многофункциональным веб-приложением, поэтому вы можете быстро и легко создавать наиболее полный набор пользовательских карт изображений, контактов и пользовательских форм и сразу же экспортировать их на свой сайт.

    Пользовательский интерфейс всем знаком – Drag & Drop конструктор карты с самостоятельными пояснительными шагами, значками и инструментами формы в вашем распоряжении. Однако, чтобы быть уверенными, что пользователь со всем справится, разработчики также включили в программу супер-пошаговое видео-руководство.

    Image Map Pro for WordPress — SVG Map Builder

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

    Карты-изображения позволяют создавать ссылки произвольной формы для разных областей одного изображения. Вначале рассмотрим плюсы и минусы данной технологии.

    Плюсы

    • Карты-изображения позволяют задать любую форму области ссылки, что особенно пригодится для указания географического района. Поэтому, карты-изображения применяются наиболее часто в географической тематике.
    • С одной картинкой удобнее работать — не приходится заботиться о состыковке отдельных фрагментов при разрезании, и рисунок легко можно поместить в нужное место.

    Минусы


    • При сложной форме области ссылки увеличивается объём кода HTML. Контур аппроксимируется набором прямых отрезков, для каждой точки такого отрезка следует задать две координаты, а общее количество таких точек может быть достаточно велико.
    • Соответственно, увеличивается сложность задания координат. Вручную их указывать не удобно, поэтому приходится пользоваться специальными программами, которые визуально показывают области и позволяют их редактировать.
    • При смене изображения, например, при увеличении масштаба придётся заново задавать координаты всех областей ссылок.
    • К картам-изображениям нельзя применять разные эффекты, которые доступны при разрезании одного рисунка на фрагменты: эффект перекатывания, частичная анимация, индивидуальная оптимизация картинок для их быстрой загрузки.
    • Нет чётко выделенных границ ссылок. Поэтому эти границы приходится выделять разными средствами непосредственно на изображении. Если рисунок не загрузился по каким-либо причинам, то разобраться в наборе ссылок становится весьма проблематично.

    С позиции удобства пользователей карты-изображения имеют только одно преимущество — включение ссылок разнообразной формы. Это добавляет наглядность в представлении информации — мы не ограничены прямоугольной формой ссылки и можем использовать ссылки сложной конфигурации для своих целей.

    Карты-изображения реализуются в двух различных вариантах — серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждёт ответа с нужной информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.

    В клиентском варианте карта располагается в том же HTML-документе, что и ссылка на изображение. Для указания того, что изображение является картой, применяется атрибут usemap элемента . В качестве значения используется указатель на описание конфигурации карты, которая устанавливается с помощью элемента . Значение атрибута name у должно соответствовать имени в usemap . При этом значение usemap в начинается с символа решётки (пример 1).

    Пример 1. Создание карты-изображения

    • shape — определяет форму активной области. Форма может быть в виде окружности (circle), прямоугольника (rect), полигона (poly).
    • alt — добавляет альтернативный текст для каждой области. Служит лишь комментарием для ссылки, поскольку на экран не выводится. Обязательный атрибут при наличии href .
    • title — выводит всплывающую подсказку при наведении курсора на область.
    • href — задаёт адрес документа, на который следует перейти, по своему действию аналогичен подобному атрибуту элемента .
    • coords — задаёт координаты активной области. Координаты отсчитываются в пикселях от левого верхнего угла изображения, которому соответствует значение 0, 0. Первое число является координатой по горизонтали, второе — по вертикали. Список координат зависит от формы области.

    Для окружности задаются три числа — координаты центра круга и радиус.

    Для прямоугольника — координаты левого верхнего и правого нижнего угла.

    Для полигона задаются координаты его вершин, как показано на рис. 1.

    Построение изображения-карты

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

    Атрибут name элемента является обязательным, он связан с атрибутом usemap элемента (создает связь между изображением и картой).

    Значение атрибута Определение
    default Весь регион.
    rect Прямоугольная область (x1,y1,x2,y2).
    circle Круглая область (x,y,r- радиус).
    poly Многоугольную область (x1,y1,x2,y2. xn,yn).

    Рис. 48 Создание активной области с использованием системы координат.

    Пример использования

    Давайте рассмотрим пример в котором при клике по определённой фигуре на одном рисунке происходит переход на разные веб-страницы, которые описывают эти фигуры (ссылки на Википедию):

    И так по порядку, что мы сделали в этом примере:

    В HTML5, если у элемента указан глобальный атрибут >name .

    Результат нашего примера в браузере (кликабельно) и на изображении:

    Вопросы и задачи по теме

    Перед тем как перейти к изучению следующей темы пройдите практическое задание:


    • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл и изображение) в любую папку на вашем жестком диске:
    • Используя полученные знания составьте следующую изображение-карту:

    Практическое задание № 26.

    Нюанс: для чистоты практического задания предлагаю в качестве первой точки использовать вершину звезды и двигаться по часовой стрелке. В качестве значения атрибута href я указал # в этом случае она выступает как заглушка (вы остаетесь на той же странице), вы можете сделать переход на любую страницу.

    Подсказка: чтобы получить координаты изображения воспользуйтесь редактором изображений, даже самый простой редактор, например, Paint, отображет координаты курсора. Выпишите координаты на листок или в отдельный файл и внесите значения на страницу.

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

    Image Map. Карты изображений

    Create HTML image maps. Choose an image from your computer and highlight areas to create the HTML required for your image.

    Generated HTML Output

    Definition and usage

    The tag is used to define a client-side image-map. An image-map is an image with clickable areas. The required name attribute of the element is associated with the ‘s usemap attribute and creates a relationship between the image and the map. The element contains a number of elements, that defines the clickable areas in the image map.

    About

    This tool makes it extremely easy to generate HTML based image maps. All work is done in the browser, so your image is never sent to a server.

    Плагины для майнкрафт

    Ты находишься в каталоге «Плагины / Plugins»!
    В данном разделе вы найдете русифицированные плагины, а также приватные плагины всех версий для вашего сервера майнкрафт.

    Скачать плагин ImageOnMap | Изображения в Майнкрафте | Картинки на Картах

    Описание плагина ImageOnMap:

    Информация для настройки конфига:

    ### ImageOnMap файл Конфигурации(конфиг)

    # Язык плагина. Если оставить пусто, будет стоять «язык системы».
    # Доступны: en_US (English/Английская, по-умолчанию), а также fr_FR(Français/Французская).
    lang:

    # Соглашение на коллекцию анонимной статистики плагина и использование.
    # true — Если соглашаетесь на сбор информации/статистики с вашего сервер и публикации её на сайте.
    # false — Если вы не желаете, чтобы плагин собирал информацию/статистику с вашего сервер, а также публиковал её.
    # Статистика будет опубликована и увидеть её можно будет здесь: http://mcstats.org/plugin/ImageOnMap
    collect-dаta: true

    # Картинки на картах используют ID Карт Minecraft и их существует только 32 767 штук.
    # Вы можете создать лимит максимального создания карт игроку или всему серверу.
    # Если выставить 0, это будет бесконечно.
    map-global-limit: 0
    map-player-limit: 0

    Скриншоты:

    Права и команды:

    Описание /tomap

    Эта команда, выполняет функцию Создания картинки на Карте, всё что вам нужно это, выбрать картинку которую вы хотите добавить на сервер, узнать её «url» и вписать команду (/tomap (и саму ссылку)). /maps

    imageonmap.list, imageonmap.get, imageonmap.rename и imageonmap.delete


    /maptool imageonmap.new для команды: /maptool new;

    imageonmap.list для таких команд как: /maptool list и /maptool explore;

    imageonmap.get для команды: /maptool get;

    imageonmap.delete для команды: /maptool delete;

    imageonmap.administrative для команды: /maptool migrate .

    Команда «/maptool new «, такая же, как и «/tomap «. Создает картинку на карте.

    Команда «/maptool list», покажет вам все созданные вами Карты.

    Команда «/maptool get», выдаст вам выбранную вами карту, которую вы уже создавали, к примеру: Вы создавали картинку на карте, а сейчас у вас её нету так вы можете её себе выдать и не бояться потерять.

    Команда «/maptool delete», эта команда поможет вам удалить карту из списка созданных карт.

    Image Map. Карты изображений

    Всем доброго времени суток. Сегодня мы рассмотрим карты изображений благодаря которым мы можем сделать нашу картинку динамичной. Итак, поехали!

    У нас есть, картинка:

    На картинке мы видим элементы проигрывателя. Допустим мы хотим чтобы каждый элемент проигрывателя на картинке выполнял свои функции. Здесь нам и пригодится карта изображения.

    За создание карты изображения отвечают два тега map и area.

    map — тег map служит контейнером для тега area

    area — тег area определяет активные области изображения которыми мы можем манипулировать.

    Сделаем на картинке кнопку play активной:

    Теперь разбираемся. Для того чтобы связать нашу картинку с контейнером map мы должны задать картинке атрибут usemap и в качестве значения указать имя тега map.

    Заметьте что значение атрибута usemap начинается с решетки. Далее после того как связали изображение с картой(map), мы определяем активную область с помощью одинарного тега area.

    В нем указываем следующие обязательные атрибуты:

    — shape — указывает форму области и может принимать следующие значения (default — весь регион, rect — прямоугольная область, circle — круглая область , poly — многоугольная область)

    Я выбрал многоугольную область(poly)

    — coords — данный атрибут задает координаты активной области на изображении. Кто знаком с svg я думаю не составит труда разобраться. Кто же не знаком поясню:

    У нас задана многоугольная область изображения(poly), поэтому я использую такой формат представления координат coords=»153,153,257,151,263,263,168,280″ где каждая пара чисел это координата x и y определенной точки. Отрисовка идет по ходу перемещения от точки к точке. В результате у нас получается четыре точки соединенные прямыми линиями между собой.

    Помимо обязательных атрибутов мы указали атрибут title для подсказки и onclick для обработки события клика.

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


    И воспроизведется содержимое тега audio. Заиграет музыка!

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

    В результате в консоли у вас будут выводится координаты курсора вашей мыши относительно картинки и вам будем удобнее находит x и y определенных точек.

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

    Здесь также можно пользоваться атрибутами target, accesskey, alt.

    Карты сайта хороши тем что мы можем создавать ссылки и активные области любой формы буквально по контурам изображений. Тем самым создавая на сайте динамические картинки.

    На этом дорогие друзья у меня на сегодня все. Надеюсь данная статья была для вас интересна и познавательна.

    Пример использования Image Map

    Рис. 2 При кликах на различные области данного изображения

    меняется цвет области

    4. Средства создания карт-изображений

    Для автоматизации процесса разметки областей на изображении существует ряд программ, большинство из которых очень похожи друг на друга. Они позволяют создавать и изменять файлы конфигурации, работая непосредственно с изображением на экране. Эти программы позволяют сохранять создаваемый конфигурационный файл либо в буфере обмена Windows, либо в файле на диске. Все программы позволяют размечать на изображении области трех основных типов — rect, circle и poly. Некоторые редакторы поддерживают тип default. Пожалуй, единственным критерием выбора программы редактирования карт-изображений является удобство ее использования, так как по функциональным свойствам все программы очень близки.

    Программа MapEdit

    Одной из наиболее простых и известных программ редактирования конфигурационных файлов является утилита MapEdit, разработанная Томасом Бутеллом (Thomas Boutell). Эта программа существует уже на протяжении нескольких лет и реализована для различных платформ. В частности, имеются версии для Windows 3.x и Windows 95/98/NT. (http://www.boutell.cora/mapedit/)

    Программа MapEdit является условно-бесплатной (shareware) и имеет 30-дневный оценочный период, по истечении которого необходима ее регистрация. Программа невелика по размеру — дистрибутив занимает около 300 Кб, и при этом обладает практически всеми необходимыми возможностями.

    Программа позволяет редактировать конфигурационные файлы как для серверного варианта (в форматах NCSA и CERN), так и для клиентского.

    Рассмотрим вкратце основные возможности данной программы. После запуска MapEdit выдается основное окно, содержащее заставку (рис. 3) и меню. Имеется возможность редактирования существующих файлов как для серверного, так и для клиентского вариантов карт-изображений. Есть возможность также создания нового файла конфигурации, однако это касается только серверного варианта. Для клиентского варианта необходимо наличие исходного HTML-файла со ссылками на встроенные изображения, которые будут использоваться в качестве опорных для карт-изображений.

    Пусть нам необходимо создать новый конфигурационный файл для серверного варианта карт-изображений. Выберем пункт Open/Create Map из меню

    File. Появится диалоговое окно (рис. 4), в котором следует задать имя создаваемого файла конфигурации (например, Blazons.map), указать существующий файл с изображением и формат создаваемого файла (NCSA или CERN). Файл изображения может иметь формат GIF, JPG или PNG.

    Рис. 4. Диалоговое окно Open/Create Map для создания конфигурационного файла

    Примечание

    Многие из программ интерпретации файлов конфигурации для серверного варианта требуют, чтобы файл имел расширение MAP. Можно рекомендовать всегда придерживаться этого правила.

    Программа загрузит выбранный файл с изображением, на котором можно будет произвести разметку активных областей .

    После разметки любой из областей следует задать адрес ссылки, соответствующий данной области, а также комментирующую информацию. Можно задать адрес ссылки для области по умолчанию, который будет peaлизовываться для части области изображения, не входящей ни в одну из активных областей.

    После разметки областей можно визуально проконтролировать или изменить созданные активные области, воспользовавшись пунктом Test меню Edit. Последним шагом работы является сохранение результатов в виде файла конфигурации (пункт Save меню File). Можно также использовать пункт Save As, в котором задать требуемый формат сохранения файла (рис. 5).

    Рис. 5. Диалоговое окно Default URL для задания URL-адреса для области по умолчанию

    Рис. 6. Диалоговое окно команды Save As

    Программа Map THIS!

    Еще одной утилитой создания и редактирования конфигурационных файлов карт-изображений является программа Map THIS!, информацию о которой можно получить по адресу:

    Работа с данной программой по идеологии схожа с программой MapEdit. Основой работы с программой является визуальное конструирование активных областей с дальнейшим сохранением результатов в файле в одном из выбранных форматов. Редактор поддерживает оба формата серверного варианта карт-изображений (NCSA и CERN) и клиентский вариант. Изображения могут загружаться из файлов в форматах GIF и JPG.

    Программа CrossEye

    Программа-редактор конфигурационных файлов CrossEye, созданная известной австралийской компанией Sausage Software. Эта программа будет встречена с радостью поклонниками популярного HTML-редактора HotDog, поскольку она создана той же компанией и имеет весьма привлекательный, выполненный с юмором, интерфейс.

    Информация о пакете CrossEye может быть получена по адресу:

    Отличительными особенностями программы является довольно большой размер дистрибутива (около 2,5 Мб), а также небольшой период времени (14 дней), в течение которого можно ее эксплуатировать в режиме оценки. Большой размер программ характерен для всего программного обеспечения, создаваемого компанией Sausage Software, что, видимо, обусловлено выбором инструментария, используемым для разработки (Visual Basic).

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

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL