Клиентский JavaScript 1.3 Руководство


Использование серверных карт изображений


Клиентские карты предоставляют функциональность для выполнения большинства задач, но стандартные (иногда называемые серверными) карты изображений придают ещё большую гибкость. Вы специфицируете стандартную карту тэгом атрибутом ISMAP в тэге IMG, который является гиперссылкой. Например,

<A HREF="img.html"><IMG SRC="about:logo" BORDER=0 ISMAP></A>

Если Вы щёлкаете по изображению с атрибутом ISMAP, Navigator запрашивает URL в такой форме:

URL?x,y

где URL это документ, специфицированный значением атрибута HREF, а x и y это горизонтальная и вертикальная координаты указателя мыши (в пикселах от верхнего левого угла изображения) во время щелчка. (Изображение "about:logo" встроено в Navigator и отображает логотипом Netscape.)

Запросы карт традиционно отправляются на сервер, где CGI-программа выполняет функцию просмотра базы данных. С помощью клиентского JavaScript, однако, Вы можете просматривать на стороне клиента. Можно использовать свойство search объекта location для разбора координат x и y и выполнения соответствующей акции. Например, у Вас имеется файл img.html со следующим содержимым:

<H1>Click on the image</H1>
<P>
<A HREF="img.html"><IMG SRC="about:logo" BORDER=0 ISMAP></A>
<SCRIPT>
str = location.search
if (str == "")
document.write("<P>No coordinates specified.")
else {
   commaloc = str.indexOf(",") // местонахождение запятой
   document.write("<P>The x value is " + str.substring(1, commaloc))
   document.write("<P>The y value is " +
      str.substring(commaloc+1, str.length))
}
</SCRIPT>

Если Вы щёлкаете по изображению, Navigator перезагружает страницу (поскольку атрибут HREF специфицирует тот же самый документ), добавляя в URL координаты x и y щелчка мыши. Операторы блока else отображают затем координаты x и y. На практике Вы можете перенаправлять на другую страницу (устанавливая location) или выполнять какое-нибудь другое действие на основе значений x и y.



Содержание раздела