В элемент a можно вкладывать не только текст, но и изображение. Именно так и создаются графические ссылки. Графические ссылки в ряде случаев выглядят гораздо эстетичнее чем текстовые. Здесь, однако, нас подстерегает не очень приятный сюрприз - изображения, заключенные в элемент a приобретаю рамку. Для того, чтобы избавиться от нее необходимо использовать атрибут border элемента img:

<a href="..."><img src="image.gif" alt="Изображение-ссылка" border="0" /></a>

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

Пример: создание навигационной панели сайта

Сейчас на небольшом примере мы с вами поэтапно спроектируем и реализуем несложную графическую навигационную панель сайта. Выглядеть это будет так:

Рис. №4.3.1. Навигационная панель

Кажется, что все просто: берем изображение, размещаем его на странице... Что может быть проще? Однако, различные фрагменты этого изображения должны быть гиперссылками на различные ресурсы. Таким образом, мы приходим к необходимости разрезать рисунок на несколько частей.

Вот что получилось у меня:

Рис. №4.3.2. Фрагменты навигационной панели

В результате, у нас есть три "кнопки" - гиперссылки "Назад", "Содержание" и "Вперед". Разместим все это добро на странице:

<div style="text-align: center;">
 <img src="navbar/navbar01.gif" alt="" />
 <img src="navbar/navbar02.gif" alt="Назад" />
 ...
 <img src="navbar/navbar09.gif" alt="" />
</div>

Как говорится - "Первый блин комом"! Между изображениями появились зазоры, хотя никто этого не планировал. Все дело в том, что MSIE добавил между изображениями пробельный символ. Это происходит потому, что элементы img разделены переводом строки в коде страницы. Зная это, положение вещей легко поменять, удалив пробельные символы (переводы строки, табуляции...) между элеменнами img.

...<img src="navbar/navbar01.gif" alt="" 
/><img src="navbar/navbar02.gif" alt="Назад"
/>...

Теперь все в норме! Снабдим код гиперссылками. Чтобы не придумывать адреса, в качестве значения атрибута href используйте "#":

...<a href="#"><img src="navbar/navbar02.gif" alt="Назад"
/></a>...

Полученный результат выглядит явно как то не так... Все дело в рамках вокруг изображений. Избавимся от них, добавив в изображения-ссылки атрибут border="0":

...<a href="#"><img src="navbar/navbar02.gif" alt="Назад" border="0"
/></a>...

Теперь вы можете связать несколько страниц несложной единой навигационной панелью, разместив ее код в начале каждой страницы и правильно настроив ссылки.