Macromedia Dreamweaver MX

Карты-изображения

Изображение-гиперссылка — это простейший случай графических гипер­ссылок, применяемых сейчас в Web-дизайне. Более сложным случаем явля­ются активное изображение и карта-изображение, сложная графическая ги­перссылка, представляющая собой изображение, разбитое на части, причем каждая часть является гиперссылкой и указывает на свой интернет-адрес. Например, можно сделать красивую заставку и разместить на ней надписи, соответствующие разделам сайта. Такие части, представляющие собой от­дельные гиперссылки, называются "горячими областями".

Для создания карты-изображения используются обычные графические изо­бражения, созданные в любом графическом редакторе. Информация о ме­стонахождении, форме, размерах "горячих областей" и интернет-адресах, на которые они указывают, хранится в HTML-коде страницы.

Dreamweaver позволяет очень просто создать карты-изображения. Нужные "горячие области" рисуются поверх изображения, после чего остается только ввести интернет-адреса, на которые они будут указывать.

В данный момент давайте не будем использовать на своих Web-страницах карты-изображения. Однако пример создания привести необходимо, поэто­му мы создадим специальную Web-страничку и специальное изображение для учебных нужд. Файл изображения называется Map. gif, а файл странич­ки — 4.2.htm. Эта страничка не будет содержать ничего, кроме изображения (рис 4.11).

Разместить на изображении "горячие области" нам помогут несколько эле­ментов управления, находящиеся в левом нижнем углу редактора свойств и пока еще нами не рассмотренные. Теперь пришла пора разобраться с ними (рис. 4.12).

Мар

[K QIOM

Рис. 4.12. Элементы управления редактора свойств, использующиеся для создания "горячих областей"

Прежде всего, рассмотрим четыре кнопки, расположенные вдоль нижней границы окна редактора свойств. Они поделены на две неравные группы. Группа, находящаяся правее и состоящая из трех кнопок, позволяет размес­тить на изображении соответственно прямоугольную, круглую и много­угольную "горячую область". Единственная кнопка, расположенная левее, позволяет манипулировать уже созданными "горячими областями".

Так как же разместить "горячую область"? Очень просто. Давайте начнем с прямоугольной. Щелкните на кнопке с изображением прямоугольника, за­тем щелкните по графическому изображению и, не отпуская левой кнопки мыши, протащите ее, пока не захватите всю область изображения, которую хотите сделать "горячей". Вы заметите, что за курсором мыши "тянется" светло-синяя линия. "Охватив" нужную область (в нашем случае, надпись "Сведения об авторе"), отпустите кнопку мыши, и выбранная вами область тотчас закрасится светло-синим.

После этого, как вы заметили, Dreamweaver подставит в поле ввода Мар строку "Мар". Что она значит? Это уникальное имя изображения-гипер­ссылки, которое будет использоваться Web-обозревателем. Если вы плани­руете на своей странице только одну карту-изображение, можете оставить это имя по умолчанию, в противном случае дайте ей уникальное имя, хотя бы "Mapl". Заметьте, что в таких именах допускаются только латинские буквы, цифры и знаки подчеркивания, причем начинаться имя должно с буквы.

Но Dreamweaver не только сгенерировал уникальное имя для карты - изображения. Он еще и в очередной раз изменил вид редактора свойств (рис. 4.13). Теперь вы можете задать параметры только что созданной "горя­чей области".

Все элементы управления нового редактора свойств вам уже знакомы. Это поле ввода Src, используемое для ввода интернет-адреса, раскрывающийся список Target, задающий цель гиперссылки, и поле ввода Alt, где вводится "альтернативный" текст. Здесь все понятно.

Разобравшись с тем, как вводятся параметры "горячей области", снова обра­тим внимание на изображение и саму "горячую область". Вы уже, наверно, заметили, что по углам прямоугольника, представляющего собой эту самую "горячую область", расположены небольшие синие квадратики — маркеры изменения размера. "Захватив" любой такой маркер мышью, вы можете из­менить размеры "горячей области". А чтобы переместить ее на другое место, просто перетащите ее мышью. Однако перед всеми этими операциями про­верьте, что из кнопок, показанных на рис. 4.12, нажата та, на которой изо­бражена стрелка, и, если нет, нажмите ее.

Но пора двигаться дальше. Введите в поле Src имя файла Web-страницы сведений об авторе (4.l. htm) и нажмите клавишу <Enter>.

Теперь добавим на наше изображение круглую "горячую область". Для этого нажмем кнопку с изображением круга и точно так же "протащим" мышь по изображению, охватив надпись "E-mail". Dreamweaver поместит круглую об­ласть там, где мы ему указали, и активизирует ее, разместив по четырем сторонам круга маркеры изменения размеров.

Вы можете изменять размеры и местоположение круглой "горячей области" так же, как и прямоугольной. Редактор свойств имеет в этом случае такой же вид (см. рис. 4.13). Поэтому мы не будем здесь останавливаться. Введите в поле ввода Src почтовый адрес Ивана Ивановича и нажмите клавишу < Enter >.

Многоугольная "горячая область" создается несколько сложнее. Нажав кнопку с изображением многоугольника, прежде всего, щелкните мышью в месте, где должна располагаться первая из угловых точек многоугольной области. После этого там появится синяя точка — начало нашего много­угольника. Затем щелкните мышью там, где должна быть вторая угловая точка, и Dreamweaver проведет между этими двумя точками линию. Далее вам останется щелкнуть в местах расположения остальных угловых точек многоугольника, a Dreamweaver сам проведет между ними линии, которые и образуют нужную нам многоугольную "горячую" область. Впоследствии вы можете перетащить мышью любую точку этой области. Вот только вставить новую или удалить старую угловую точку вы уже не сможете — вам придет­ся удалить созданную "горячую" область и создать новую.

Выделите многоугольную "горячую область", если она еще не выделена, введите в поле ввода Src имя файла 3.l. htm — нашей главной страницы и нажмите клавишу <Enter>. Наша карта-изображение закончена. То, что по­лучилось, показано на рис. 4.14.

После этого можно вызвать Web-обозреватель для просмотра нашей стра­ницы и испытать нашу карту-изображение в действии. Сделайте так — она действительно работает!

Осталось описать совсем немного дополнительных функций, предлагаемых Dreamweaver для работы с картами-изображениями.

С помощью пункта Image Map Name контекстного меню вы можете изме­нить имя "горячей области", если редактор свойств недоступен. При выборе этого пункта на экране появится диалоговое окно Change Attribute, пока­занное на рис. 4.15. Введите новое значение атрибута (в нашем случае — имени "горячей области") и нажмите кнопку ОК.

<body> <тар> <агеа> [280 * 219» ЗК/1 sec /fr

Рис. 4.14. Готовая карта-изображение

Пункт Глпк контекстного меню выводит на экран диалоговое окно Select File, где вы можете выбрать файл, на который будет ссылаться "горячая область".

Пункт Alt контекстного меню позволит вам с помощью диалогового окна Change Attribute задать "альтернативный" текст.

Change Attribute

Рис. 4.15. Диалоговое окно Change Attribute

А о пунктах Bring То Front и Send То Back все того же неисчерпаемого кон­текстного меню поговорим подробнее.

Иногда случается так, что две "горячие области" перекрывают друг друга, т. е. имеют общий фрагмент. При этом при щелчке на такой "спорной тер­ритории" активизируется "горячая область", расположенная сверху, а сверху всегда появляется та область, что была создана последней. Но не всегда по­лучается разместить "горячие области", как было предусмотрено по плану. Так вот, чтобы управлять их перекрытием, используются пункты Bring То Front и Send То Back контекстного меню. Первый переносит выделенную "горячую область" наверх, а второй — "загоняет" ее вниз.

В последнем случае вы также можете воспользоваться пунктами Bring То Front и Send То Back подменю Arrange меню Modify.

И еще. Иногда бывает нужно избавиться от показываемых Dreamweaver "го­рячих областей", например, чтобы оценить, как будет выглядеть карта-
изображение в окне Web-обозревателя. Конечно, можно загрузить его в са­мом Web-обозревателе для предварительного просмотра. Но можно сделать иначе. Отключите пункт-выключатель Image Maps в подменю Visual Aids меню View. При этом "горячие области" пропадут. Чтобы вернуть их назад, просто включите этот пункт.