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

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

К минусам такого подхода можно отнести:

Карта-изображение как панель навигации

Начнем с примера:

Пример применения карт-изображений

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример применения карт-изображений</title>
</head>

<body bgcolor="#D9ECFF" bottommargin="0" leftmargin="0" rightmargin="0" topmargin="0">
<table width="100%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td colspan="3" bgcolor="#0000FF" height="50" align="center" ><font size="+5" color="#FFFFFF">Шапка документа</font></td>

</tr>
<tr>
<td width="180">
<img src="images/panel_r1_c1.gif" border="1" usemap="#panel">
<map name="panel">
<area shape="rect" coords="0,0,180,36" href="102.html" target="_blank" alt="глава 1">
</map>

<img src="images/panel_r2_c1.gif" border="1" usemap="#panel1">
<map name="panel1">
<area shape="rect" coords="0,0,180,36" href="101.html" target="_blank" alt="глава 2">
</map>

<img src="images/panel_r3_c1.gif" border="1" usemap="#panel2">
<map name="panel2">
<area shape="rect" coords="0,0,180,36" href="100.html" target="_blank" alt="глава 3">
</map>

<img src="images/panel_r4_c1.gif" border="1" usemap="#panel3">
<map name="panel3">
<area shape="rect" coords="0,0,180,36" href="11.html" target="_blank" alt="глава 4">
</map>
</td>
<td>
<h2 align="center"><font color="#0000FF">Название документа</font></h2>
<p>Текст документа</p>
</td>
<td width="180">&nbsp;</td>
</tr>
<tr>
<td colspan="3" bgcolor="#0000FF"><font size="3" color="#FFFFFF">&copy; <font size="2">Авторские права</font></font></td>
</tr>
</table>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

В данный момент нас интересует само изображение, состоящее из 4-х фрагментов (глава1, глава2, глава3, глава4). Чтобы видеть границы изображения на веб-странице, параметру border тега <img> присвоено значение 1. Если навести курсор мыши на один из фрагментов изображения, то форма курсора даст понять, что это ссылка, а рядом с курсором появится всплывающая подсказка, например "Глава1".

Структура карт-изображений

Рассмотрим структуру, которая позволяет вставлять карту-изображение в HTML-документ.

Структура карт-изображений

<!--Часть 1-->
 <img src="images/panel_r2_c1.png" border="1" usemap="#panel" >

<!--Часть 1-->

<!--Часть 2-->
<map name="panel">
<area shape="rect" coords="0,0,180,18" href="102.html" target="_blank" alt="глава 1">
</map>

<!--Часть 2-->

Как видно, код для вставки карты-изображения состоит из двух частей. Первая часть с помощью тега <img> вставляет изображение в веб-страницу. Параметр usemap указывает, что изображение является картой. В качестве значения параметра указывается URL-адрес описания конфигурации. Если описание карты расположено в том же HTML-документе, то указывается название раздела конфигурации карты, перед которым добавляется символ #.

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

Тег map

Парный тег <map> служит для описания конфигурации областей карты-изображения. У тега <map> есть единственный параметр — name. Значение параметра name должно соответствовать имени в параметре usemap тега <img>.

Описание активной области на карте-изображении

Тег <area> описывает одну активную область на карте. Закрывающейся тег не требуется. Если одна активная область перекрывает другую, то будет реализована первая ссылка из списка областей.

Тег имеет следующие параметры:



  • Другие |
назадвверхвперед
Rambler's Top100