Початківцю web-майстру-підручник html для початківців-робимо частина картинки посиланням

Підручник по Html для початківців. Найпростіше.

Карти. Як частина картинки зробити посиланням.

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

Навігаційні карти задаються контейнером . Тег

Далі перейдемо до візуальних прикладів. Для початку нам потрібна картинка. Візьмемо таку:

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

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

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

Відлік ведеться від лівого верхнього кута картинки, вважайте його початком координат (0; 0). Якщо ми працюємо з прямокутною областю, то нам потрібні координати верхнього-лівого і нижнього-правого кутів області. Порядок запису координат для атрибута coords наступний:

У нашому прикладі у прямокутника №1 координати такі:
x1 = 25, y1 = 36, x2 = 114, y2 = 98

Значить, код буде виглядати наступним чином:

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

Але щоб частина картинки стала посиланням, нам потрібно ще вказати ім'я карти і зв'язати її з картинкою. У тега

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

. Купа тексту і всякого змісту, або нічого.

Дивимося результат (натисніть на прямокутник №1):

Тепер самі пропишіть для прямокутника №2 для тренування (x1 = 153, y1 = 11, x2 = 219, y2 = 127), а потім підемо далі.