Разметка рисунка для создания нескольких гиперссылок
Одному рисунку, если он достаточно большой, можно назначить несколько гиперссылок. Каждая гиперссылка будет назначена определеннойобласти рисунка. Это очень удачный прием, например, при создании карты Web-узла. Вы можете действительно нарисовать в графическом редакторе схему структуры Web-узла и назначить элементам этой схемы гиперссылки на соответствующие Web-страницы.
Выполните следующие действия.
1. Подберите или создайте необходимый рисунок.
2. Добавьте рисунок на Web-страницу с помощью дескриптора <IMG>.
3. В любом месте HTML-кода страницы в разделе <BODY> создайте элемент разметки страницы с уникальным именем: <МАР name=' имя_разметчика '>…</ MAP >.
4. В дескрипторе <IMG> рисунка присвойте атрибуту usemap имя элемента разметки. (Имя элемента разметки следует после символа #.)
5. Между открывающим и закрывающим дескрипторами элемента разметки рисунка добавьте области с помощью дескрипторов <AREA> и установите следующие атрибуты областей:
● shape — присвойте стандартные значения формы области rect(прямоугольник), circle (окружность), polygon (многоугольник) и default(оставшаяся незанятая часть рисунка);
● coords — пары координат х иу в пикселях для верхней левой и нижней правой точек прямоугольника, всех точек многоугольника и центральной точки с радиусом окружности;
● href— URL-адрес гиперссылки;
● title — текст экранной подсказки.
Профессиональные редакторы Web-страниц, такие как Microsoft FrontPage, позволяют выполнять разметку рисунков в режиме WYSIWYG. Если для редактирования кода HTML страницы вы используете простой текстовый редактор, то вам придется запастись терпением и калькулятором. Откройте рисунок в графическом редакторе и определите координаты областей с учетом того, что за точку отсчета принимается верхний левый угол. Если на странице размеры рисунка изменены с помощью атрибутов widthи height,вам придется пропорционально пересчитать координаты областей.
В листинге 5.9 показан пример разметки рисунка для создания карты Web-узла.
Дата добавления: 2016-01-29; просмотров: 602;