Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Запрос должен быть не менее 4-х символов.

RSS-лента

Сегодня:        Добавить в Избранное       Написать Автору        Обмен валют        Оплата сервисов

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

Автор: Андрей Краснокутский

Дата: 2011-01-10

Создаём карту ссылок из изображения (картинки).

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

Создаём из картинки карту изображений

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

Разбиваем всю карту на отдельные участки

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

Листинг 1.

<img src="karta2.jpg" border="0" width="400" height="255" ALT="Пример изображения-карты" usemap="#karta2">
<map name="karta2">
<area shape="rect" coords="7,8,117,85" title="Прогнозы кота Сеньки на 2011 год" href="http://sbikov.russ67.ru" target="_blank">
<area shape="rect" coords="142,6,253,86" title="Link 2"href="URL">
<area shape="rect" coords="280,8,389,86" title="Link 3" href="URL">
<area shape="rect" coords="72,97,182,156" title="Link 4" href="URL">
<area shape="rect" coords="213,97,322,157" title="Link 5" href="URL">
<area shape="rect" coords="21,177,129,246" title="Link 6" href="URL">
<area shape="rect" coords="142,175,253,246" title="Link 7" href="URL">
<area shape="rect" coords="267,176,377,246" title="Учимся делать сайты и зарабатывать в Интернете" HREF="http://www.luksweb.ru" target="_blank">
</map>

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

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

Между тегами <map> </map> описывается каждая активная область (ссылка) изображения, тегами: <area shape="форма" coords="координаты" href="URL адрес" title="альтернативный текст">.

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

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 2 - Link 7 , никуда не ведут, просто не прописать URL адреса.

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

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

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

 

Читайте так же:

Почтовая Рассылка - Главный инструмент Интернет-Бизнесмена.

Операция конкатенация (соединения) в PHP.

Как заработать на электронных книгах?

Заголовок HTML-документа. Что в нем может быть интересного?

Как изменить внешний вид курсора.

"Прячем" счетчики с помощью CSS.

 

Просмотров: 19662


Поделитесь этой информацией со своими друзьями!


Комментарии к этой статье (уроку):

Комментарии добавил(а): Прохожий
Дата: 2011-01-10

Классная статья. Обязательно применю на своём сайте!

Комментарии добавил(а): Константин
Дата: 2011-01-15

Очень хорошая статья, спвсибо, Андрей!

Комментарии добавил(а): Torysan
Дата: 2011-07-14

Здравствуйте, Андрей! Хотела почитать эти статьи: "Заголовок HTML-документа. Что в нем может быть интересного?" и "Как изменить внешний вид курсора.", а кликая по ним перехожу на сайт http://www.mainlinki.ru/?id=73 ...и ничего такого я там не нашла(

Комментарии добавил(а): АндрейК
Дата: 2011-07-15

Битые ссылки исправил, спасибо что подсказали

Комментарии добавил(а): Дмитрий
Дата: 2012-04-05

в одном месте shaRe...

Комментарии добавил(а): Юрий
Дата: 2012-05-19

Андрей, здравствуйте! Спасибо большое Вам за такие ценные уроки, действительно очень мне помогли. У меня есть к Вам просьба, если Вас не затруднит, обясните мне пожалуйста по <map> как мне справитсья с такой задачей: у меня есть круг, я хочу разделить его примерно на равные части (в центре квадраты, а около границ круга - обрезанные грацницей квадраты(надеюсь это не очень глупо звучит :D)) И к каждой части привязать возможность поменять ее цвет или загружить картинку. Как это сделать и вообще возможно ли это? Думаю Вам,как профессионалу это не составит проблем. Я совсем недавно занялся webmastering-ом, поэтому нуждаюсь в Вашем совете. Если не найдете времени подумать над моим вопросом,сообщите пожалуйста, я попробую найти кого-нибудь еще. Огромное спасибо!!! С Уважением, Юрий

Комментарии добавил(а): АндрейК
Дата: 2012-05-20

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

Комментарии добавил(а): Ivan
Дата: 2012-07-26

Как мен определить координаты сущиствует ли какя либо програма чтобы сделал всё сама

Комментарии добавил(а): Ivan
Дата: 2012-07-26

Вот спустя некоторое время сам всё понял Андрей ваша информация самая лучшая что я за 2 дня находил в инете огромное вам спасибо если что приезжайте в испанию я вам по туризму помогу вот сайт http://www.gidvipturism.com На это время только строитса

Комментарии добавил(а): Сергей
Дата: 2014-04-14

Автоматический генератор map area http://crazysquirrel.ru/#!image_to_map_area

Комментарии добавил(а): Артём
Дата: 2015-08-25

есть ли программысайты для быстрого определения координат у сложных фигур?

Комментарии добавил(а): newJS
Дата: 2015-08-30

Артём, конечно есть, берите _http://newjs.my1.ru/load/generator_kart_html/1-1-0-4

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

Введите сумму чисел с картинки:
Введите сумму чисел

GudzonPartner.com

Новости сайта


05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"


Почтовая рассылка

Новинка!
Как реально заработать
в Интернете?
"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

SmartResponder.ru
Ваш e-mail: *
Ваше имя: *

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense



Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

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

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео Курс по созданию собственного Информационного Бизнеса в Интернете
Как заработать деньги в Интернете?
Создай свой ИнфоБизнес


Хотите заработать?
2-х Уровневая
Партнерская программа!

Присоединяйтесь.


Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

RSS Лента Новостей сайта www.LuksWeb.ru

Наши новости в Твиттере

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Деревянные дома от СПК "Ванда"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты


Проверить аттестат

 

Аттестован системой Z-PAYMENT
Проверено Z-PAYMENT