Учебник по веб дизайну
 Свободное программное обеспечение. Доступно. Бесплатно. Легально.
Учебник
HTML
  Первая страничка
  Форматирование
  Фон и цвет
  Изображения
  Изображение-карта
  Ссылки
  Таблицы
  Списки
  Фреймы
  Внутренние фреймы
CSS
DHTML
JavaScript
SSI
Раскрутка
Справочник
HTML
JavaScript
SSI
Браузеры
Хостинг
Скрипты
JavaScript
PHP
Статьи
SEO
HTML
Flash
Все об Интернет
Новости Интернет
Утилиты
Конструктор
Информер
А так же...
Наши баннеры
Контакты
Гостевая
Реклама на сайте

Изображение-карта

пример изображения-карты

С помощью изображения-карты можно превратить различные части изображения в гиперссылки. На приведенном изображении, каждой иконке соответствует своя ссылка. Рассмотрим, как это реализуется:

<img src="browsers.gif" border=0 width=128 height=32 alt="пример изображения-карты" align="left" usemap="#img_map">
<map name="img_map">
<area shape="rect" coords="0,0,32,32" href="internet_explorer.html" title="Internet Explorer">
<area shape="rect" coords="32,0,64,32" href="netscape.html" title="Netscape">
<area shape="rect" coords="64,0,96,32" href="mozilla_firefox.html" title="Mozilla Firefox">
<area shape="rect" coords="96,0,128,32" href="opera.html" title="Opera">

Подробно рассмотрим приведенный выше пример. Для начала задает графическое изображение с помощью тега IMG. Отличительной особенностью от обычного изображение является наличие свойства usemap имеющего значение-ссылку на карту ссылок. В нашем случае имя карты #img_map и оно обязательно начинается с символа решетка (#). Теперь нужно задать карту ссылок с помощью тега map и его свойства name имеющего значение определенное в теге IMG, но уже без символа решетки (в нашем примере img_map). Каждая ссылка задается с помощью тега area (свойство href) внутри элемента map. Область изображения, служащая гиперссылкой задается свойством coords (координаты), а форма определяется свойством shape.

Приведем таблицу значений свойств тега area:

СвойствоОписание
ALT Альтернативный текст, появляющийся при невозможности загрузить изображение.
COORDS Определяет размер и положение области. Задается в пикселях и отсчитывается от левого верхнего угла изображения. В зависимости от значения свойства SHAPE может принимать следующие наборы значений:
RECT: X1, Y1, X2, Y2, где X1, Y1 - координата левого верхнего угла изображения, а X2, Y2 - правого нижнего угла.
CIRCLE: X, Y, R - координаты цента и радиус круга.
POLY: X1, Y1, X2, Y2, ..., XN, YN - список координат многоугольника.
NOHREF Показывает, что данная область не является гиперссылкой. Совместно с другими областями позволяет задавать сложные области для гиперссылки (напрмер полукруг, кольцо и т.д.).
SHAPE Определяет форму области и может принимать следующие наборы значений:
RECT - прямоугольник;
CIRCLE - круг;
POLY - многоугольник;
DEFAULT - вся облась (рисунок) является гиперссылкой.
TARGER Определяет параметры открытия гиперссылки: _top, _blank, _self, _parent. Описание этих параметров можно посмотреть здесь.
TITLE Текст всплывающей подсказки.

Реклама

Хмурое утро, жена выгоняет интернетчика погулять с собакой. Он долго бродит с ней, потом поднимает палку, кидает ее и командует: - Э-э-э, Яндекс! То есть, Рамблер!! Тьфу, апорт!!!
главная :: наверх :: добавить в избранное :: сделать стартовой :: рекомендовать другу :: карта сайта

Rambler's Top100

Страница сгенерированна за 0.0083 сек.
Сайт оптимизирован под разрешение 800х600 и браузер MS IE 6.0.
Copyright © 2005-2010 originweb.info, design.originweb.info.
Хостинг ruweb.net