Приветствую Вас Гость • Регистрация • Вход
Суббота, 19.10.2019
Главная » 2012 » Декабрь » 20 » Создание карт изображений с помощью html map
15:40
Создание карт изображений с помощью html map
Каждый из нас уже  знает что такое ссылки.Ссылками могут быть и просто какой-то текст, при нажатии на который мы можем попасть на другую страничку. Ссылкой может быть и рисунок и анимированый gif ,но не каждый знает как создать карту изображения с помощью все того же html,и обычного редактора PotoShop В данном случае мы будем смотреть пример с отличного бесплатного  редактора (как на мое мнение ни чем не уступающего PhotoShop)  GIMP

Все это дело у нас будет выглядеть примерно так!Для того что бы увидеть эффект,наведите на каждый отдельный предмет на картинке и нажмите перейти и каждая ссылка на информацию откроется в новом окне

Посмотреть пример


Интересно как так сделать?
Сейчас я Вам расскажу.
Для начало скачиваем нашу программу GIMP с офф сайта .Далее открываем и создаем новый документ на основе 4 слоев,то есть первый основной слой,и три остальных с нашими рисунками.В данном примере я взял футбольный мяч,прямоугольную форму и многоугольник см фото: 


После того как мы создали наш основной рисунок,нам естественно нужно будет добавить в наши (мячик,прямоугольник и слиток золота) например ссылку на информацию.В нашем примере я взял пример из вики и добавил ссылки на историю футбольного мяча,что такое прямоугольник,и все о золоте).И так как же нам вставить теперь эти ссылки в всего навсего одну единственную картинку.А сделаем мы это с помощью web-фильтров в нашем редакторе.И так открываем вкладку Фильтры и выбираем  Веб-карта изображения После того как наш рисунок открылся в новой вкладке мы видим перед собой 3 основных инструмента для нашей картинки,это-кружек,прямоугольник и многогранник с левой стороны панели см фото: 

Скажу Вам сразу, я специально взял такие формы. Дело в том, что можно описать Shape (Формы) только трех видов: RECT (Прямоугольник), CIRCLE (Круг) и POLY (Многоугольник). 

И так идем дальше...Для начало нам нужно на нашем футбольном мяче,прямоугольнике,и многоугольнике обозначить границы нашей ссылки. Для мяча возьмем инструмент круг.Поставим мышку в центре нашего мяча и проведем овал.После того как мы провели наш овал клацаем еще раз мышкой ,и перед нами открывается оконце,с параметрами области №1,то есть сода мы будем вставлять нашу ссылку и корректировать параметры нашей самой ссылки на картинке см фото: 

Дальше проделываем все как и описал выше,но только соответственно выбираем инструмент прямоугольник(для нашей прямоугольной формы),и инструмент многоугольник(для нашей многоугольной формы).Важно:С последним инструментом многоугольник нужно в конце сделать двойной щелчек мышью,после того как обвели все границы ссылки,иначе окно для заполнения не откроется. 
Ну вот почти и все с созданием нашей карты изображений.Сохраняем все это дело(файл,сохранить как к примеру getimage.map).Это и будет наш основной код для вывода нашей картинки с ссылками,открываем его в любом текстовом редакторе после того как сохранили и редактируем под себя.У меня вышел вот такой файл   map 

Code
<img src="getimage.png" width="283" height="240" border="0" usemap="#map" />
<map name="map">
<!-- #$AUTHOR:samosval-->
<area shape="circle" coords="131,45,34" title="Круглая поверхность" alt="История футбольного мяча" href="http://ru.wikipedia.org/wiki/Футбольный_мяч" />
<area shape="rect" coords="173,122,230,196" title="Прямоугольная поверхность" alt="Прямоугольник" href="http://ru.wikipedia.org/wiki/Прямоугольник" />
<area shape="poly" coords="28,150,67,136,97,139,108,164,67,191,20,180" title="Многогранная поверхность" alt="Золотой слиток" href="http://ru.wikipedia.org/wiki/Золото" />
</map>
Важно!!!Эту строку обязательно редактируем под себя-это и есть директория,в которой лежит наша сама картинка
Code
<img src="getimage.png" width="283" height="240" border="0" usemap="#map" />
Ну и соответственно кидаем нашу картинку в указаную директорию.У меня она лежит в корневой,так что путь я к ней не менял.
Ну вот в принципе и все на этом,дальше там где нам нужно вставляем наш полный код ,или же создаем отдельную страницу по Вашему желанию.
Ну и конечно же обьясню значения: 
Определяемая область  Rect (Прямоугольник)
Code
<area shape="rect" coords="173,122,230,196" title="Прямоугольная поверхность" alt="Прямоугольник" href="http://ru.wikipedia.org/wiki/Прямоугольник" />
Определяемой областью тут является   Рoly  (Многоугольник)
Code
<area shape="poly" coords="28,150,67,136,97,139,108,164,67,191,20,180" title="Многогранная поверхность" alt="Золотой слиток" href="http://ru.wikipedia.org/wiki/Золото" />
Определяемой областью тут является Circle (Круг)
Code
<area shape="circle" coords="131,45,34" title="Круглая поверхность" alt="История футбольного мяча" href="http://ru.wikipedia.org/wiki/Футбольный_мяч" /> 
Эти все значения являются координатами (X= ? Y=?),то есть координатами наших углов.Для прямоугольника берется верхний левый и правый нижний,для круглой поверхности берется радиус,в данном случае он равен 34 рх  circle" coords="131,45,34 и для многоугольной берутся координаты всех наших углов.
Надеюсь все поняли .Что не понятно,спрашивайте.

Всего Вам  хорошего до новых встреч!
Категория: Дизайн и оформление сайта | Просмотров: 1575 | Добавил: Samosval |Рейтинг: 5.0/1


Всего комментариев: 0
avatar
    Яндекс.Метрика
Сайт создан в системе uCozЯндекс.Метрика