Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.
Нажимай и поддержи.

Пн Вт Ср Чт Пт Сб Вс
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28


Чувашия-это моя Россия

Клиентские графические карты в HTML.

Клиентские графические карты имеют три компонента:

                  • обычный файл изображения (.gif, .jpeg или .png);
                  • карту, обозначенную элементом map, в которой 
                      содержится информация о координатах и URL
                      для каждой активной области (которые описываются
                       элементами area, содержащимися в элементе mар);
                  • атрибут usemap внутри элемента изображения img,
                            который обозначает используемую карту map.

Клиентские графические карты map в HTML. < mар>...< /mар>. Атрибуты: Базовые (id, class, style, title), Интернационализация, события. id="text" name="text".

area в HTML. < area />. Атрибуты: Базовые (id, class, style, title), Интернационализация, события. alt=" текст" (Обязательный).

coords="значения" href="url" nohref shape="rect|circle|poly|default" target="текст". Атрибут coords задает координаты отдельной активной области. Значением атрибута coords будет список координат точек, определяющих активную область и при этом разделяемых запятыми. Координаты записываются в виде целых положительных или во всяком случае неотрицательных чисел. Начало координат располагается в верхнем левом углу изображения( как обычно для многих функций в jQuery), которому соответствуют значения x=0, y=0.

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

Для области с значением circle пишутся три числа - координаты центра и радиус.

Для области с значением poly задаются координаты вершин многоугольника в нужном порядке.

Для области с значением default не требуется задания координат ни х, ни у.

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

Использование клиентских графических карт дает много преимущества и они становятся необходимыми, потому что с помощью карт-изображений можно привязать гипертекстовые ссылки к различным частям изображения. Использование клиентских графических карт дает наглядность и быстроту движения по страницам сайта, потому что пользователь может понять смысл ссылки по ее графическому образу. Они в HTML - документе автономны и не требуют обращения к серверу. Это значит, что можете тестировать графическую карту на локальной машине и создавать демонстрационные версии рабочего сайта для распространения на дисках. Это также снижает нагрузку на сервер и улучшает время его ответа. Кроме того, вся информация об URL отображается в строке состояния, когда пользователь наводит курсор мыши на активную область (серверные карты ссылок отображают только координаты). Сложные многоугольники описываются длинными списками координат. Некоторые браузеры также поддерживают нестандартный атрибут polygon в HTML, эквивалентный poly. < img src="orbit.gif" width="500" height="125" border="0" usemap="#spacey" />. Атрибут usemap необходимо поместить в элемент-изображение для указания того, что данное изображение является графической картой, использующей элемент mар с именем «spacey».

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

Как в начале заметили, что карта-изображение представляет собой обычное встроенное изображение на Web-странице, может иметь любой допустимый формат (gif, jpg, png) расширения файлов изображений. В формате gif может использоваться прозрачный цвет и об этом вы можете прочесть в главе Web-дизайр и его приложения для создания бесплатного сайта.

Так как здесь говорится о клиентском варианте использовании графических-карт наведения, но не о серверном использовании, то клиентский вариант карт-изображений позволяет поместить всю информацию о конфигурации карты в HTML-документе, в которое встроено изображение на страницах бесплатного сайта. Вся работа с изменениями конфигурации карты-изображения выполняется тут же на страницах сайта, одновременно с редактированием HTML - документа. Допустимо сохранять конфигурацию в отдельном файле и давать ссылку на него и об этом желательно не забывать при создании своего бесплатного сайта. Но некоторые браузеру немного в этом плане капризничают и требуют прогона и тестирования при создании своего сайта. В качестве примера приведем тег < img=picture.gif usemap=#restavrazija>. Тут, хранящееся в файле изображение picture.gif с названием picture и с расширением .gif является опорным( основным) для карты-изображения. Описание конфигурации активных областей располагается в том же файле, что и данная строка HTML-кода и имеет для данного примера имя restavrazija, то есть как раньше мы говорили стал востребован атрибут usemap.

Еще раз вкратце повторимся, что создание карт-изображений требует выполнения двух шагов:

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

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

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

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

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


seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно на главную     назад    дальше     вперед

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: