Как мы уже знаем, гиперссылка – это объект, связанный с другим объектом и реагирующий на щелчок мыши. Именно благодаря гиперссылкам отдельные web-страницы связываются в единую информационную структуру, воспринимаемую пользователем как единое целое – сайт. 

На прошлом занятии вы научились создавать текстовые гиперссылки. Сегодня вы научитесь связывать документы с помощью графических гиперссылок. 

Использование рисунка в качестве ссылки

Ссылкой может быть не только текст, но и  картинка (изображение). Принцип ссылки тот же, что и в случае с текстом, только в тег <A>…</A> вставляется не текст, а изображение: <a href="prf.html"><img src="photo.gif"></a>. 

Запомните!!!

Вокруг изображения-ссылки автоматически добавляется рамка (бордюр) толщиной один пиксель и цветом, совпадающим с цветом текстовых ссылок. Обычно это синий цвет. Чтобы убрать рамку, следует задать атрибут border="0".

У тега <A> существуют также атрибуты width и height, позволяющие задавать размер области (ширину и высоту, соответственно), которая будет отводиться на странице под ссылку-изображение. Значения атрибутов  указываются в пикселах (px) или процентах. 

Альтернативный текст и всплывающая строка

Web-страница может отображаться браузером, не имеющим средств для показа изображений. Пользователи часто отключают показ рисунков, чтобы ускорить приём документа. И в том, и в другом случае желательно дать возможность узнать как пользователю, так и поисковым системам, что же изображено на картинке. Для этой цели используют альтернативный текст, который задается в теге <IMG> атрибутом alt. Атрибут аlt выводит текст в месте расположения картинки во время её загрузки. Например: <IMG src=”boss2.gif” аlt =”портрет маленького босса”>. 

Ещё один атрибут – title, предназначен для информирования пользователя о содержании картинки. Содержимое title показывается во всплывающей строке, если пользователь подведет мышь к рисунку.

Например: <IMG src=”boss2.gif” title =”портрет маленького босса”>