Здесь может быть ваша реклама...
1000
участников
5500 читателей

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

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

  Технология Image map используется в самых разных сферах. Но, наиболее часто применяется - при создании графических меню. Когда формируется одно масштабное изображение с элементами меню. Причем каждому месту изображения назначается какое-то действие. Эту технологию можно использовать при формировании простейших ГИС-подобных систем (с картографированными возможностями).

  Чтобы активировать поддержку карты для изображений, размещенных на html-странице вводится дополнительный параметр usemap тэга <img>:
<img src="url" usemap="[URL]#имя_карты" />. Он просто включает эту поддержку.


  Usemap описывает ссылку документа в котором располагается карта изображения.. Карта может
находиться в этом же документе, где и  изображение, а может -  и в каком-то другом. Последнее дает
возможность собрать непосредственно все карты изображений вместе, в одном документе. Это
необходимо тогда, когда, у Вас несколько карт, в разных документах. Если данного URL нет, то
указанная карта будет искаться в текущем документе.
</map>
  Этот тэг производит описание карты изображения, а также ее имени. Тэг <area> описывает параметры и поведение для отдельной области изображения. У этого элемента нет закрывающего тэга.


Описание вспомогательных атрибутов тэга <map>:

name
  
  Задает непосредственное имя карты. По данному имени происходит поиск карты в процессе обращения  документу.


Описание вспомогательных атрибутов тэга <area>:

shape
  Для описываемой области shape задает форму - геометрическую фигуру. Разная трактовка установленных координат области зависит от избранной формы.
default

ect



circle


poly
областью изначально являются все точки изображения;

положение углов - левого верхнего и правого нижнего   
- задают координаты, а область изображается  
прямоугольником;

область изображается кругом, а положение его радиуса   
и  центра задают координаты;

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

coords
  Задает координаты области по осям X и Y,  что соответственно  - по высоте и ширине экрана. X и Y показываются в пикселях, а отделяются запятой, как и координаты любой вершины.

href
  Задает URL ссылку на выполняемое действие или документ

nohref
  Конкретизирует, что у данной области нет ссылки. В случае, когда параметр href, не указан, то по умолчанию считается, что функционирует параметр nohref. Кроме того, считается, что параметр nohref применяется для всех тех участков изображения, которые не описаны.

alt
   Задает подсказку: при наведении на область изображения она выводится с помощью мышки.

target
  Определяет фрейм или же окно, в котором упомянутая ссылка будет открыта. Этот атрибут был рассмотрен ранее.
Пример:
------------------------------------------------------------------------------------------------------------

<img src="/pic/primer.png" border=0 usemap="#map" />
<map name="map">
<area shape=poly coords="115,158, 162,48, 238,138" alt="Конусная фигура" />
<area shape=poly coords="290,45, 365,28, 420,55, 420,155, 340,165, 295,130" alt="Кубическая фигура" />
<area shape=circle coords="312,274, 65" alt="Сфера" />
<area shape=poly coords="35,255, 88,155, 200,270, 55,325" alt="Пирамида" />
</map>


------------------------------------------------------------------------------------------------------------

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Бесплатно создаем сайт
Полезная литература по созданию сайта
Основы HTML
Структура HTML-документов
Основные и вспомогательные тэги тела документа
Тэги списков
Гипертекстовые ссылки
Оформляем фон html-страницы
Графика в HTML
Web оптимизация графики
Стили оформления HTML-документа
Escape-
последовательности
Таблицы HTML
Структура таблицы
Заголовок, тело, подвал, строки и ячейки таблицы
Формы HTML, синтаксис форм
Элементы управления
Меню выбора
Оформляем HTML-формы
Фреймы HTML, синтаксис фрэймов
Тэг frameset
Тэги frame, noframes
Взаимодействия между фрэймами (планирование)
Карты изображений
Описание CGI интерфейса, разбираем данные HTML-форм
CGI-файл данных
Прямой возврат, обработка результата
Введение в CSS
Практическое освоение
Свойства элементов, которые управляются CSS
Прописываем мета-тэги и готовим web-страницы к публикации

Развитие и монетизация сайта
Начинающему
веб-мастеру
Введение и знакомство с HTML
Бесплатно создаем собственный сайт
Основы поисковой оптимизации
Что такое ТИЦ и PR и как их увеличить
Как раскрутить собственный сайт
Зарабатываем на собственном сайте
Помощь в выборе хостинг-провайдера
Загружаем сайт на хостинг
Полезные сайты
Полезная литература
Информация

Все о CSS
Самый простой курс
®
Поделитесь информацией с друзьями: