Принципы разработки пользовательского интерфейса интернет-приложения

Элемент управления ImageMap представляет собой графическую карту, определенную на серверной стороне. С его помощью можно создать отдельные области с уникальными именами. Преимущество такого подхода заключается в том, что во время движения курсора над определенной в карте областью он изменяет свой вид на "указующий перст". При этом, если с данным регионом сопоставлена гиперссылка, пользователь видит ее в строке состояния браузера. Использование ImageMap очень удобно для детальных изображений с небольшими активными участками.

Для использования элемента управления ImageMap необходимо определить области, на нахождение внутри которых должна реагировать карта. Добавление областей осуществляется путем добавления объектов HotSpot в коллекцию ImageMap. Существует три типа областей HotSpot: CircleHotSpot - определяющая окружность, RectangleHotSpot - прямоугольник, PolygonHotSpot - многоугольник (полигон). Для задания областей необходимо добавить в коллекцию HotSpots соответствующий элемент и указать его координаты. Кроме того, возможно указание следующих дополнительных параметров:

В качестве примера создадим с помощью ImageMap карту изображения, аналогичную предыдущей, созданной с использованием ImageButton. Для этого используем тот же рисунок, что и ранее, однако области определим посредством задания HotSpots. В примере необходимо создать три области - рамка, квадрат и треугольник. Самая простая область - это квадрат, для ее задания достаточно добавить HotSpot типа Rectangle и определить свойства так, как показано на рис. 5.30.

Рис. 5.30. Окно задания свойств областей элемента ImageMap

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

Для того чтобы приложение могло отслеживать, где именно был произведен щелчок мыши, необходимо инициировать отправку страницы на сервер. Для этого в качестве значения свойства HotSpotMode установлено PostBack. Для идентификации HotSpot установлено значение PostBackValue=квадрат. Аналогичные настройки произведем и для HotSpot "треугольник" ( рис. 5.31).

Рис. 5.31. Окно задания свойств для области "треугольник" элемента ImageMap

Разница в том, что для описания треугольника не подходят предопределенные HotSpot Rectangle и Circle, поэтому необходимо использовать PolygonHotSpot. Его особенностью является то, что координаты вершин многоугольника задаются в свойстве Coordinates через запятую.

Для описания рамки ее целесообразно разбить на две части. Первая часть будет состоять из верхней и правой частей, вторая - нижней и левой. Это объясняется тем, что в ImageMap невозможно исключить (вычесть) одну область из другой. В результате будет получено три HotSpot области, как показано на рис. 5.32.

Рис. 5.32. Окно описания области «рамка» элемента ImageMap

Исходный код элемента ImageMap будет выглядеть следующим образом:

<asp:ImageMap ID="ImageMap1" runat="server" Height="400px"
 ImageUrl="~/Images/figure.gif"
  OnClick="ImageMap1_Click" Width="400px">
  <asp:RectangleHotSpot AlternateText="квадрат" Bottom="60"
   HotSpotMode="PostBack"
    Left="60" PostBackValue="квадрат" Right="210" Target=
     "_blank" Top="210" />
  <asp:PolygonHotSpot AlternateText="треугольник" Coordinates=
   "270,225,375,332,165,331"
    HotSpotMode="PostBack" PostBackValue="треугольник" />
  <asp:PolygonHotSpot AlternateText="рамка"
   Coordinates="0,0,400,0,400,400,380,380,380,20,20,20"
    HotSpotMode="Navigate" NavigateUrl="http://www.yandex.ru"
     Target="_blank" />
  <asp:PolygonHotSpot AlternateText="рамка" Coordinates=
   "0,0, 0,400,400,400,380,380,20,380,20,20"
    HotSpotMode="Navigate" NavigateUrl="http://www.yandex.ru"
     Target="_blank" />
</asp:ImageMap>

В результате работа элемента управления будет практически аналогична предыдущему примеру, однако его использование в данном случае гораздо более просто и удобно.

Как уже было сказано, в настоящее время доступны только три типа геометрических фигур - окружность, прямоугольник, многоугольник. Иногда их бывает недостаточно, например, было бы полезно иметь возможность определения области в виде эллипса. Дополнительные области возможно определять самостоятельно, создавая свои классы на основе класса HotSpot. Более подробную информацию о том, как это реализуется, можно получить в [ 1 ] .