Засобі навігації на web-сторінках

Але поговоримо особливо про картинки, багато хто з вас, напевно, стикався з таким явищем: коли натискуєш на маленьку картинку, то завантажується велика в тому ж або в новому вікні. Як це робиться? Тут жодних хитрощів: робимо засланням картинку (допустимий small.jpg) і посилаємося на іншу картинку (допустимий big.jpg):

<а href="big.jpg"> <img src="small.jpg"> </a>

В цьому випадку велика картинка відкриється в тому ж вікні. Але як же зробити так, щоб картинка (або будь-який інший файл-документ) відкрилася в новому вікні? Річ у тому, що в тега <a></a> є атрибут target:

<а href="big.jpg" target="_blank"> <img src="small.jpg"> </a>

Отже, target="_blank" - вказує на те, що документ (картинка в нашому випадку), на який веде заслання, відкриється в новому вікні броузера. У наш великий приклад я це вводити не буду, оскільки вважаю, що ви вже можете і повинні самостійно підставляти в код зміни.

Ми вже говорили про картинки і том, як картинку зробити засланням. Тепер ми поговоримо про карти, але не игральных, на жаль деяких.

Ви, можливо, знаєте, що можна зробити так, щоб при натисненні на різні області (частини) однієї і тієї ж картинки, ви потрапляли на різні сторінки, це називається - навігаційна карта. Розмова про те, як створювати навігаційні карти, розтягнеться на декілька глав, але не лякайтеся, насправді це зовсім не важко.

Отже, спочатку теорія.

Навігаційні карти задаються тегом <map></map>. Тег <map> включає себе тег(и) <area>, які визначають геометричні області усередині карти (у цій главі це будуть прямокутники) і заслання, пов'язані з кожною областю (тобто куди ви попадете при натисненні на яку-небудь частину нашої карти).

<map>

<area ...>

<area ...>

...

<area ...>

</map>

Далі вже тренуватимемося на конкретних прикладах.

Спершу нам потрібна картинка. Візьмемо таку:

засобі навігації на web-сторінках - student2.ru

Картинка проста - всього лише блакитний прямокутник (240х140 пікселів). Уявіть, що прямокутники №1 і №2, намальовані на нім, - це зображення яких-небудь кнопок, а блакитне - якийсь складний фон. Аби не створювати складну таблицю (про них, про таблиці, ми поговоримо трохи пізніше), ви вирішили не різати картинку на багато частин і не вичленяти кнопки, ви вирішили поступити простіше - створити навігаційну карту, де області №1 і №2 (прямокутники) будуть засланнями.

Отже, ми вже знаємо, що геометричні області і те, куди користувач попаде при натисненні на них, визначає тег <area>, природно, за допомогою своїх атрибутів. Це атрибути shape і coords.

Атрибут shape - визначає форму області: чи буде вона прямокутником (shape="rect"), довкруги (shape="circle") або багатокутником (shape="poly"). Зараз ми працюватимемо з прямокутною областю, тому:

<map>

<area shape="rect">

</map>

Атрибут coords - визначає координати (положення нашої геометричної форми). Число координат і порядок їх значень залежать від вибраної нами форми.

засобі навігації на web-сторінках - student2.ru

Вважаю, що це всім повинно бути ясно. Відлік ведеться від лівого верхнього кута картинки, вважайте його початком координат (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>

Тепер пропишемо, куди посилатиметься наша область, для цього нам знадобиться вже знайомий нам атрибут href:

<map>

<area href="drugoy_document.html" shape="rect" coords="25,36,114,98">

</map>

Все б добре, але це все ще не досить, аби частина картинки стала засланням, нам потрібно ще вказати ім'я карти і пов'язати її з картинкою.

В тега <map> є атрибут name - ім'я карти, давайте назвемо карту - karta1:

<map name="karta1">

<area href="drugoy_document.html" shape="rect" coords="25,36,114,98">

</map>

Для того, щоб пов'язати карту з картинкою, треба використовувати атрибут usemap="#имя_карты" для картинки:

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

Наши рекомендации