17.08.2017 18:34:39   
Навігація
Погода
Баштанка

Опитування
Ви потрапили сюди шукаючи:

Інформацію про Баштанку
Інформацію про Баштанку
33% [5 голосів]

Друзів з м. Баштанки
Друзів з м. Баштанки
27% [4 голосів]

Випадково потрапив
Випадково потрапив
7% [1 голос]

Фото Баштанщини
Фото Баштанщини
20% [3 голосів]

Товариш розповів
Товариш розповів
13% [2 голосів]

Всього голосів: 15
Для участі в опитуваннях Ви повинні авторизуватися
Розпочато: 30.12.2008 12:07
Зараз на сайті
Гостей: 2

Користувачів: 0

Всього користувачів: 119
Новий користувач: getdallcalmuzz1978
Останні оголошення
Распродажа! Каждому ...
Распродажа! Каждому ...
Кованая подставка дл...
Держатель для балкон...
Подставка для нового...
На правах реклами


Структура статей
Усі статті » WEB-Майстру » Основи HTML (Розділ 3)
Основи HTML (Розділ 3)
9. Зображення і гіперпосилання.

Звичайно ж обробка зображень, створення барвистих ілюстрацій, анімація і банеротворчість є невід'ємною частиною web-будівництва. Оскільки дизайн як такий вимагає серйозного опрацювання. Тому тему дизайну я доки освітлювати не буду. Це вже творча сторона, а зараз ми доки розглядаємо ази. Вони дозволять Вам займатися дизайном самостійно. Тому зараз розглянемо один прийом, що дозволяє, використовувати частини одного і того ж цілісного зображення для посилань на різні сторінки. На цьому в принципі ми завершимо розгляд зображень.

Для цього в мові HTML є тег <map>. Він включає тег <area>.

Розглянемо простий малюнок: Його розмір 170x50 пікселів. Зараз стане зрозуміло до чого я веду. Нехай квадрат, круг і трикутник посилаються на різні сторінки: link1.html, link2.html і link3.html.

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

1. href - це і є наше гіперпосилання;
2. shape - це форма (вона буває трьох видів - прямокутною (rect), круглою (circle) і полігон (poly));
3. coords - координати для завдання положення форми на зображенні;
4. alt - спливаюча підказка.

Таким чином, наше зображення виходить як карта (<map>), з нанесеними на неї за допомогою координат (що задаються атрибутами тега ) різних плоских фігур, як простих, так і складних. І саме область, яка обмежена цією фігурою і буде посиланням на бажану сторінку. А пов'язати картинку з картою можна за допомогою атрибуту тега <img> usemap, про яке я в попередніх розділах доки не згадував. Передбачимо, що файл картинки називається segment.gif, тоді повний код сегментації зображення буде:

<img src= segment.gif usemap="#segm" border=0>
<map name="segm">
<area shape="rect" coords="4,2,50,50" href="#" alt="Посилання 1">
<area shape="circle" coords="78,26,24" href="#" alt="Посилання 2">
<area shape="poly" coords="132,5,101,47,164,46" href="#" alt="Посилання 3">
</map>


Звернете увагу на запис usemap="#segm". Без значка # нічого працювати не буде. А що таке segm? Так ми назвали нашу карту <map name="segm">. Ми бачимо на картинці три фігури. До них-то і прив'яжемо наші посилання. Перша фігура - це прямокутник (rect). Координати прямокутника задаються двома крапками: координатами X і Y верхнього лівого кута і правого нижнього. Я не випадково на початку зробив акцент на розміри зображення. Лівий верхній кут зображення має координати (0, 0), правого нижнього (169 49). Чому не 170 і 50? Тому, що відлік починається з нуля. А наш квадратик трішки зміщений від лівого і верхнього кута малюнка, тому по координаті верхнього лівого кута ми бачимо зсув - 4 (по X і 2 по Y). Координати кола (circle)задаються за допомогою координат X і Y центру кола і радіусом. Зрозуміло в нашому випадку радіус не повинен перевищувати висоти зображення. Полігон (poly) в принципі може мати скільки завгодно багато крапок. У нашому випадку їх три, але записуємо ми шість значень - X і Y через кому. Програми редактори типу Dreamweaver допоможуть Вам розставити координати без зусиль. Проте розуміти суть що відбувається все-таки потрібно. В атрибуту href є значок #. Замість нього можна підставити link1.html, link2.html і link3.html. А сам цей значок означає, що посилання приводить на саму себе. Я так записав, щоб Ви не нервували, якщо Вас почне відводити на сторінки, яких немає або які Вам доведеться додатково створити, щоб не отримувати повідомлення про помилки. До того ж так зручніше бачити, як реагує картинка на клацання миші. Наведіть курсор миші на картинку, поміщену вище і Ви зможете побачити як все працює.
Коментарі
Коментарі відсутні
Додати коментар
Щоб отримати можливість додавання коментарів, будь ласка, спочатку авторизуйтесь на сайті через власний обліковий запис.
Оцінки
Доступ до оцінювання мають лише зареєстровані користувачі.

Будь ласка, авторизуйтесь , щоб отримати можливість оцінювати.

Оцінки відсутні
Авторизація
Ім`я

Пароль



Не пам`ятаєте
ім`я/пароль?

 Відновлення 
Випадковий анекдот
Студента запитують:
- Що ти робитимеш, коли тобі мільйон баксів дадуть?
- Як що? Борги віддам.
- А решта?
- А решта підождуть.
Переглянути всі »
Календар
<< Серпень 2017 >>
Пн Вт Ср Чт Пт Сб Нд
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      
Міні-чат
Для спілкування Ви маєте авторизуватися.

01-01-2011 16:04
Вітаю З Новим роком!

24-08-2010 14:48
Вітаю з Днем Незалежності!

27-05-2010 09:50
Привіт! Настрій чудовий. Great

26-05-2010 15:02
Привет Баштанка как там у вас настроение. Задоволення

28-04-2010 23:54
То що, ніхто не знає відповідь на загадку.

Лічильники
SmartTop.info

Корисні посилання

© 2008-2017 "БіРіП"


  Завантажено за 0.09 сек.

3,809,141 відвідувачів