Визуальный редактор Dreamweaver MX

         

Изображения-гиперссылки


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

Сделать изображение-гиперссылку очень просто, так же просто, как и гиперссылку текстовую. Вам необходимо только выделить нужное изображение и ввести в поле ввода Link редактора свойств нужный адрес.

Давайте, чтобы проиллюстрировать вышесказанное, вставим на нашу страницу со сведениями об авторе еще одно изображение. И преобразуем его в почтовую гиперссылку.


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

Создайте его в графическом редакторе или найдите готовый. Назовите файл с этим изображением Email.gif.

После этого поставьте курсор в начале строки "E-mail: ivanov@somemail.ru", сотрите символы "E-mail" и нажмите кнопку Image вкладки Common панели объектов. Выберите файл, где сохранено ваше "коммерческое эт", и нажмите кнопку ОК. Измените размеры свежевставленного изображения, чтобы оно не сильно отличалось от размера шрифта текста, и установите для него выравнивание Absolute Middle. Результат вы можете видеть на рис. 4.8.

Рис. 4.8. Значок "коммерческое эт" — символ электронной почты

Теперь преобразуем этот значок в почтовую гиперссылку. Для этого выделим его, наберем в поле ввода Link редактора свойств почтовый адрес нашего героя mailto:ivanov@somemail.ru и нажмем клавишу <Enter>.

Внешне изображение-гиперссылка ничем не отличается от обычного изображения. Однако если вы вызовете Web-обозреватель для предварительного просмотра Web-страницы, то при наведении курсора мыши на это изображение он изменит свою форму на "указующий перст". А при щелчке на этом изображении откроется почтовый клиент.

Если параметр Border изображения-гиперссылки имеет значение, отличное от нуля, то рамка, рисуемая вокруг изображения, будет иметь такой же цвет, какой был установлен для гиперссылок в общих свойствах данной страницы. В нашем случае, такая рамка будет иметь светло-синий цвет для непосещенных, темно-синий для посещенных и ярко-красный для активной гиперссылок. Такой эффект можно специально использовать, чтобы сделать оригинальный дизайн Web-страницы, но обычно им не пользуются.

Ну и, конечно же, изображение-гиперссылка может указывать на обычную Web-страницу.

Примечание

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

<А НRЕР="<Интернет-адрес>"><IMG SRС="<Адрес файла изображения>"></А>.


Назад    Содержание    Вперед