BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Все про HTML » Карта изображения в HTML (навигационные карты). Урок №11

Карта изображения в HTML (навигационные карты). Урок №11

2014-02-04 / Вр:20:27 / просмотров: 7648

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

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

[пример]

Не бойтесь, это вовсе не сложно. Самое главное – понять теорию и закрепить практикой.

Ну что, приступим к теории.

Карты изображения (навигационные карты) задаются тегом <map></map>.
Тег <map></map> - это коробка, внутри которой размещают теги <area>.
Тег <area> предназначен для определения геометрической области с ссылкой, привязанной к каждой области.

Пример:

<map>
<area>
<area>
<area>
</map>

Атрибуты areа

1.  Атрибут shape
shape – определяет форму области (прямоугольником, кругом, многоугольником).
Прямоугольник - "rect". Пример: shape="rect";
круг - "circle". Пример: shape="circle";
многоугольник - "poly". Пример: shape="poly"

Пример:

<map>
<area shape="rect">
</map>

2. Атрибут coords
coords – это расположение геометрической формы.

Давайте рассмотрим пример на геометрической форме прямоугольника.

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

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

<map>
<area shape="rect">
</map>

Теперь переходим к координатам.
Точка отсчета начинается с левого верхнего угла картинки, координаты которого (0;0)

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

Порядок записи координат для атрибута coords будет таким:

<area shape="rect" coords="x1,y1,x2,y2">

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

Для примера с прямоугольником №1 возьмите  такие координаты:

x1=25, y1=36, x2=114, y2=98

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

Вот так будет выглядеть код:

<map>
<area shape="rect" coords="25,36,114,98">
</map>

Дальше нужно указать путь(ссылку) для выбранной области. Как сделать ссылку в HTML, вы уже знаете.

<map>
<area href="http://bloggood.ru" shape="rect" coords="25,36,114,98">
</map>

Все пока что хорошо. Но нам теперь нужно связать картинку с картой.
Для этого придумайте любое название для карты, например, «karta1»  и пропишите его в теге <map> через атрибут name.

<map name="karta1">
<area href="http://bloggood.ru" shape="rect" coords="25,36,114,98">
</map>

Теперь свяжем карту с картинкой. Для этого используем атрибут usemap.
Пример написания:
usemap="#имя_карты"

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

<img src="kartinka.gif" usemap="#karta1">

Теперь соберем все вместе и пропишем еще координаты к другому прямоугольнику №2 с такими данными (x1=153, y1=11, x2=219, y2=127).

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

Пример:

<html>
<head>
<title> Карта изображения в HTML (навигационные карты). Урок №11</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<img src="kartinka.gif" usemap="#karta1">
<map name="karta1">
<area href="http://bloggood.ru/" shape="rect" coords="25,36,114,98">
<area href=" http://bloggood.ru/avtor/" shape="rect" coords="153,11,219,127">
</map>
</body>
</html>

Теперь смотрите на результат.  Нажмите на прямоугольник №1 и на прямоугольник №2

[пример]

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

Для начала нужно указать тип области. Для этого пропишем в  атрибуте shape значение «circle».

<map>
<area shape="circle">
</map>

Теперь переходим к координатам.
Чтобы создать координаты для круглой области, нужно прописать данные к центру (xy) и указать длину радиуса (R).
Порядок записи координат для атрибута coords будет таким:

<area shape="circle" coords="x,y,R">

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

Для круга №1 возьмите  такие координаты:

x=46, y=48; а длина радиуса - R=35

<map>
<area shape="circle" coords="46,48,35">
</map>

Теперь дадим карте название и привяжем карту к рисунку:

<img src="kartinka-2.gif" usemap="#karta2">
<map name="karta2">
<area href="http://bloggood.ru/" shape="circle" coords="46,48,35">
</map>

Теперь соберем все вместе и пропишем еще координаты к кругу №2 с такими данными x=158, y=75, R=53.

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

Пример:

<html>
<head>
<title> Карта изображения в HTML (навигационные карты). Урок №11</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<img src="kartinka-2.gif" usemap="#karta2">
<map name="karta2">
<area href="http://bloggood.ru/ " shape="circle" coords="46,48,35">
<area href=" http://bloggood.ru/avtor/" shape="circle" coords="158,75,53">
</map>
</body>
</html>

Теперь смотрите на результат.  Нажмите на круг №1 и на круг №2:

[пример]

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

Многоугольная область самая сложная область в навигационной карте.

Для начала нужно указать тип области. Для этого пропишите в атрибуте shape значение «poly»

<map>
<area shape="poly">
</map>

Теперь переходим к координатам.

Порядок записи координат для атрибута coords будет таким:

<area shape="poly" coords="x1,y1,x2,y2,...,xN,yN">

Разъяснение:
x1,y1 - координаты первого угла;
x2,y2 - координаты второго угла;
xN,yN - координаты последнего угла

То есть, для многоугольника №2 это выглядит вот так:

<area shape="poly" coords="x1,y1,x2,y2,x3,y3,x4,y4,x5,y5">

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

Пример:

<map>
<area shape="poly" coords="168,9,232,29,200,97,223,129,153,119">
</map>

Теперь дадим карте название и привяжем карту к рисунку:

<img src="kartinka-3.gif" usemap="#karta3">
<map name="karta3">
<area href="http://bloggood.ru/" shape="poly" coords="168,9,232,29,200,97,223,129,153,119">
</map>

Теперь соберем все вместе и пропишем еще координаты к шестиугольнику №1 с такими данными: x1=54, y1=20, x2=109, y2=20, x3=147, y3=58, x4=109, y4=96, x5=54, y5=96, x6=16, y6=58.

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

Пример:

<html>
<head>
<title> Карта изображения в HTML (навигационные карты). Урок №11</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<img src="kartinka-3.gif" usemap="#karta3">
<map name="karta3">
<area href="http://bloggood.ru/" shape="poly" coords="168,9,232,29,200,97,223,129,153,119">
<area href="http://bloggood.ru/avtor/" shape="poly" coords="54,20,109,20,147,58,109,96,54,96,16,58">
</map>
</body>
</html>

Теперь смотрите на результат.  Нажмите на многоугольник №1 и на многоугольник №2:

[пример]

Возможность комбинирования

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

<img src="kartinka-4.gif" usemap="#karta4">
<map name="karta4">
<area href="http://bloggood.ru/avtor/" shape="circle" coords="46,48,35,">
<area href=" http://bloggood.ru/" shape="rect" coords="153,11,219,127">
</map>

Дополнение с использованием TITLE

Для каждой области можно прописать подсказки, используя атрибут title.

Пример:

<html>
<head>
<title> Карта изображения в HTML (навигационные карты). Урок №11</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<img src="kartinka-4.gif" usemap="#karta4">
<map name="karta4">
<area href="http://bloggood.ru/avtor" shape="circle" coords="46,48,35," title="круг">
<area href=" http://bloggood.ru/" shape="rect" coords="155,12,220,130" title="прямоугольник">
</map>
</body>
</html>

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

[пример]

Вот и все. С картой изображения в HTML (навигационная карта) мы разобрались.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

9 Ответов на комментарий - Карта изображения в HTML (навигационные карты). Урок №11

  1. Евгений

    Здравствуйте! Оч полезная статья! Скажите пожалуйста, а как найти или определить coords?

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Евгений! Координаты я определяю в начале примерно, а потом подгоняю.

    Ответить

  2. Константин

    Здравствуйте Степан, подскажите пожалуйста для SEO нужно в тег area прописывать title и alt как для img? Заранее спасибо!

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Константин! Да, Вы можете прописать в теге area атрибут title и alt.

    Ответить

  3. татьна

    для начинающих не очень всё понятно.Хотелось бы поподробнее про координаты, как вы их вычисляете. :?: Может этому стоит посвятить отдельный урок.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Левая часть экрана, это “y”, верхняя, это “х”. Точка отсчета начинается с левого верхнего угла, координаты которого (0;0). Вот и пробуете. Что еще не ясно?

    Ответить

  4. Павел

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

    <a href="http://bloggood.ru/recepty-css/oformlenie-ssylok-s-plavnym-effektom-dlya-css.html/" 
    
    target=_blank>статьи</a>

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

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    увы, нельзя. Здесь нужно что-то посильнее чем CSS, например, JavaScript

    Ответить

    Павел отвечает:

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

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: ,

Мои цели на 2016 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 600

4). Добиться стабильной посещаемости 2500 человек/сутки

5). Закончить все статьи, которые находятся в черновиках

6). Создать портфолио и мини интернет-магазин шаблонов

7). Создать книгу

8). Добиться стабильной посещаемости 3000 человек/сутки

9). Довести количество статей до 700

10). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 671
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 3683