Wiki-учебник по веб-технологиям: JavaScript/ИспользованиеСерверныхКартИзображений ...

Главная | Каталог |

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


Клиентские карты предоставляют функциональность для выполнения большинства задач, но стандартные (иногда называемые серверными) карты изображений придают ещё большую гибкость. Вы специфицируете стандартную карту тэгом атрибутом 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.