|
|
|
|
Как в HTML сделать Изображения-Карту. Автор: Андрей Краснокутский Дата: 2011-01-10 Создаём карту ссылок из изображения (картинки).Карты - это способ сделать различные части одного графического изображения, разными гиперссылками. Они позволяют выделить отдельные области изображений и определить для каждой из них свое действие. В данном случае мы будем рассматривать возможность создания ссылок из различных участков одного графического файла (картинки). Допустим у Вас имеется например такой графические файл (или примерно такой):
В данном случае картинка взята произвольно, просто для примера. Здесь Вы видите скриншоты разных сайтов, объединенных на одной общей картинке. Допустим Вам нужно сделать, чтобы при клике на каждый из сайтов, изображенных на этой картинке (уменьшенное изображение), человек попадал именно на этот сайт. Т.е. разбить всю картинку примерно так:
Делается это достаточно просто. Пускай наше изображение, точнее графический файл, называется karta2.jpg . Размер картинки используемой здесь 400х255 пикселей. Сначала давайте посмотрим Листинг 1 такой разбивки: Листинг 1.
Как видите, чтобы создать карту, нужно вставить в тэг <img> атрибут usemap="#name", где name - имя карты (значок # обязателен) в данном случае имя графического файла карты: karta2.jpg . Я пропускаю остальные атрибуты в этом тэге, Вы их должны знать, т.к. о них уже рассказывалось в предыдущих уроках. Далее описываем все активные области карты (в данном случае у нас их 8). Начинаем с открывающегося тэга <map name="karta2"> (здесь повторяется имя картинки, но уже без значка #), а заканчиваем закрывающимся тэгом </map>. Между тегами <map> </map> описывается каждая активная область (ссылка) изображения, тегами: <area shape="форма" coords="координаты" href="URL адрес" title="альтернативный текст">. Элемент <area> имеет следующие аттрибуты и их значения:
В результате вот что у нас получилось, покликайте по пиктограммам:
В качестве примера вместо ссылки Link 1 , я вставил реальную ссылку, ведущую на поздравительный сайт, который совсем недавно помогал делать одному с воему другу к Новому году. Посмотреть реальный пример работы можно здесь. Каждая из миниатюрных фотографий на главной странице, ведёт на отдельную web-страницу с персональными поздравлениями конкретному человеку, т.е. маленькая фотография я вляется отдельной ссылкой. А вместо ссылки Link 8 , для наглядности, я сделал ссылку на главную страницу своего сайта http://www.LuksWeb.ru/ Остальные ссылки Link 2 - Link 7 , никуда не ведут, просто не прописать URL адреса. Как Вы понимаете ссылки можно сделать, как абсолютные, так и относительные, разницы нет никакой. Изображения карты, достаточно широко распространены и используются довольно часто в практике web-мастеров. Ведь как Вы поняли, в качестве ссылок, можно создавать довольно сложные области, кроме того, на одной карте всегда можно комбинировать и выделять фигуры любой конфигурации. Для того, чтобы рассчитать точно координаты нужной части изображения существуют специальные программы. Одна из них называется MapEdit. Но я вполне обхожусь и визуальным редактором Dreamweaver, здесь для этого есть все необходимые функции.
Читайте так же: Почтовая Рассылка - Главный инструмент Интернет-Бизнесмена. Операция конкатенация (соединения) в PHP. Как заработать на электронных книгах? Заголовок HTML-документа. Что в нем может быть интересного? Как изменить внешний вид курсора. "Прячем" счетчики с помощью CSS.
Просмотров: 24835 Поделитесь этой информацией со своими друзьями! Комментарии к этой статье (уроку): Комментарии добавил(а): Прохожий Классная статья. Обязательно применю на своём сайте! Комментарии добавил(а): Константин Очень хорошая статья, спвсибо, Андрей! Комментарии добавил(а): Torysan Здравствуйте, Андрей! Хотела почитать эти статьи: "Заголовок HTML-документа. Что в нем может быть интересного?" и "Как изменить внешний вид курсора.", а кликая по ним перехожу на сайт http://www.mainlinki.ru/?id=73 ...и ничего такого я там не нашла( Комментарии добавил(а): АндрейК Битые ссылки исправил, спасибо что подсказали Комментарии добавил(а): Дмитрий в одном месте shaRe... Комментарии добавил(а): Юрий Андрей, здравствуйте! Спасибо большое Вам за такие ценные уроки, действительно очень мне помогли. У меня есть к Вам просьба, если Вас не затруднит, обясните мне пожалуйста по <map> как мне справитсья с такой задачей: у меня есть круг, я хочу разделить его примерно на равные части (в центре квадраты, а около границ круга - обрезанные грацницей квадраты(надеюсь это не очень глупо звучит :D)) И к каждой части привязать возможность поменять ее цвет или загружить картинку. Как это сделать и вообще возможно ли это? Думаю Вам,как профессионалу это не составит проблем. Я совсем недавно занялся webmastering-ом, поэтому нуждаюсь в Вашем совете. Если не найдете времени подумать над моим вопросом,сообщите пожалуйста, я попробую найти кого-нибудь еще. Огромное спасибо!!! С Уважением, Юрий Комментарии добавил(а): АндрейК Юрий, напишите мне по эл. почте, здесь не очень удобно обсуждать технические подробности вашего вопроса. Комментарии добавил(а): Ivan Как мен определить координаты сущиствует ли какя либо програма чтобы сделал всё сама Комментарии добавил(а): Ivan Вот спустя некоторое время сам всё понял Андрей ваша информация самая лучшая что я за 2 дня находил в инете огромное вам спасибо если что приезжайте в испанию я вам по туризму помогу вот сайт http://www.gidvipturism.com На это время только строитса Комментарии добавил(а): Сергей Автоматический генератор map area http://crazysquirrel.ru/#!image_to_map_area Комментарии добавил(а): Артём есть ли программысайты для быстрого определения координат у сложных фигур? Комментарии добавил(а): newJS Артём, конечно есть, берите _http://newjs.my1.ru/load/generator_kart_html/1-1-0-4 Добавить Ваш комментарий: |
Новости сайта Домены 
Google Adsense |
Навигация
Видео Курсы
Последние заметки
Новости сайта
Архив 2016 год: 2015 год: 2014 год: 2013 год: 2012 год: 2011 год: 2010 год: 2009 год: 2008 год: Сайты друзей Наши ссылки
Если Вам понравился  Наши Аттестаты
|
|
Разрешается полное или частичное копирование материалов сайта с обязательным |