HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

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

Язык HTML позволяет использовать в качестве содержимого гиперссылки любой фрагмент любого блочного элемента, в том числе и графическое изображение, т. е. создать изображение- гиперссылку.

Для создания изображения гиперссылки достаточно поместить внутрь тега <A> тег <IMG>:

<A HREF='http://www.w3.org'><IMG SRC='w3logo.gif'></A>

Этот HTML-код создает изображение-гиперссылку, указывающую на Web-сайт организации W3C. А в качестве самого изображения выбран логотип этой организации, который мы сохранили в файле в той же папке, где находится файл текущей Web-страницы.

<A HREF='mailto: [email protected]'><IMG SRC='email.gif'></A>

А этот HTML-код создает почтовую изображение-гиперссылку.

Правила вывода изображений-гиперссылок Web-обозревателем:

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

— при помещении курсора мыши на изображение-гиперссылку Web-обозреватель меняет его форму на 'указующий перст', как и в случае текстовой гиперссылки.

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

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

А еще HTML позволяет превратить в гиперссылку часть графического изображения. Более того, мы можем разбить изображение на части, каждая из которых будет представлять собой гиперссылку, указывающую на свой интернет-адрес. Такие изображения называют изображениями- картами, а ее части-гиперссылки — 'горячими' областями.

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

Изображение-карту создают в три этапа. Первый этап — создание самого изображения с помощью хорошо нам знакомого тега <IMG>:

<IMG SRC='map.gif'>

Второй этап — создание карты, особого элемента Web-страницы, который описывает набор 'горячих' областей изображения-карты. Сама карта на Web-странице никак не отображается.

Карту создают с помощью парного тега <MAP>:

<MAP NAME='<имя карты>'></MAP>

ВНИМАНИЕ!

Здесь для описания формата тега <MAP> впервые применяются типографские соглашения, перечисленные во введении этой книги. Автор настоятельно рекомендует прежде ознакомиться с ними.

С помощью обязательного атрибута NAME тега <MAP> задается уникальное в пределах Web- страницы имя карты. Оно однозначно идентифицирует данную карту, может содержать только латинские буквы, цифры и знаки подчеркивания и начинаться должно с буквы:

<MAP NAME='samplemap'></MAP>

После создания карты следует привязать ее к созданному на первом этапе изображению. Для этого мы применим обязательный в данном случае атрибут USEMAP тега <IMG>. Его значение — имя привязываемой к изображению карты, причем в начале этого имени обязательно следует поставить символ # ('решетка'). (В имени, заданном атрибутом NAME тега <MAP>, символ # присутствовать не должен.)

<IMG SRC='map.gif' USEMAP='#samplemap'>

На третьем этапе создают описания самих 'горячих' областей в карте. Их помещают внутрь соответствующего тега <MAP> и формируют с помощью одинарных тегов

<AREA>:

<AREA [SHAPE='rect|circle|poly'] COORDS='<набор параметров>' HREF='<интернет-адрес гиперссылки>'|NOHREF TARGET='<цель гиперссылки>'>

Необязательный атрибут SHAPE задает форму 'горячей' области. Обязательный атрибут COORDS перечисляет координаты, необходимые для построения этой области. Значения атрибута SHAPE:

— 'rect' — прямоугольная 'горячая' область. Атрибут COORDS в этом случае записывается в виде COORDS='<X1>,<Y1>,<X2>,<Y2>', где X1 и Y1 — координаты верхнего левого, а X2 и Y2 — правого нижнего угла прямоугольника. Кстати, если атрибут SHAPE отсутствует, создается именно прямоугольная область;

— 'circle' — круглая 'горячая' область. В этом случае атрибут COORDS имеет вид COORDS='<X центра>,<Y центра>,<радиус>';

— 'poly' — 'горячая' область в виде многоугольника. Атрибут COORDS должен иметь вид COORDS='<X1>,<Y1>,<X2>,<Y3>,<X3>,<Y3>…', где Xn и Yn — координаты соответствующей вершины многоугольника.

Атрибут HREF задает интернет-адрес гиперссылки — он, собственно, нам уже знаком. Он может быть заменен атрибутом без значения NOHREF, задающим область, не связанную ни с каким интернет- адресом. Это позволяет создавать оригинальные изображения-карты, например, карту в виде бублика, 'дырка' которого никуда не указывает.

Также знакомый нам атрибут TARGET задает цель гиперссылки. (Конечно, указывать его имеет смысл только в том случае, если мы создаем именно 'горячую' область, а не 'дырку' с атрибутом NOHREF.)

Листинг 6.2 содержит полный HTML-код, создающий изображение-карту.

<IMG SRC='map.gif' USEMAP='#samplemap'>

Листинг 6.2

.

<MAP NAME='samplemap'>

<AREA SHAPE='circle' COORDS='50,50,30' HREF='page1.html'>

<AREA SHAPE='circle' COORDS='50,150,30' HREF='page2.html'>

<AREA SHAPE='poly' COORDS='100,50,100,100,150,50,100,50' NOHREF>

<AREA SHAPE='rect' COORDS='0,100,30,100' HREF='appendix.html' TARGET='_blank'>

</MAP>

Здесь мы создали две круглые 'горячие' области, указывающие на Web-страницы page1.html и page2.html, многоугольную область, не ссылающуюся никуда, и прямоугольную область, ссылающуюся на Web-страницу appendix.html. Причем последняя 'горячая' область при щелчке на ней откроет Web-страницу в новом окне Web-обозревателя.

Вот и все об изображениях-картах и о графических гиперссылках вообще.