Основы работы с XHTML и CSS


Код страницы с картой ссылок


Следующий листинг показывает код карты ссылок, описанной в текущем примере страницы. Текстовые параграфы присутствуют не полностью, только ссылки внутри страницы на эти разделы страницы.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Использование графических карт</title>

<style type="text/css"> body {margin:20px} .center {text-align:center} </style>

</head> <body>

<h2 class="center">Using Image Maps</h2>

<p class="center"> <img src="MyMap.gif" usemap="#MyImageMap" alt="Image Map" style="border:0px/">

<map id="MyImageMap"> <area shape="rect" coords="8,13,130,123" href="#LINK1" alt="Determining Mapped Areas"/> <area shape="circle" coords="228,123,62" href="#LINK2" alt="Coding an Image Map"/> <area shape="poly" coords="100,144 175,200 155,255 50,250 45,175" href="#LINK3" alt="Overlapped Mapped Areas"/> </map> </p>

<p class="center""> <a href="#LINK1">Determining Mapped Areas</a> | <a href="#LINK2">Coding an Image Map</a> | <a href="#LINK3">Overlapped Mapped Areas</a> </p>

<h3><a name="LINK1">Determining Mapped Areas</a></h3> ...text... <p><a href="#">Top</a></p>

<h3><a name="LINK2">Coding an Image Map</a></h3> ...text... <p><a href="#">Top</a></p>

<h3><a name="LINK3">Overlapped Mapped Areas</a></h3> ...text... <p><a href="#">Top</a></p>

</body> </html>

Листинг 7.16. Код страницы с картой ссылок

Этот пример использует для карты ссылки внутри страницы. Атрибут href тега <area/> может точно также открывать внешний сайт Web в том же самом или новом окне браузера.




Начало  Назад  Вперед



Книжный магазин