Засобі навігації на 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>
Далі вже тренуватимемося на конкретних прикладах.
Спершу нам потрібна картинка. Візьмемо таку:
Картинка проста - всього лише блакитний прямокутник (240х140 пікселів). Уявіть, що прямокутники №1 і №2, намальовані на нім, - це зображення яких-небудь кнопок, а блакитне - якийсь складний фон. Аби не створювати складну таблицю (про них, про таблиці, ми поговоримо трохи пізніше), ви вирішили не різати картинку на багато частин і не вичленяти кнопки, ви вирішили поступити простіше - створити навігаційну карту, де області №1 і №2 (прямокутники) будуть засланнями.
Отже, ми вже знаємо, що геометричні області і те, куди користувач попаде при натисненні на них, визначає тег <area>, природно, за допомогою своїх атрибутів. Це атрибути shape і coords.
Атрибут shape - визначає форму області: чи буде вона прямокутником (shape="rect"), довкруги (shape="circle") або багатокутником (shape="poly"). Зараз ми працюватимемо з прямокутною областю, тому:
<map>
<area shape="rect">
</map>
Атрибут coords - визначає координати (положення нашої геометричної форми). Число координат і порядок їх значень залежать від вибраної нами форми.
Вважаю, що це всім повинно бути ясно. Відлік ведеться від лівого верхнього кута картинки, вважайте його початком координат (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">