Slyweb
На разработку сайта! Скидки 50%!
Поиск CSS свойств и HTML элементов:
поиск



Все CSS свойства и HTML элементы справочника
<AREA...>

Элемент MAP совместно с элементом AREA допускается использовать для создания карт изображений:

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3.<HEAD>
  4. <TITLE>Карта изображения с помощью элемента OBJECT</TITLE>
  5.</HEAD>
  6.<BODY>
  7.<OBJECT data="../../img/reqtangle.jpg" usemap="#map1"></OBJECT>
  8.<MAP name="map1">
  9. <AREA href="uinex1.html"
10. alt="Access Guide"
11. shape="rect"
12. coords="0,0,90,83">
13. <AREA href="uinex2.html"
14. alt="Search"
15. shape="rect"
16. coords="90,0,180,83">
17. <AREA href="uinex3.html"
18. alt="Search"
19. shape="rect"
20. coords="0,83,90,166">
21.<AREA href="uinex4.html"
22. alt="Search"
23. shape="rect"
24. coords="90,83,180,166">
25.</MAP>
26.</BODY>
27.</HTML>
28.
Карта изображения с помощью элемента OBJECT
Карта изображения с помощью элемента OBJECT

Изображение карта создаётся с помощью атрибутов shape и coords. Первый отвечает за форму области, создаваемую на поверхности изображения, а второй за начальные и конечные координаты данной области.

В качестве значений shape допускается указывать:

default область занимает всё изображение.
rect область в форме квадрата.
circle область в форме круга.
poly область в форме произвольной фигуры

В качестве значений coords допускается указывать:

rect: left-x, top-y, right-x, bottom-y. Где:
  1. left-x – начальная координата от левого верхнего угла по оси x;
  2. top-y – начальная координата от левого верхнего угла по оси y;
  3. right-x – конечная координата от левого верхнего угла оси x;
  4. bottom-y – конечная координата от левого верхнего угла оси y.
circle: center-x, center-y, radius. center-x (центр по оси x), center-y (центр по оси y), radius (радиус)
poly: x1, y1, x2, y2, ..., xN, yN. x1, y1, x2, y2, ..., xN, yN координаты произвольной области.

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

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3.<HEAD>
  4. <TITLE>Карта изображения с помощью элемента OBJECT</TITLE>
  5.</HEAD>
  6.<BODY>
  7.<OBJECT data="circle.jpg" usemap="#map1"></OBJECT>
  8.<MAP name="map1">
  9. <AREA href="inex.html"
10. alt="Access Guide"
11. shape="circle"
12. coords="87,87,87">
13.</MAP>
14.</BODY>
15.</HTML>
16.
Карта изображения с помощью элемента OBJECT
Карта изображения с помощью элемента OBJECT

Карта изображений может обрабатываться не только на клиентской стороне, согласно спецификации HTML 4.0 допускается создавать карты с целью отправки координат на сервер:

  1.<OBJECT data="game.gif" shapes>
  2. <A href="guide.html" shape="rect" coords="0,0,118,28">
  3. Rules of the Game</A>
  4. <A href="http://www.acme.com/cgi-bin/competition"
  5. ismap
  6. shape="default">
  7. Guess the location</a>
  8.</OBJECT>
  9.
10.

Пример из спецификации CSS2. Для отправки координат на сервер допускается использовать либо элемент IMG либо INPUT, при чём оба должны быть вложенными в элемент A. Ссылка должны указывать адрес для обработки запроса на сервер с координатами, определяемыми при нажатии на изображение При этом в изображении или кнопке должен быть установлен логический атрибут ISMAP. В слежующем примере - нажатие по области изображения будет причиной отправки координат курсора мыши, полученных в момент срабатывания события click, на сервер, путём присоединения их к URL ссыкли, к примеру URL будет выглядеть следующим образом: http://www.slyweb.ru/cgi-bin/competition?10,27

  1.<P><A href="http://www.slyweb.ru/cgi-bin/competition">
  2. <IMG src="game.gif" ismap alt="target"></A>
  3.

Атрибут alt выводит текст являющейся альтернативой карте изображений, если карта по каким ибо причинам не может быть отображена.


Доступ и установка с jQuery

  • Получить коллекцию элементов AREA: val = $("AREA");
  • Получить класс элементаAREA: val = $("AREA").attr("class");
  • Установить несколько CSS свойств HTML элементу AREA: $("AREA").css({"...":"..."});
  • Установить единичное CSS свойство HTML элементу AREA: $("AREA").css("...","...");
  • Как использовать jQuery для HTML, - читайте статью "jQuery и HTML для начинающих".
Александр Ермаков. Хостинг - www.pwstudio.org