Уроки PhotoFiltre Studio


Создание навигационной карты (Imagemap)

Откройте HTML код страницы, на котором будет располагаться карта. Вероятнее всего вы уже указали логотип сайта. Код примерно выглядит следующим образом: 
<img src="адрес изображение" border="0">
Теперь добавьте к этому коду атрибут usemap="#" Дайте название usemap. К примеру, header: 
<img src="адрес изображения" usemap="#header" border="0">
Мы указали, что у этого изображения карта имеет название header, теперь нужно добавить в код саму карту: 
<map name="header">

<area shape="rect" coords="xx,xx,xx,xx" href="URL" alt="">

<area shape="rect" coords="xx,xx,xx,xx" href="URL" alt="">

<area shape="rect" coords="xx,xx,xx,xx" href="URL" alt="">

<area shape="rect" coords="xx,xx,xx,xx" href="URL" alt="">

</map>
Между тегами и располагается эта карта.

coords - это координаты ссылки. Их мы можем узнать, открыв PhotoFilter.

Откройте изображение (ваш логотип), на котором уже присутсвует навигационное меню. Я использовала обычную графическую полоску с текстом:



Активируйте инструмент выделение (A) и выделите первое слово (ссылку):



В окне программы в самом низу есть статус-бар, который указывает местоположение курсора на изображении и координаты выделенного фрагмента (отмечено красным):



Именно эти координаты нам и потребуются. Вернемся к коду и запишем координаты ссылки вместо иксов:

<area shape="rect" coords="11,16,77,40" href="URL" alt="">
Проделайте это с каждой ссылкой.

Полный код будет выглядеть так: 
<img src="адрес изображения" usemap="#header" border="0">

<map name="header">

<area shape="rect" coords="xx,xx,xx,xx" href="URL" alt="">

<area shape="rect" coords="xx,xx,xx,xx" href="URL" alt="">

<area shape="rect" coords="xx,xx,xx,xx" href="URL" alt="">

<area shape="rect" coords="xx,xx,xx,xx" href="URL" alt="">

</map>
Не забывайте в coords указать свои координаты :)