Учебник Macromedia Dreamweaver (стр. 23 из 135)
Активные изображения
Изображение-гиперссылка при наведении на нее курсора мыши никак не проявляет себя. Конечно, можно выставить параметр Border равным пяти или десяти, но это во многих случаях будет не совсем эстетично. Вот сделать бы так, чтобы изображение менялось при наведении на него курсора мыши, чтобы пользователь сразу видел, что это гиперссылка...
Оказывается, это можно сделать. Такие изображения, реагирующие на действия пользователя, называются активными. И Dreamweaver позволяет делать их несколькими щелчками мыши. Единственное, о чем вам нужно позаботиться, так это о втором изображении, которое будет появляться на месте исходного, когда пользователь наведет на него курсор мыши (так называемое перекрывающее изображение).
Давайте рассмотрим, как поместить на страницу активное изображение. Для этого используем страницу сведений об авторе 4.1.htm, куда мы уже вставили изображение-гиперссылку. Согласитесь, она выглядит не очень эстетично. Давайте заменим ее активным изображением. Создадим в графическом редакторе два изображения со значком "коммерческое эт": одно — обычное, а второе — инвертированное, которое будет перекрывать первое. Первое изображение сохраним в файле Email.gif, а второе — в файле Email2.gif. И, конечно, сотрем всю строку с адресом электронной почты так, чтобы на ее месте остался пустой параграф. Текстовый курсор оставим на получившемся пустом параграфе.
Активное изображение вставляется с помощью кнопки Rollover Image (рис. 4.9) вкладки Common панели объектов или пункта Rollover Image подменю Interactive Images меню Insert. При этом на экране появляется диалоговое окно Insert Rollover Image, показанное на рис. 4.10.
Рис. 4.9. Кнопка Rollover Image панели объектов
Рис. 4.10. ДиалоговоеокноInsert Rollover Image
В поле ввода Image Name вводится уникальное имя вставляемого активного изображения. Имя должно содержать только латинские буквы, цифры и знаки подчеркивания, причем начинаться должно с буквы. Проверьте только, действительно ли это имя уникально.
В поле ввода Original Image вводится имя файла оригинального изображение. Если вы не хотите вводить его вручную, нажмите кнопку Browse справа от этого поля ввода. После этого на экране появится диалоговое окно Select Image Source (см. рис. 4.3), где вы сможете выбрать нужный файл.
В поле ввода Rollover Image вводится имя файла перекрывающего изображения. Также, если вам неохота водить его вручную, на помощь всегда придет кнопка Browse.
Флажок Preload Rollover Image заставляет Dreamweaver сгенерировать и вставить в HTML-код вашей страницы небольшую программу-сценарий, которая заранее загрузит перекрывающее изображение. Этот флажок включен по умолчанию, и отключать его не стоит. Если же его отключить, то перекрывающее изображение будет загружено тогда, когда в нем возникнет нужда, т. е. когда пользователь поместит над изображением курсор мыши.
В поле ввода Alternate Text вводится "альтернативный текст". Лучше его ввести.
Последнее поле ввода When Clicked, Go To URL задает интернет-адрес, по которому произойдет переход, если пользователь щелкнет на изображении. Спасительная кнопка Browse придет на помощь тем, кто не любит стучать по клавиатуре.
На рис. 4.10 в соответствующие поля ввода подставлены все нужные значения. Вам остается ввести их и нажать кнопку ОК, после чего активное изображение будет создано. Измените его размер, если хотите.
Теперь остается проверить созданное нами активное изображение в действии. Для этого выведите его в Web-обозревателе для предварительного просмотра и поместите курсор мыши над активным изображением. Вы увидите, как оно изменится. Если вы щелкнете по нему, откроется почтовый клиент.
Карты-изображения
Изображение-гиперссылка — это простейший случай графических гиперссылок, применяемых сейчас в Web-дизайне. Более сложным случаем являются активное изображение и карта-изображение, сложная графическая гиперссылка, представляющая собой изображение, разбитое на части, причем каждая часть является гиперссылкой и указывает на свой интернет-адрес. Например, можно сделать красивую заставку и разместить на ней надписи, соответствующие разделам сайта. Такие части, представляющие собой отдельные гиперссылки, называются "горячими областями".
Для создания карты-изображения используются обычные графические изображения, созданные в любом графическом редакторе. Информация о местонахождении, форме, размерах "горячих областей" и интернет-адресах, на которые они указывают, хранится в HTML-коде страницы.
Dreamweaver позволяет очень просто создать карты-изображения. Нужные "горячие области" рисуются поверх изображения, после чего остается только ввести интернет-адреса, на которые они будут указывать.
В данный момент давайте не будем использовать на своих Web-страницах карты-изображения. Однако пример создания привести необходимо, поэтому мы создадим специальную Web-страничку и специальное изображение для учебных нужд. Файл изображения называется Map.gif, а файл странички — 4.2.htm. Эта страничка не будет содержать ничего, кроме изображения (рис 4.11).
Рис. 4.11. Учебная Web-страница с картой-изображением
Разместить на изображении "горячие области" нам помогут несколько элементов управления, находящиеся в левом нижнем углу редактора свойств и пока еще нами не рассмотренные. Теперь пришла пора разобраться с ними (рис. 4.12).
Рис. 4.12. Элементы управления редактора свойств,использующиеся для создания "горячих областей"
Прежде всего, рассмотрим четыре кнопки, расположенные вдоль нижней границы окна редактора свойств. Они поделены на две неравные группы. Группа, находящаяся правее и состоящая из трех кнопок, позволяет разместить на изображении соответственно прямоугольную, круглую и многоугольную "горячую область". Единственная кнопка, расположенная левее, позволяет манипулировать уже созданными "горячими областями".
Так как же разместить "горячую область"? Очень просто. Давайте начнем с прямоугольной. Щелкните на кнопке с изображением прямоугольника, затем щелкните по графическому изображению и, не отпуская левой кнопки мыши, протащите ее, пока не захватите всю область изображения, которую хотите сделать "горячей". Вы заметите, что за курсором мыши "тянется" светло-синяя линия. "Охватив" нужную область (в нашем случае, надпись "Сведения об авторе"), отпустите кнопку мыши, и выбранная вами область тотчас закрасится светло-синим.
После этого, как вы заметили, Dreamweaver подставит в поле ввода Map строку "Map". Что она значит? Это уникальное имя изображения-гипер-ссылки, которое будет использоваться Web-обозревателем. Если вы планируете на своей странице только одну карту-изображение, можете оставить это имя по умолчанию, в противном случае дайте ей уникальное имя, хотя бы "Мар1. Заметьте, что в таких именах допускаются только латинские буквы, цифры и знаки подчеркивания, причем начинаться имя должно с буквы.
Но Dreamweaver не только сгенерировал уникальное имя для карты-изображения. Он еще и в очередной раз изменил вид редактора свойств (рис. 4.13). Теперь вы можете задать параметры только что созданной "горячей области".
Рис. 4.13. Вид редактора свойств для выделенной "горячей области"
Все элементы управления нового редактора свойств вам уже знакомы. Это поле ввода Src, используемое для ввода интернет-адреса, раскрывающийся список Target, задающий цель гиперссылки, и поле ввода Alt, где вводится "альтернативный" текст. Здесь все понятно.
Разобравшись с тем, как вводятся параметры "горячей области", снова обратим внимание на изображение и саму "горячую область". Вы уже, наверно, заметили, что по углам прямоугольника, представляющего собой эту самую "горячую область", расположены небольшие синие квадратики — маркеры изменения размера. "Захватив" любой такой маркер мышью, вы можете изменить размеры "горячей области". А чтобы переместить ее на другое место, просто перетащите ее мышью. Однако перед всеми этими операциями проверьте, что из кнопок, показанных на рис. 4.12, нажата та, на которой изображена стрелка, и, если нет, нажмите ее.
Но пора двигаться дальше. Введите в поле Src имя файла Web-страницы сведений об авторе (4.1.htm) и нажмите клавишу <Enter>.
Теперь добавим на наше изображение круглую "горячую область". Для этого нажмем кнопку с изображением круга и точно так же "протащим" мышь по изображению, охватив надпись "E-mail". Dreamweaver поместит круглую область там, где мы ему указали, и активизирует ее, разместив по четырем сторонам круга маркеры изменения размеров.
Вы можете изменять размеры и местоположение круглой "горячей области" так же, как и прямоугольной. Редактор свойств имеет в этом случае такой же вид (см. рис. 4.13). Поэтому мы не будем здесь останавливаться. Введите в поле ввода Src почтовый адрес Ивана Ивановича и нажмите клавишу <Enter>.
Многоугольная "горячая область" создается несколько сложнее. Нажав кнопку с изображением многоугольника, прежде всего, щелкните мышью в месте, где должна располагаться первая из угловых точек многоугольной области. После этого там появится синяя точка — начало нашего многоугольника. Затем щелкните мышью там, где должна быть вторая угловая точка, и Dreamweaver проведет между этими двумя точками линию. Далее вам останется щелкнуть в местах расположения остальных угловых точек многоугольника, a Dreamweaver сам проведет между ними линии, которые и образуют нужную нам многоугольную "горячую" область. Впоследствии вы можете перетащить мышью любую точку этой области. Вот только вставить новую или удалить старую угловую точку вы уже не сможете — вам придется удалить созданную "горячую" область и создать новую.