Создание карты-изображения(активного изображения).

На карте-изображении ссылка присваивается не всему рисунку, а отдельным его частям – горячим областям, которые вы указываете. Т.е. одна большая картинка может содержать несколько ссылок, при щелчках по ним пользователь будет попадать на разные web-страницы (или разные места текущей web-страницы).

Например, на рисунке карты мира можно указать несколько горячих областей. Затем от этих горячих областей назначить ссылки на разные документы (с информацией о местности выделенных областей).

Но чаще карты-изображения используют для объединения нескольких навигационных кнопок в один рисунок. Так достигается единство стиля их оформления.

Например, можно в Photoshop сделать для «шапки» сайта коллаж, и в коллаж включить полосу для горизонтального меню для навигации по сайту (см. рис. 11). В этой полосе (ещё в Photoshop) ввести названия разделов сайта. Затем в Dreamweaver, вставить в web-страницу эту «шапку»-коллаж, на надписи (названия разделов сайта) назначить горячие области и настроить на них ссылки на соответствующие web-страницы (разделы) сайта.

Рис. 11. Карты-изображения позволяют связывать одну большую картинку
с множеством web-страниц.

Для создания карты изображения:

1. Вставьте рисунок, который хотите использовать в качестве карты-изображения. Выделите его и нужные настройки карты (Map) отразятся на панели свойств (см. рис. 12).

Если панель закрыта, нажмите Ctrl+F3. Если на панели поле Map и инструменты создания горячих областей не видны, щелкните по кнопке со стрелкой (s) в правом нижнем углу - панель развернётся полностью.

Рис. 12

2. В поле Map на панели свойств введите имя вашей карты.

3. Включите один из инструментов создания областей и на рисунке очертите им горячую область.

При этом для создания прямоугольной области выберите инструмент , для создания округлой области выберите Oval . Для создания областей неправильной формы выберите инструмент Многоугольник , щелкните по рисунку, чтобы определить начальную точку области; потом щелкайте по периметру нужной области. Щелкните по инструменту Pointer, чтобы замкнуть многоугольник.

4. В поле Link на панели свойств назначьте на горячую область ссылку: щелкните по кнопке 1, откроется окно, где укажите файл для ссылки. В поле Altна панели свойств введите альтернативное слово(а) для горячей области (оно будет всплывать в браузере при наведении на него мышкой).

Горячие области изображаются в виде полупрозрачных цветных фигур на изображении. Эта функция лишь позволяет проще видеть и выделять нужные области, в браузере они не видны.

5. Щелкните по рисунку за пределами текущей области. Для создания других областей со ссылками повторите шаги 2 - 4.

После создания карты-изображения её горячие области можно изменять:

§ Щелкнув по области, на панели свойств можно сменить ссылку и любые др. свойства.

§ Для перемещения области щелкните по ней и перетащите.

§ Щелкните правой кнопкой мыши по области и выберите Bring To Front (На передний план) или Send То Back (На заднийплан), чтобы определить порядок наложения областей.

§ Для изменения формы области выделите ее инструментом Pointer (Указатель) и перетащите метки в углах области в нужных направлениях.