Меню

Генератор map area по картинке



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

Карта изображений (Image Map) позволяет привязывать ссылки к фрагментам изображения. Щелкая мышью на отдельных частях изображения, пользователь может переходить по той или иной ссылке на разные Web-страницы.

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

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

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

shape Очертания области. Возможные значения атрибута:

rect прямоугольник;
circle круг;
poly многоугольник.
coords Координаты области.
Для прямоугольника – координаты левого верхнего и правого нижнего углов.
Для круга – координаты центра и радиус.
Для многоугольника – координаты всех углов.
href Адрес файла, на который делается ссылка.
nohref Означает, что эта область не действует. Удобен для вырезания дыр.
alt Текстовое описание области. Служит альтернативой при отключенной в браузере загрузке изображений.
title Всплывающий текст, появляющийся при наведении курсора мышки на заданную область.

Координаты по умолчанию измеряются в пикселях.

Начало отсчета координат – это верхний левый угол экрана, т.е.

Примеры различных форм областей карты изображений

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

Чтобы использовать изображение, как карту, в тег необходимо ввести дополнительный атрибут usemap, определяющий имя карты изображения. Перед этим именем ставится знак «#».

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

При кликах на различные области данного изображения меняется цвет соответствующего текста:

Область 1

Область 2

Область 3

Область 4

Применение технологии Image Map

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

Источник

Easy Imagemap Generator

Easy Imagemap Generator for html image mapping. Select an image. Set links and clickable areas to your image. Get HTML code for Imagemaps.

Just select an image from your PC or enter a image URL link, which you would like to map. For getting help, visit Infos page.

Select a local file

Back to my image

Or insert an image link

After choosing a file, you can generate Imagemap
coordinates and HTML code by clicking into the image.

Infos: HTML Imagemaps

An imagemap is a HTML element, which can used with a to integrate links directly into an image. On the contrary to an -tag, it allows to set several links into only one image.

Imagemaps are one of the best ways to add multiple links. Really useful for linking banners, newsletter, e-mails or landingpages. Just specify severel areas. Each area stores some coordinates.

Coordinates are pixel-values seperated with a comma and have an alignment from the left upper corner of the image. If you want to give the area a rectangle format, mark it as shape=»rect» into HTML and set two (left-top and right-bottom) coordinate-pairs. Example:

For each area you can set links as attribute href=»www.google.com».

This free image-mapping tool let you create the coordinates directly by clicking into the image — no programming knowledge required.

HTML Code: , &

The clickable area can be rectangles shape=»rect», polygons shape=»poly» or circles shape=»circle».

Shape-Values are coordiate-pairs. Every pair have a X and a Y value (from left/top of an image) separated with a comma. Every pair is as well separated with a comma.

  • Rectangle: Set four coordinates. x1,y1,x2,y2
  • Polygon: Set as many coordinates as you want (a multiple of two)
  • Circle: One coordinate-pair and second value a radius. x1,y1,radius

HTML Imagemap Demo Code with x / y

  1. src = «teaser.jpg» usemap = «#Teaser» alt = «»/>
  2. name = «Teaser» id = «Teaser» >
  3. alt = «» href = «#» coords = «x1,y1,x2,y2» shape = «rect»/>
  4. alt = «» href = «#» coords = «x1,y1,x2,y2,x3,y3 [. ] » shape = «poly»/>
  5. alt = «» href = «#» coords = «x1,y1,radius» shape = «circle»/>

For using this software, you just need to click into your uploaded image. So quickly forget the HTML code you’ve learned before 😉

Maps & Newsletter with Imagemaps

Imagemaps are defined with HTML 3.2. Nowadays every Web-Browser and Mail-Client supports the -tag without having problems.

Popular applications are newsletter and e-mails with large teaser and landingpages, banner or world- / country-maps on websites.

Browser-Support

  • Internet Explorer 6+
  • Mozilla Firefox
  • Google Chrome
  • Apple Safari

Mail-Clients

  • Outlook
  • Thunderbird
  • Apple Mail

For more infos, visit your best friend Wikipedia: Wikipedia: Image map.

About this Imagemap Tool

Hello, my name is Dario 🙂

Do you find Imagemap Generator helpful?
Write me an E-Mail or buy me a beer 🙂

This Software uses Google Analytics.
Uploads are deleted after 1 day.

PS: Thanks for your donations and mining power 🙂

Источник

Рисуем карту изображения мышкой

Теория

Начнём пожалуй с теории, куда ж без неё. Карта изображения содержит в себе два тега: map — контейнер карты и area — зона выделения. Карта не ограничена одной зоной и может содержать неограниченное их количество. Тег area кроме стандартных атрибутов имеет и свои собственные:

  • coords — координаты зоны выделения
  • href — ссылка, на которую будет произведён переход при клике на зону
  • nohref — указывает на то, что зона не содержит ссылки
  • shape — форма выделения
    • circle — зона выделения в виде круга
    • default — выделяет всю зону изображения
    • poly — зона выделения в виде многоугольника
    • rect — зона выделения в виде прямоугольника
  • target — определяет где будет открываться ссылка

Чтобы подключить карту к изображению, указываем тегу map атрибут name с произвольным именем, а на изображения вешаем тег usemap, значение которому указываем в формате «#имя».

Так как зона выделения у меня должна была быть многоугольной, значение атрибута shape, тега area, мы указываем как poly — полигональная область. В таком режиме через запятую указываются координаты точки относительно левого верхнего угла — x,y. Точки также разделяются запятыми, что по началу при чтении такого кода вызывает недоумение.

Пишем Paint

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

Для начала подготовим вёрстку:

В #bar будут вставляться кнопки для управления «пеинтом».
В #info будет выводится сгенерированный html код.

В javascript’е всё достаточно просто. В процессе написания я использовал свою боевую библиотечку, так что не удивляйтесь нестандартным функциям. Для начала повесим событие mousedown на #canvas, в котором будет рендериться точка на изображении и записываться её координаты.

Затем напишем функцию, которая будет генерировать html код нашей карты.

Обрамим всё в класс, немного вспомогательных функций, вот и всё. Надеюсь кому-то будет полезна сея тулза.

Ссылки

PS. Добавил ссылку на гитхаб.
PS2. Теперь «paint» работает на канвасе.

Источник

HTML Изображение карта

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

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

Тег определяет изображение-карту. Изображение-карта — это изображение с кликабельными областями.

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

Пример

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

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

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

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

Создание изображения

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

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

Совет: Вы можете использовать любое изображение в качестве карты изображений.

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

Затем добавить элемент .

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

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

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

Создание области

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

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

Форма

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

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

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

Shape=»rect»

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

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

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

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

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

Shape=»circle»

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

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

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

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

Shape=»poly»

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

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

Например, в форме круассана!

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

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

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

Пример

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

name attribute of the tag is associated with the ‘s usemap attribute and creates a relationship between the image and the map.

Изображение карта с JavaScript

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

Пример

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

Краткое содержание

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

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

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

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

Источник

Online HTML image map creator

This free online service allows you to create HTML image maps (aka clickable maps).

For example several areas on this image are clickable. The clickable areas can be a circle, rectangle or a polygon.


Show the HTML image map code.

How it works:

  1. Upload any of the following image filetypes: .gif, .jpg, .png, .jpeg.
    The maximum file size = 100 KB.
    If the uploaded image has a width larger than 610px, it will be automatically resized to 610px.
  2. Click your mouse on the image and draw a region (circle, rectangle or polygon) and enter the mandatory region information:
    • URL.
    • ALT text.
  3. Press the «Save region» button.
  4. All entered data are stored.
    An overview of all your created regions are displayed in the «Created regions» section.
  5. After you have saved one or more regions, press the «Create HTML Map» button.
  6. The HTML image map code can be found in the «Output» section on the bottom of the page as well as a zip file containing the same code including the uploaded image.
    Note: When you upload an image and its width is larger then 610px, the image will be resized to fit the page. When the image map is created the region coordinates are recalculated based on the original image scale.
  7. For each uploaded image a unique Upload code is generated. You can continue working on your HTML image map at a later time by entering this code in the «Enter issued Upload code» field.
  8. The HTML image map will be available for 10 hours after the «Create HTML Map» button is pressed and then will be automatically deleted.

Источник

Читайте также:  Генератор паролей для контакта