Ссылки (гиперссылки)

Для связывания страниц гипертекста используется механизм ссылок (гиперссылок), которые в HTML реализуются с помощью тега <a>. Адрес страницы, на которую должен осуществляться переход, задается с помощью специального атрибута href. Причем могут использоваться как абсолютные, так и относительные адреса, когда путь отсчитывается от каталога, в котором расположена текущая страница:

<a href="http://server.com/doc3.htm">Ссылка на документ с абсолютным адресом http://server.com/doc3.htm</a>

<a href="doc1.htm">Сылка на документ с относительным адресом doc1.htm</a>

<a href="mailto:sss@mail.ru">Ссылка на адрес электронной почты sss@mail.ru</a>

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

<a href="#Пункт 1.1">Ссылка на пункт 1.1</a>
   Якорь: <a name="Пункт 1.1"></a><li>Пункт 1.1</li>

<a href="#Пункт 2">Ссылка на пункт 2</a>
  Якорь: <a name="Пункт 2"></a><li>Пункт 2</li>

Если якорь расположен не на текущей странице, как в предыдущем примере, то в атрибуте href следует сначала указать адрес требуемой страницы, а затем после знака # имя якоря:

<a href="doc2.htm#Пункт3Документа1">Ссылка на Пункт 3 Документа 1</a>
  Якорь: <a name="Пункт3Документа1"></a><li>Пункт 3</li>

Рисунки в роли ссылок

В роли ссылок могут выступать рисунки, которые можно использовать, например, в качестве кнопок. Для этого тег <img>, содержащий рисунок

<img src="fig1.gif" width="153" height="153" border="0">

необходимо «обернуть» тегом ссылок <a>:

<a href="tabledesign.htm"><img src="fig1.gif" alt="Ссылка на страницу tabledesign.htm" width="153" height="153" border="0"></a>

Атрибут alt тега <img> содержит текст, который будет выводиться в качестве подсказки, когда пользователь наведет указатель на рисунок.

Карты изображений

С помощью карт изображений можно рисунок, используемый в качестве основы такой карты, разбить на области и каждой такой области назначить ссылку на ту или иную страницу. Для этих целей в HTML предназначены теги <map> и <area>.

Чтобы указать, что данный рисунок является основой для карты-изображения, используется атрибут usemap, в котором дается ссылка на имя карты изображения. Например, если рисунок fig.gif является основой карты-изображения Map, тег рисунка будет иметь следующий вид:

<img src="fig.gif" usemap="#Map">

Для задания конфигурации карты-изображения используется парный тег <map> … </map>. Он имеет единственный атрибут name, являющийся именем карты, это же имя указывается в атрибуте usemap тега рисунка, являющегося ее основой:

<map name="Map">
…
…
</map>

Внутри тега <map> при помощи тега <area> задаются непосредственно области карты-изображения. Тег <area> имеет следующие атрибуты: shape, coords, href, nonhref, target и alt. Допустимыми значениями атрибута shape являются: rect, circle, poly и default. По умолчанию устанавливается значение rect, задающее область в виде прямоугольника.

Значениями атрибута coords являются координаты области, которые задаются в виде списка. Для прямоугольника (rect) задаются координаты левого верхнего и правого нижнего углов:

<area shape="rect" coords="-1,1,264,232" href="fromimagemap2.htm" alt="На Документ 2">

Для круга (circle) – координата центра и радиус:

<area shape="circle" coords="133,116,59" alt="Нет ссылки
(nonhref)" nonhref>

Для многоугольника (poly) задаются координаты всех вершин, причем если координаты последней вершины не совпадают с первой, то браузер автоматически создает последнюю вершину с координатами первой, и область замыкается:

cords="355,75,400,99,450,130,363,295,356,313,348,348,181,291,189,
281,260,291,305,290,316,248,317,224,318,197" href="fromimagemap3.htm" alt="На Документ 3">

Dreamweaver имеет достаточно удобные средства создания карт изображений. Для того чтобы создать такую карту, необходимо сначала вставить рисунок, затем выделить его и открыть вкладку Property, расположенную в правом нижнем углу (рис. 3). Там представлены механизмы, позволяющие формировать области тега <area> трех видов: rect, circle и poly. Ссылки задаются как и обычно в Dreamweaver.

Рис. 3. Формирование карты изображения в Dreamweaver

В качестве примера приведем карту изображения, обеспечивающую навигацию по сайту (рис. 4):

<img src="map.gif" width="617" height="439" border="0" usemap="#Map">
<map name="Map">
<area shape="poly" cords="
14,58,20,45,45,34,79,30,118,32,137,38,149,45,160,55,158,64,146,75,
122,84,103,87,72,87,38,85,23,75" href="introduction.htm">
<area shape="poly" coords="
48,138,58,122,91,112,121,109,148,110,170,120,185,127,191,142,184,
152,168,159,131,168,97,169,68,162,60,152" href="chapter1.htm">
<area shape="poly" coords="
118,206,146,191,201,186,242,191,258,208,259,222,238,236,191,239,
148,240,126,229,120,217" href="chapter2.htm">
<area shape="poly" coords="
199,284,206,267,238,258,278,255,310,258,335,269,346,283,339,293,
320,306,288,309,268,310,233,308,214,301" href="chapter3.htm">
<area shape="poly" coords="
308,337,334,317,376,310,408,311,434,317,449,328,452,344,437,356,
407,365,370,367,338,366,324,355" href="conclusion.htm">
<area shape="poly" coords="
456,373,475,349,518,342,565,346,585,357,594,362,601,372,598,383,
574,393,545,399,508,401,470,397" href="lit.htm">
</map>

Рис. 4. Пример карты изображения

Ролловеры

Чтобы придать динамизм кнопкам, можно воспользоваться ролловерами. Ролловеры – это такие кнопки, которые изменяют свой вид в тот момент, когда над ними проходит указатель мыши. Это достигается при помощи скрипта, написанного на JavaScript, который меняет один рисунок на другой, когда указатель находится над ним, а так же возвращает исходное изображение после того, как указатель больше не находится над рисунком.

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

Ниже приведен код скрипта, сгенерированного Dreamweaver, который управляет сменой изображений.

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore()
{ //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages()
{ //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments;
for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d)
{ //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n];
for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments;
document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

Сам ролловер создается с помощью обычного тега ссылок <a>, в котором добавлены атрибуты, вызывающие функции, определенные в скрипте:

<a href="introduction.htm" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image1','','figB.gif',1)">
<img src="figA.gif" alt="Введение" name="Image1" width="171" height="39" border="0"></a>