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

Как сделать карту изображения в HTML(навигационная карта). Основы HTML для начинающих. Урок №15

Главная » Основы HTML » Как сделать карту изображения в HTML(навигационная карта). Основы HTML для начинающих. Урок №15

Всем привет! Продолжаем изучать основы HTML. . Карту изображений еще называют навигационной картой, но это не так уж и важно.

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

Карта изображения (навигационная карта) – это картинка, на которой размещается одна или несколько указанных областей для ссылок.

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

[посмотреть пример]

В примере использовалась одна картинка, где область и путь перехода разный

Обратите внимание

Вот сейчас научимся создавать что-то подобное.

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

Как сделать карту изображения в HTML

Чтобы создать карту изображения в HTML, вставьте вот такой каркас:

○ тег map

Тег — это  главный контейнер для создания карты изображения, внутри которого содержатся другие теги, такие как .
Закрывающий тег обязательный.

* атрибуты тега map

название карты
Обязательно карте нужно дать имя и для этого используют атрибут  «name»:

○ тег area

Тег — этот тег предназначен для указания геометрической области со ссылкой.

* атрибуты тега area

как определить форму области

Чтобы определить форму области (прямоугольник, круг, многоугольник) используют для тега атрибут  «shape» с такими значениями:

  • rect — Прямоугольник. Пример: shape=»rect»;
  • circle — Круг. Пример: shape=»circle»;
  • poly — Многоугольник. Пример: shape=»poly»

Пример:

как указать расположение геометрической формы

Чтобы указать расположение геометрической формы (прямоугольником, кругом, многоугольником) используют для тега атрибут  «coords».

В атрибуте  «coords» и задаются все параметры  размещения геометрической фигуры по такой схеме:

Прямоугольная область

coords=»x1,y1,x2,y2″

Обратите внимание на вертикальную ось «y» и горизонтальную ось  «x». Вот по этим осям и задаются параметры.

Круглая область

coords=»x,y,R»

Многоугольная область

coords=»x1,y1,x2,y2,x3,y3,x4,y4,x5,y5″

Создаем карту изображения в HTML

Прямоугольник

К примеру, у меня есть вот такая картинка прямоугольников:

Вставим картинку в html документ:

Теперь создаем блок для карты изображения и даем ему любое название через атрибут «name», к примеру «karta1»

Далее связываем картинку с картой. Для этого и нужно было дать название к карте. Чтобы связать карту, пропишите к картинке атрибут «usemap»:

Имя карты обязательно должно быть через решетку «#»:

Теперь в теге указываем координаты, геометрическую форму и ссылку для перехода.

Вот координаты первого прямоугольника:

а вот такие будут ко второму:

Вот готовый код:

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

А мы смотрим на результат, что же у меня вышло. Попробуйте навести на прямоугольник №1, а потом на №2 (можно нажать, они кликабельны):

[посмотреть пример]

Круг

К примеру, у меня есть вот такая картинка круга:

Вот координаты первого круга:

а вот такие будут для второго круга:

Прежде, чем посмотреть готовый код, попробуйте сами написать HTML код и сверить его с моим.

Готовый код будет вот таким:

Еще раз повторюсь в разъяснениях, что я делал в коде:

Строка №1
Вставил картинку в HTML файл и привязал изображение к карте с помощью атрибута «usemap»:

Строка №2
Создал блок для карты изображения и дал карте название для привязки к картинке с помощью атрибута «name»:

Важно

Обратите внимание, название карты (name=»имя») должно совпадать с привязкой картинки (usemap=»#имя»). Это важно, так как карта изображений работать не будет.

Строка №3 и №4
Указал фигуру и ее координаты, а также привязал к фигуре ссылку

Итак, если вы все правильно сделали, результат будет таким:

[посмотреть пример]

Попробуйте навести на круг №1, а потом на №2 (можно нажать, они кликабельны)!!!

Многоугольник

К примеру, у меня есть вот такая картинка фигуры с несколькими углами:

Вот координаты первого многоугольника:

а вот такие будут для второго многоугольника:

Готовый код будет вот таким:

Результат будет вот таким:

[посмотреть пример]

Хочу дополнить, что углов может быть столько, сколько вы хотите и сколько вы укажите:

Разъяснение:

x1, y1— координаты первого угла;
x2, y2— координаты второго угла;
xN, yN— координаты последнего угла

ДОПОЛНЕНИЕ:

Комбинированная карта изображений

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

В примере я указал область для круга и для прямоугольника.

Подсказка для ссылки в карте изображений

Для каждой выбранной области можно прописать подсказки, которые будут появляться, если навести курсор мышки. Для подсказки используют атрибут «title» к тегу «area»:

Вот результат:

[посмотреть пример]

Наведите курсор мыши на круг, а потом на прямоугольник. Вы увидите, как появятся подсказки, на кружке – «wordpress», а на прямоугольнике — «Автор блога».

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

Источник: http://stepkinblog.ru/html/kak-sdelat-kartu-izobrazheniya-v-htmlnavigacionnaya-karta-osnovy-html-dlya-nachinayushhix-urok-15.html/

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

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

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

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

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

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

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

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

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

XY

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

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

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

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

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

Область 1

Область 2

Область 3

Область 4

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

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

Читать дальше: Графика в HTML5

Источник: https://htmlweb.ru/html/imagemap.php

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

Выбери фигуру:

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

  • Разместили изображение (тег ), которое мы в последствии будем использовать при составлении изображении-карты. В атрибуте usemap необходимо обязательно указать имя изображения-карты, которое мы будем использовать в элементе (необходимо обязательно перед именем указать решетку).
  • Размещаем изображение-карту (тег ), задаем единственный и обязательный атрибут элемента name (имя). Обратите внимание, что в отличие от тега мы задаем имя без решетки, в остальном они должны совпадать.
  • Размещаем четыре тега , которые определяют интерактивные области в изображении-карте:
    • Первой мы задаем прямоугольную область (атрибут shape со значением «rect» ), она соответствует нашему первому изображению (первые два значения соответствуют верхнему левому углу, следующие два значения определяют правый верхний и нижний угол).
    • Второй указываем круглую область (атрибут shape со значением «circle» ), она соответствует нашему второму изображению (первое значение соответствует координатам по оси x, а второе по оси y, третее определяет радиус).
    • Что касается третей и четвертой фигуры, то они составлены по принципу многоугольной области (атрибут shape со значением «poly» ). Вы определяете необходимое количество точек на изображении, высчитываете координаты этих точек (графический редактор) и указываете в таком порядке, чтобы браузер их мог соединить одной линией. На примере треугольника (третий рисунок): первая точка (координаты x и y вершины), вторая точка (координаты x и y левого нижнего угла) и третяя точка (координаты x и y правого нижнего угла).

Обращаю Ваше внимание на то, что если у тега используется атрибут href, который определяет гиперссылку на площади, то необходимо обязательно указывать атрибут alt (альтернативный текст для области).

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

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

Рис. 49 Пример построения изображения-карты в HTML.

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

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

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

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

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

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

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

Источник: https://basicweb.ru/html/karta.php

Правила настройки sitemap для изображений — Академия SEO (СЕО)

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

О том, что на содержимое  этого файла ориентируются поисковые роботы при посещении сайта, знают все более-менее знакомые с основами SEO веб-мастера. При этом многие не придают значения участию изображений сайта в поиске и не заморачиваются с настройкой sitemap для картинок, а то и вовсе не знают об этом моменте.

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

Читайте также:  Стоит ли покупать сайты

Также составление sitemap для картинок способствует более тщательному индексированию содержимого веб-ресурсов с большим количеством страниц и уровней вложенности.

К тому же полноценное участие в поиске по картинкам может стать неплохим источником получения дополнительного трафика на сайт.

Что нужно знать о sitemap для изображений

  1. Карту изображений сайта можно разместить как в составе уже имеющегося sitemap.xml со списком страниц, так и в отдельном файле, который можно назвать, например, sitemap2 или sitemapimages. Главное при этом, не забыть прописать соответствующую строку в robots.txt.

  2. В sitemap для картинок прописываются не просто списки ссылок, а специальные теги, с помощью которых поисковик получает основную, а также дополнительную информацию об изображениях.
  3. При составлении карты изображений сайта можно указывать до 1000 графических объектов для каждой его странички.

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

Как составить карту изображений сайта

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

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

    Затем сгенерированный код необходимо скопировать и вставить в новый файл, созданный в Блокноте, и сохранить его в корень сайта с расширением .xml.

  3. Используя плагины, устанавливаемые в CMS (для Вордпресс подойдут Yoast SEO, Udinra Image Sitemap и др.

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

    Также нет необходимости возиться с созданием файла в формате .

    xml и расположением его в корневой директории веб-ресурса – такие плагины делают все это автоматически.

Sitemap для картинок и Яндекс

Источник: https://seo-akademiya.com/baza-znanij/vnutrennyaya-optimizacziya/sitemap-dlya-izobrazhenij/

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

Доброго времени суток. Меня зовут Михаил.

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

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

#Видео уроки #ВидеоКурс HTML

28 апреля 2014

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

Совет

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

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

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

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

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

HTML-тег map

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

Данный тег имеет обязательный атрибут name. В котором мы должны указать имя нашей карты изображения. Кроме того стоит отметить что этот тег не является блочным элементом, а значит необходимо его прописывать внутри блочного элемента, например тега абзаца или универсального тега div.

HTML-тег area

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

Здесь также хочу упомянуть о том, о чем забыл сказать в видео уроке, что этот тег легко заменяется тегом для указания гиперссылок в HTML-документе. То есть тегом . Если Вы помните, то именно у тега есть точно такие же атрибуты shape и coords, которые предназначены именно для указания базовой фигуры и ее координат.

Определение координат квадрата, прямоугольника, круга и многоугольника

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

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

Обратите внимание

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

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

Видео урок: Создание карты избражения в HTML

HTML-справочник и другие материалы можно и нужно скачать здесь!

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

Источник: https://SdelaemBlog.ru/sozdanie-karty-izobrazheniya-v-html

Навигационные карты

Немного поспешил с примером толком не объяснив суть написанного.. Заострим внимание на атрибутах тега .

href=»primer1.html» — здесь думаю понятно, это путь к документу, который должен открыться при нажатии на «зелёную кнопку».

Так как кнопка у нас квадратная, а квадрат как известно это «правильный» прямоугольник, форму области рисунка назначаем прямоугольной shape=»rect».

А теперь самое интересное coords=»15,15,82,82″ — координаты.. Для прямоугольника они задаются двумя точками по принципу «Х1,У1,Х2,У2» Где Х1,У1- первая точка и соответственно Х2,У2 -вторая.

Координаты указываются в пикселях.. Наш рисунок/карта имеет размеры 300 на 100 пикселей, её самый верхний левый пиксель имеет координаты Х=0,У=0, а самый нижний правый Х=300,У=100.

Если не понятно, окунёмся в геометрию за пятый класс..

Взгляните на рисунок:

Так, выбрав прямоугольную форму shape=»rect» для нашей области в виде квадратной кнопки мы указали координаты ёё верхнего левого и нижнего правого пикселей.. которых вполне достаточно для обозначения «рабочей» области всей кнопки.

Займёмся «жёлтой кнопкой», она у нас представлена в виде треугольника.

Для того чтобы выделить её «рабочую» область из нашего рисунка, присвоим атрибуту shape значение poly — полигон, которое определит эту область как некий многоугольник, где координаты через запятую будут являться его вершинами, их может быть сколь угодно много «Х1,У1,Х2,У2,Х3,У3,Х4,У4… Х124,У124» фигура образованная этими точками вершинами углов может иметь вид любого многоугольника как правильного, так и неправильного. В нашем случае угла всего три, на то он и треугольник, следовательно его координаты будут заданы тремя парами значений «Х1,У1,Х2,У2,Х3,У3»

Значит всё вместе пишем так:

А вот рисунок который наглядно показывает откуда берутся координаты точек..

Пример:

Ну и последняя «красная кнопка» она у нас круглая.. значит форма области будет круглой shape= «circle». На сей раз с координатами дело обстоит немного иначе. Нам понадобится три значения Х,У,R. Х и У это координаты центра нашей окружности, а R — это длина радиуса в пикселях.

Вот рисунок:

А вот пример:

Теперь немного о том, что ещё желательно было бы сделать с нашей картой прежде чем «монтировать» её в какую либо страницу.

Определим фиксированные размеры рисунка-карты атрибутами width и height

Напишем альтернативный текст, как для всего рисунка карты, так и для её отдельных областей используя атрибут alt, а также описание элементов атрибутом title.

Важно

Избавимся от рамки бордюра.. сделаем border=»0″..(ну если Вам с бордюром больше нравится, можете этого не делать.. я не настаиваю..)

В конце должно выглядеть примерно вот так:



Иногда удобно формировать «рабочую» область изображения «смешивая» разные формы..

Предположим, наша очередная кнопка имеет такой вид:

Конечно, можно определить форму как многоугольник, но придется задать уйму координат для округлой части такой кнопки (ну это если нужна особая точность в навигационной карте).

А можно определить в этом примере две формы прямоугольник rect и окружность circle как показано на рисунке:

А в коде указать путь к одному и тому же документу:

Пример:

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

Рассмотрим на примере.. предположим необходимо изготовить вот такую кнопку:

Как быть с отверстием в ней?

Тег помимо атрибута href имеет противоположенный по значению атрибут nohref — неактивная область, то есть если пользователь нажмет на такую область, то ровным счетом ничего не произойдёт, чего нам собственно и необходимо добиться при изготовлении «отверстия» в нашей карте.

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

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

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

Отрывок из справочника (атрибуты тега ):

usemap — изображение является навигационной картой на стороне клиента.
ismap — изображение является навигационной картой на сервере.

Непонятно? Тогда читаем..

С атрибутом usemap мы вроде бы разобрались.. Смотрите, пользователь (клиент) открыв Вашу страницу, одновременно со всем остальным содержанием, загружает «на свою сторону» как сам рисунок, так и навигационную карту к нему и всё это дело обрабатывается его браузером.

А вот атрибут ismap тега говорит браузеру о том, что к данному изображению на сервере, ну там где Вы выложили или собираетесь выложить свой сайт (читаем статью: «Публикация сайта»), есть навигационная карта.

И теперь, когда посетитель (клиент) кликнет по какой либо области рисунка с таким атрибутом, браузер запомнит координаты этого клика и отправит их на сервер, где специальная программка обработает эти данные и перенаправит пользователя на тот адрес который указан в карте на сервере, в соответствии с полученными от браузера клиента координатами точки.

Пишется так:

Где адрес навигационной карты на каком либо сайте.. размещённом на том или ином сервере..

Всё равно непонятно? Если да, то тогда не стоит заморачивотся по этому поводу.. используйте usemap, на мой взгляд такое решение будет лучшим в большинстве случаев при использовании навигационных карт.

  • Что бы без труда определить координаты той или иной точки на Вашей навигационной карте откройте рисунок графическим редактором тем же Paint к примеру.. там, когда будете двигать указателем по рисунку, увидите две меняющиеся цифры, это и есть координаты пикселя Х и У на данном рисунке. В Paint эта панелька расположена в нижней части экрана.
  • При создании страницы с навигационной картой тег всегда должен быть выше самой карты То есть писать вот так:..можно, но не нужно.. потому что при загрузке страницы могут возникнуть проблемы, так как карта с разметкой уже загрузилась, а самого рисунка ещё нет..
  • И ещё что касается загрузки..В этом месте кода может быть всё что угодно длинный текст, таблицы, графика.. но всё же лучше здесь ничего не писатьА писать здесь, так как во время загрузки страницы, пользователь не дождавшись её окончания, может пытаться нажимать на кнопки указанные в навигационной карте которая к этому времени еще не загрузилась..

Источник: http://www.webremeslo.ru/html/glava8.html

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

Всем привет. С Вами Бернацкий Андрей.

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

Карта-изображения – это какая-либо картинка, может быть фотография, которая имеет несколько активных зон.

Например, при нажатии мыши на активную зону переходим на определенный URL. Если сидите в vkontakte.ru, там пример карты-изображения – это когда отмечают на фотографии, и при наведении курсора мыши на человека, отмеченного на фотографии, показывается его имя и фамилия, а при щелчке мыши происходит переход на страницу этого человека.

Сначала предлагаю Вам видео версию данного урока:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Видео версия урока

Делается это все достаточно просто. Берем любую фотографию с друзьями. Лучше вставить ее в свой отдельный блок .

Я взял для примера свою фотографию.

Совет

Для div задан id для того, что бы можно было назначить какие-нибудь отступы или еще, что нужно будет. Я в своем примере ничего задавать не буду.

Главный параметр у тега img в данном случае – это usemap=»#img-nav». Он указывает на карту с каким именем мы будем ссылаться.

Далее создаем саму карту изображения. Карту создает тег . Итак сейчас опишем активную зону, по нажатию на которую перейдем на сайт webformyself.com.

Идем по порядку.

— значение параметра name должно совпадать со значением параметра usemap тега img, только у тега map оно записывается без символа #.

Далее тег — говорит, что сейчас выделим активную зону.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Параметр shape тега — показывает, какого типа будет наша область. На то, какая будет наша область, показывает значение параметра shape:

rect – указывает, что область будет в виде прямоугольника.

poly – произвольный многоугольник.

circle – область будет в виде круга.

Параметр coords содержит координаты нашей области.

Если shape=»rect», то указываются координаты левого верхнего угла и правого нижнего. То есть первая пара чисел указывает на левый верхний, а вторая пара чисел – на правый нижний угол.

Если shape=»poly», то указываются координаты каждой вершины многоугольника. shape=»poly» coords=»80,100,150,100,210,40,300,40,300,110″ в данном случае координаты первой вершины будут 80,100, второй 150,100, третий — 210,40, четвертой — 300,40, пятой — 300,110.

Если shape=»circle» , то указываем координаты центра и радиус. shape=»circle» coords=»300,300,100″ здесь координаты центра 300,300 и радиус 100.

Далее параметр shref содержит адрес страницы, или E-mail адрес. То есть, то же что и у обычной ссылки.

title=»Andrey» alt=»Andrey» уже знакомые параметры. Останавливаться на них не буду.

Полный код представлен ниже:

Теперь при щелчке мыши на изображении по мне, будет осуществлен переход на www.webformyself.com.

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

На этом, выпуск посвящённый созданию карт-изображений в HTML, завершим.

Источник: https://webformyself.com/sozdanie-kart-izobrazhenij/

Создаем интерактивную карту

Мы подключаем таблицу стилей (default.css) , библиотеки jQuery, Raphael, и файлы paths.js и init.js.

Создаем траекторию из SVG файла (paths.js)

Scalable Vector Graphics (SVG — масштабируемая векторная графика) является семейством спецификаций основанного на XML формата файла для описания двумерной векторной графики.

Таким образом, SVG является XML файлом, а, следовательно, мы можем редактировать его в текстовом редакторе.

Для карты используется SVG файл с изображением Европы. Вы может использовать свое векторное изображение (если взять что-то другое, кроме карты, то может получиться очень интересная интерактивная графика). Конвертировать векторное изображение в формат SVG можно с помощью Adobe Illustrator или Inkspace.

Обратите внимание

Открываем paths.js и создаем новый объект с именем paths.

Затем открываем карту SVG и видим XML код. К счастью, нам нужно только одно значение, которое называется d. Посмотрите на следующее изображение.

Скопируем контур первой страны. В нашем SVG файле это будет Исландия, копируем значение d и создаем новый параметр iceland в объект paths.

var paths = { iceland: { name: 'Исландия', path: // значение 'd' } }

И далее действуем аналогичным образом для создания контуров других стран.

var paths = { iceland: { name: 'Исландия', path: // Значение 'd' }, spain: { name: 'Испания', path: // Значение 'd' }, portugal: { name: 'Португалия', path: // Значение 'd' } // и так далее }

Создаем карту (init.js)

Теперь напишем скрипт, который будет выводить карту на экран.

$(function(){ var r = Raphael('map', 1200, 820), // Cоздаем новый объект canvas, в котором будет происходить рисование контуров attributes = { fill: '#fff', stroke: '#3899E6', 'stroke-width': 1, 'stroke-linejoin': 'round' }, // Создаем объект 'attributes' с параметрами arr = new Array(); for (var country in paths) { var obj = r.path(paths[country].path); obj.attr(attributes); } // Проходим циклом все контуры (которые включены в объект paths), выводим их и устанавливаем атрибуты для них });

Создадим обработчик события hover.

obj.hover(function(){ this.animate({ fill: '#1669AD' }, 300); }, function(){ this.animate({ fill: attributes.fill }, 300); });

Теперь добавим обработку события click.

obj.click(function(){ document.location.hash = arr[this.id]; // Изменяем хэш документа (#) var point = this.getBBox(0); // возвращаем размеры элемента $('#map').next('.point').remove(); $('#map').after($('').addClass('point')); // Удаляем существующий div 'point' и создаем другой $('.point') .html(paths[arr[this.id]].name) .prepend($('').attr('href', '#').addClass('close').text('Закрыть')) .prepend($('').attr('src', 'flags/'+arr[this.id]+'.png')) .css({ left: point.x+(point.width/2)-80, top: point.y+(point.height/2)-20 }) .fadeIn(); // Добавим контент html(название страны, изображение флага и кнопку закрытия), устанавливаем положение и выводим элемент });

..и обработку события click для кнопки закрытия:

$('.point').find('.close').live('click', function(){ var t = $(this), parent = t.parent('.point'); parent.fadeOut(function(){ parent.remove(); }); return false; });

В итоге файл init.js будет выглядеть следующим образом:

$(function(){ var r = Raphael('map', 1200, 820), attributes = { fill: '#fff', stroke: '#3899E6', 'stroke-width': 1, 'stroke-linejoin': 'round' }, arr = new Array(); for (var country in paths) { var obj = r.path(paths[country].path); obj.attr(attributes); arr[obj.id] = country; obj .hover(function(){ this.animate({ fill: '#1669AD' }, 300); }, function(){ this.animate({ fill: attributes.fill }, 300); }) .click(function(){ document.location.hash = arr[this.id]; var point = this.getBBox(0); $('#map').next('.point').remove(); $('#map').after($('').addClass('point')); $('.point') .html(paths[arr[this.id]].name) .prepend($('').attr('href', '#').addClass('close').text('Close')) .prepend($('').attr('src', 'flags/'+arr[this.id]+'.png')) .css({ left: point.x+(point.width/2)-80, top: point.y+(point.height/2)-20 }) .fadeIn(); }); $('.point').find('.close').live('click', function(){ var t = $(this), parent = t.parent('.point'); parent.fadeOut(function(){ parent.remove(); }); return false; }); } });

default.css

Добавим стили CSS.

#map { float:left; clear:both; width:1200px; height:820px; } .point { position:absolute; display:none; padding:10px 15px; background:#7BB9F0; font-size:14px; font-weight:bold; /* Скругленные углы CSS3 */ -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; } .point .close { display:block; position:absolute; top:-10px; right:-10px; width:24px; height:24px; text-indent:-9999px; outline:none; background:url(../img/close.png) no-repeat; } .point img { vertical-align:middle; margin-right:10px; }

Готово!

Источник: https://ruseller.com/lessons.php?id=952

HighStar



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.

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

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

Совет

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

Источник: https://highstar.ru/lesson_html/40.php

Как сделать Интерактивную Карту на сайте. Работа с SVG Изображениями

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

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

ШАГ 1. Подготовка базовой HTML разметки

Добавьте код ниже:

После того как вы добавите этот код, не пугайтесь если вы не увидели свою картинку, которую подключили. Промотайте страницу немного вниз, она будет там. Изображение, которое вы подключили съехало вниз из-за елемента svg, который был добавлен перед ней.

Мы в нем прописали размеры нашей картинки и он теперь занимает такое же место как и оригинальное изображение. Примечание.

В атрибуте viewBox елемента svg необходимо прописать размер вашего изображения которое вы будете делать
интерактивным.

ШАГ 2. Создание SVG елементов

Для дальнейшей работы вам необходимо установить программу позволяющую работать с svg графикой Inkscape. После установки программы смело запускайте её.

Открывайте ваше изображение в этой программе во вкладке «файл» и «открыть…» . В моём случае это изображение карты мира. Затем нажимайте на кнопку в правом нижнем углу «Просмотреть и изменить XML«.

У вас после нажатия на эту кнопку в правой части экрана появится соответствующий виджет.

Далее нажмите на кнопку «Рисовать произвольные контуры» и начинайте обводить то место картинки, которое вы хотите добавить в svg елемент.

После выделения выберите появившуюся строку выделенной вами части изображения в редакторе xml. Затем выберите поле d этого елементаи скопируйте его содержимое немного ниже.

В поле d будет довольно большой объем координат. Копируйте это все и вставляйте в вашем HTML коде в атрибут d елемента path.

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

ШАГ 3. Добавление стилей

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

.map { position: relative; text-align: center; } svg { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } path { opacity: 0.4; fill: orange; cursor: pointer; transition: 0.3s; } path:hover { opacity: 0.8; transition: 0.3s; }

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

Довольно криво я навел контуры картинки, но для меня главное было показать, что вышло в итоге) Я не делал всю карту интерактивной и более аккуратной ибо это заняло бы намного больше времени, а результат был бы один и тот же. Главное, что вы поняли как это работает и как это реализовывать.

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

Все! Теперь вы сделали свою первую интерактивную svg карту.

Источник: https://a-devel.com/blog/kak-sdelat-interaktivnuyu-kartu-na-sajte-rabota-s-svg-izobrazheniyami/

InformatikUrok » Blog Archive » Как часть картинки сделать ссылкой?

Сегодня мы поговорим о том, как разные части картинки сделать ссылками, т.е. мы научимся делать карту изображения. Сегодня мы узнаем какие области могут быть ссылками, как сделать эти области ссылками, научимся определять координаты прямоугольной области в Paint, напишем html-код картинки, в которой кнопочки-прямоугольники будут ссылками. 

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

Обратите внимание тег парный (имеет тег !). Чтобы обозначить геометрические области для клика (кнопочки на нашей картинке) внутри этой карты, нужно воспользоваться тегом .

Итак, скелет html-кода нашей картинки будет выглядеть так:

Обратите внимание

Чтобы было проще Вам понять о чем идет речь, вот картинка с которой мы будем  работать и геометрические области, выделенные желтым цветом будем делать ссылками. (Кстати, можете проверить работу кнопки «MS Word», щелкните по ней левой кнопкой мыши, чтобы открылся раздел «MS Word»).

Итак, чтобы геометрические области (кнопочки на картинке) сделать ссылками, нужно в теге прописать атрибуты shape и coords. Что такое shape? Все просто. Как Вы поняли части картинки, которые мы будем делать должны быть в виде:

  • прямоугольника (shape=»rect»);
  • овала (shape=»circle»);
  • многоугольник (shape=»poly»).

Т.е. shape — это вид нашей кнопочки (области на картинке), а coords — ее координаты. Записываются координаты вот так:

  • прямоугольник — coords=»x1,y1,x2,y2″, при этом (x1,y1) — координаты левого верхнего угла, а (x2,y2) — координаты правого нижнего угла;
  • окружность — coords=»x,y,R», где (x,y) — координаты центра окружности, а R — радиус;
  • многоугольник — coords=»x1,y1,x2,y2,…,xN,yN», где (xN,yN) — координаты соответствующей вершины.

Т.о. html-код нашей картинки для кнопочки «MS Word» будет выглядеть так:

Как я узнала координаты? Очень просто открыла картинку в Paint, навела в левый (правый) верхний (нижний) угол и посмотрела координаты в правом нижнем углу:

И это еще не все! Надо прописать путь к той страничке, которая при щелчке ЛКМ должна открываться. Для этого в теге нужно добавить атрибут href= «ссылка на страницу». Итак, html-код будет выглядеть так:

Все? Почти. Осталось дело за малым. Нужно теперь нашей картинке объяснить, что она будет  картой с областями для ссылок. Для этого нашу карту нужно назвать, т.е. дать ей имя, используя атрибут name=»karta» в теге . Теперь html-код карты будет выглядеть так:

А в html-код картинки  (в тег ) нужно добавить usemap=»#karta».  Ну вот, практически и все. Все коды готовы. Теперь нам осталось только  разобраться куда вставлять тег .

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

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

Итак, сегодня мы узнали:

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

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

Источник: http://InformatikUrok.ru/o-bloge/kak-chast-kartinki-sdelat-ssyilkoy

Как в HTML сделать Изображения-Карту. | Блог разработчиков phpBB

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

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

Допустим у Вас имеется например такой графические файл (или примерно такой):

В данном случае картинка взята произвольно, просто для примера. Здесь Вы видите скриншоты разных сайтов, объединенных на одной общей картинке. Допустим Вам нужно сделать, чтобы при клике на каждый из сайтов, изображенных на этой картинке (уменьшенное изображение), человек попадал именно на этот сайт. Т.е. разбить всю картинку примерно так:

Важно

Делается это достаточно просто. Пускай наше изображение, точнее графический файл, называется karta2.jpg . Размер картинки используемой здесь 400х255 пикселей. Сначала давайте посмотрим Листинг 1 такой разбивки:

Листинг 1.

Как видите, чтобы создать карту, нужно вставить в тэг атрибут usemap=”#name”, где name – имя карты (значок # обязателен) в данном случае имя графического файла карты: karta2.jpg . Я пропускаю остальные атрибуты в этом тэге, Вы их должны знать, т.к. о них уже рассказывалось в предыдущих уроках.

Далее описываем все активные области карты (в данном случае у нас их 8). Начинаем с открывающегося тэга (здесь повторяется имя картинки, но уже без значка #), а заканчиваем закрывающимся тэгом .

Между тегами описывается каждая активная область (ссылка) изображения, тегами: .

Элемент имеет следующие аттрибуты и их значения:

share Описывает форму выделяемой области, возможные значения: rect – прямоугольник circle – круг poly – многоугольник

default – определяет всю область, т.е весь рисунок может стать ссылкой.

coords Координаты, определяющие размеры и положение области на изображении. Все координаты отсчитываются в пикселях от левого верхнего угла изображения. Количество и порядок значений зависит от значения аттрибута shape : rect: – левый-X, верхний-Y, правый-X, нижний-Y (т.е. сначала координаты левого верхнего угла, затем правого нижнего) circle: – центр-X, центр-Y, радиус (т.е. горизонтальная и вертикальная координаты центра круга и радиус)

poly: – X1, Y1, X2, Y2, …, Xn, Yn (просто перечисляются координаты всех вершин многоугольника).

nohref Определяет, что данной области не соответствует никакая ссылка. Где это может пригодиться? Ну, например, если вы хотите сделать ссылку не в виде круга, а в виде кольца
alt Альтернативный текст для выделенной области, используется невизуальными браузерами.
title Название выделенной области, выводится в виде подсказки, всплывающей при наведении курсора на область рисунка.
target Значение этого аттрибута (“_top”, “_blank”, “_self” или “_parent”) определяет, в каком окне будет открыт документ

В результате вот что у нас получилось, покликайте по пиктограммам:

В качестве примера вместо ссылки Link 1 , я вставил реальную ссылку, ведущую на поздравительный сайт, который совсем недавно помогал делать одному с воему другу к Новому году.

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

маленькая фотография я вляется отдельной ссылкой.

А вместо ссылки Link 8 , для наглядности, я сделал ссылку на главную страницу своего сайта http://www.LuksWeb.ru/

Остальные ссылки Link 2Link 7 , никуда не ведут, просто не прописать URL адреса.

Как Вы понимаете ссылки можно сделать, как абсолютные, так и относительные, разницы нет никакой.

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

Совет

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

Источник: http://bb3x.ru/blog/kak-v-html-sdelat-izobrazheniya-kartu/

Ссылка на основную публикацию