|
|||||||
АвтоАвтоматизацияАрхитектураАстрономияАудитБиологияБухгалтерияВоенное делоГенетикаГеографияГеологияГосударствоДомДругоеЖурналистика и СМИИзобретательствоИностранные языкиИнформатикаИскусствоИсторияКомпьютерыКулинарияКультураЛексикологияЛитератураЛогикаМаркетингМатематикаМашиностроениеМедицинаМенеджментМеталлы и СваркаМеханикаМузыкаНаселениеОбразованиеОхрана безопасности жизниОхрана ТрудаПедагогикаПолитикаПравоПриборостроениеПрограммированиеПроизводствоПромышленностьПсихологияРадиоРегилияСвязьСоциологияСпортСтандартизацияСтроительствоТехнологииТорговляТуризмФизикаФизиологияФилософияФинансыХимияХозяйствоЦеннообразованиеЧерчениеЭкологияЭконометрикаЭкономикаЭлектроникаЮриспунденкция |
HTML Навигационные карты - mapМногие html-страницы используют для организации ссылок так называемые карты-изображения. При таком подходе берется изображение и к различным его областям привязываются ссылки. Самым распространенным примером являются туристические карты мира, щелкаете по ее части с какой-либо страной и попадаете на страницу, посвященную этой стране. Такие карты-изображения могут быть клиентскими и серверными. Ссылки клиентских карт хранятся в самом документе и по щелчку мыши браузер сам определяет, к какой области относятся координаты этой точки и осуществляет переход по нужной ссылке. При серверном варианте эти координаты сначала передаются на сервер, там обрабатываются специальной программой и только после этого происходит переход по ссылке.Очевидно, что клиентские навигационные карты предпочтительнее. Их мы и рассмотрим. Для примера представим, что мы являемся магазином бытовой техники и в шапке нашего сайта у нас расположена вот такая картинка: Сделаем из нее навигационную карту, т.е. при щелчке по холодильнику будет осуществляться переход на страницу, посвященную холодильникам (с моделями, описанием и ценами), при щелчках по пылесосу и стиральной машине на соответствующие им страницы. Для этого нам надо описать области на этой картинке, которые будут ссылками. Для описания таких областей используются теги <map> </map> с единственным параметром name, который задает имя карты-ссылок и используется потом для ссылки на эту карту.
<html> <head> <title>map html</title> </head> <body> <img src="map.gif" border="0"> <map name="map"> </map> </body> </html>
<html> <head> <title>map html</title> </head> <body> <img src="map.gif" usemap="#map" border="0"> <map name="map"> </map> </body> </html>
o rect - область в виде прямоугольника, o circle - область в виде круга, o poly - область в виде многоугольника, o default - вся область.
o для rect задаются координаты верхнего левого и правого нижнего углов прямоугольника, o для circle задаются координаты центра круга и радиус, o для poly задаются координаты вершин многоугольника в нужном порядке.
У нас три области, значит будет три тега <area>: первый - прямоугольная область вокруг пылесоса, второй - прямоугольная область вокруг стиральной машины, третья - вокруг холодильника.
<html> <head> <title>map html</title> </head> <body> <img src="map.gif" usemap="#map" border="0"> <map name="map"> <area shape="rect"> <area shape="rect"> <area shape="rect"> </map> </body> </html>
Для этих целей обычно используется какая-нибудь программа, например, Image Ready, которая имеет специальный инструмент для обводки областей и автоматически строит описания этих областей. Рассмотрение работы этих программ не входит в курс HTML, поэтому здесь мы зададим координаты "на глаз". Посмотрите еще раз на наше изображение:
Ширина нашей картинки 738 пикселов, а высота - 192 пиксела. Проведем линии по границам наших областей и примерно определим координаты. Теперь мы готовы добавить эти параметры в наши теги <area>.
<html> <head> <title>map html</title> </head> <body> <img src="map.gif" usemap="#map" border="0"> <map name="map"> <area shape="rect" coords="550,135, 590,192" href="#" alt="пылесосы"> <area shape="rect" coords="591,90, 660,192" href="#" alt="стиральные машины"> <area shape="rect" coords="661,0, 730,192" href="#" alt="холодильники"> </map> </body> </html>
Теперь наши области стали ссылками (если подвести курсор мыши, он превращается в ладошку). На этом сайте нет страниц, посвященных холодильникам, поэтому ссылки ведут на эту же страницу, но если вы создадите нужные страницы, то при щелчке по области будет осуществляться переход. На этом наши уроки подошли к концу. Вы ознакомились со всеми возможностями языка HTML. Для закрепления навыков ознакомьтесь с двумя уроками Делаем сайт - табличная верстка. Напоследок, надо сказать, что в HTML есть еще два замечательных элемента - теги <div> </div> и <span> </span>. На самом деле это очень важные теги, но управлять ими без CSS, я считаю просто "извращением", поэтому о них подробно рассказано в уроках CSS. Поиск по сайту: |
Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Студалл.Орг (0.006 сек.) |