IZONE - http://www.izcity.com/ - бесплатный софт, вэб-сервисы, ресурсы для раскрутки, свежие номера журнала "Internet Zone".

Изображения ismap

Я познакомлю вас с изображениями ismap, потому что они дают возможность внести приятное разнообразие в ваш сайт. Изображения ismap поддерживаются графическими броузерами и, естественно, имеют право на жизнь, хотя с приходом новых веяний в HTML (особенно Java-апплетов) этот способ стал настоящей редкостью. Конечно, в 80% случаев можно найти этому варианту более быструю замену, но все же иногда именно ismap окажется предпочтительнее всего.
Что же такое ismap -изображение? Внешне, с точки зрения пользователя, ismap - это простенький рисунок со ссылкой. Но в отличие от простого рисунка-ссылки (при щелчке на котором просто происходит переход по заданному URL), при щелчке на ismap-изображении на сервер передаются координаты щелчка и, соответственно, имеется возможность в зависимости от них произвести то или иное действие.
Синтаксис ismap-изображений очень простой, он почти не отличается от того, как оформляется рисунок для якоря гиперссылки:

<A href="cgi-bin/somescript.cgi">
<IMG src="somepic.gif" border=0 ismap >
</A>

Заметьте, что все отличие заключается лишь в том, что в теге <IMG> добавлен атрибут ismap. Он говорит броузеру, что, когда пользователь щелкнет на картинке, нужно не просто перейти к URL, указанному в <A href="URL">, а еще и добавить к этому URL координаты той точки, на которой пользователь произвел щелчок. В нашем примере, если пользователь щелкнет в точке (x = 10, y = 15), то броузер перейдет на следующий URL:

>http://www.somehost.ru/cgi-bin/somescript.cgi?10,15

Как видите, броузер просто прибавил к указанному URL параметры в формате x, y. С точки зрения скрипта это означает, что координаты попадают в переменную QUERY_STRING. Как их оттуда извлечь? Нет ничего проще:

($x,$y)=split(/,/,$ENV{'QUERY_STRING'});

Вот скрипт, который просто показывает координаты точки щелчка:

#!/usr/bin/perl
#ismap_xy.cgi
($x,$y)=split(/,/,$ENV{'QUERY_STRING'});
print "Content-Type: text/html\n\n";
print "<HTML>";
print "<HEAD>";
print "<TITLE>Ismap X Y</TITLE>";
print "</HEAD>";
print "<BODY>";
print "<H1>Вы щелкнули рисунок в точке: x=$x, y=$y</H1>";
print "</BODY></HTML>";

Что делать с полученными координатами дальше, зависит только от вашей фантазии. Дайте ей ход, и у вас все получится! Очень часто ismap применяют для графического оглавления сайта: когда пользователь щелкает на разных частях рисунка, он переходит к разным страницам сайта. Если это сделано в веселом стиле, да еще с оригинальной авторской графикой, это будет великолепно смотреться и, несмотря на некоторую задержку (лишний рисунок на странице -- это всегда некоторая задержка), доставит пользователю немало удовольствия!

Сам переход по нужному URL реализуется очень легко. Вспомните урок 3 про заголовки запросов и ответов. Если скрипт выдаст нужный URL в поле Location: заголовка ответа CGI, то броузер произведет переход по этому URL.
Следующий пример покажет это. Заготовьте файл urlmap.txt, в котором будет информация, представленная в виде строк в таком формате:

minx miny maxx maxy URL

Здесь значения minx, miny, maxx и maxy задают участок рисунка, а следующее за ними поле указывает URL, которому этот участок соответствует. Вот пример такого файла:

1 1 20 50 http://www.uic.nnov.ru/~paaa/index_p.html
1 50 20 100 http://www.uic.nnov.ru/~paaa/projects.html
;20 1 100 100 http://www.uic.nnov.ru/~paaa/cgi-bin/guestbook.cgi

Теперь где-нибудь на своей Web-странице разместите такой HTML-код:

<A href="cgi-bin/testismap.cgi"><IMG src="gifs/doom2.jpg"
border=0 ismap></A>
Наконец, сам скрипт testismap.cgi будет иметь вот такой несложный вид:

#!/usr/bin/perl
#testismap.cgi
###########
#URL по умолчанию, переходим к нему, если щелчок выполнен
#на участке, которому не сопоставлен URL
$default_url="http://www.uic.nnov.ru/~paaa/";
#файл с информацией об URL
$url_map_file="urlmap.txt";
############
($x,$y)=split(/,/,$ENV{'QUERY_STRING'});
open(F,"$url_map_file")|| print "Location: $default_url\n\n";
$url=$default_url;
foreach(){
chomp;
($minx,$miny,$maxx,$maxy,$URL)=split(/\s+/);
if(($x>=$minx)&&($x<$maxx)&&
     ($y>=$miny)&&($x<$maxy)){$url=$URL;}
}
close(F);
print "Location: $url\n\n";

Естественно, это слишком простое применение. Если такая информация достаточно статична, то ее лучше все-таки размещать у клиента, тем более в HTML имеются средства для создания карт изображений. Но то, что расположено у клиента, не имеет такой потенциальной мощи, как то, что расположено на сервере. Тем более, если нужно обратиться к какой-нибудь динамической базе данных. Представьте себе, например, базу данных прогноза погоды. Щелкнув на карте, клиент передает координаты щелчка, а сервер ищет в своей динамической базе данных запись о погоде в соответствующей местности. Или пусть (это еще более динамический вариант) вы наблюдаете за каким-нибудь процессом, и скрипт выводит соответствующий график. Произведя щелчок на нем, вы можете получить детализацию нужного фрагмента графика.

В общем, данное средство, несмотря на свою простоту, действительно мощное. Теперь вы сможете при необходимости применять его. Помните, такую вещь трудно реализовать другими методами.

Сергей Гуйдя, irinag@mail.primorye.ru
http://www.brima.aiq.ru/

Использованы материалы из книги: "CGI-программирование: учебный курс".

 


Copyright © "Internet Zone", http://www.izcity.com/, info@izcity.com