Используя ISMAP HTML

Для использования изображения с атрибутом ismap, вы просто кладете ваше изображение внутри гипер соединения и используете атрибут ismap который делает им специальное изображение и когда потребитель щелкает некоторое место в пределах изображения, браузер проходите координаты указателя мыши вместе с URL определенного в бирке <a> к серверу паутины. Сервер использует координаты мыш-указателя для того чтобы определить который документ, котор нужно поставить назад к браузеру.

Когда ismap использован, атрибут href содержа бирки <a> должен содержать URL приложения сервера как cgi или сценарий etc. PHP обрабатывать входящий запрос основанный на пройденных координатах.

Координаты положения мыши пикселы экрана подсчитанные от верхн-левого угла изображения, начиная с (0,0). Координаты, предшествуемые вопросительным знаком, добавлены к концу URL.

Например, если потребитель щелкает 50 пикселы сверх и 30 пикселы вниз от верхн-левого угла следующего изображения:, то

Щелчок после соединения

Что было произведено следующим фрагментом Кода:

<!DOCTYPE html>
<html>
<head>
<title>ISMAP Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href="/cgi-bin/ismap.cgi" target="_self"> 
   <img ismap src="/images/logo.png" alt="Tutorials Point" border="0"/> 
</a>
</body>
</html>

После этого браузер посылает следующие параметры поиска к серверу паутины:

/cgi-bin/ismap.cgi?20,30

Теперь эти пройденные координаты могут быть обработаны одним из следующих 2 путей:

Используя архив CGI (или PHP если вы не используете архив CGI), то
Используя архив карты

Архив CGI или PHP

Следование Код perl для сценария ismap.cgi который используется в вышеуказанном примере:

#!/usr/bin/perl

local ($buffer, $x, $y);
# Read in text
$ENV{'REQUEST_METHOD'} =~ tr/a-z/A-Z/;
if ($ENV{'REQUEST_METHOD'} eq "GET")
{
   $buffer = $ENV{'QUERY_STRING'};
}
# Split information into name/value pairs
($x, $y) = split(/,/, $buffer);

print "Content-type:text/html\r\n\r\n";
print "<html>";
print "<head>";
print "<title>ISMAP</title>";
print "</head>";
print "<body>";
print "<h2>Passed Parameters are : X = $x, Y = $y </h2>";
print "</body>";
print "</html>";

1;

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

Архив карты

Архив карты можно использовать для того чтобы хранить расположение архивов HTML что вы хотите читателя быть принятым к когда щелкнута зона между определенными координатами «.»

Вы держите архив значения по умолчанию на первом положении и другие архивы положены соответствие к различным координатам как показан ниже в архив ismap.map.

default http://www.tutorialspoint.com
rect    http://www.tutorialspoint.com/html 5,5 64,141
rect    http://www.tutorialspoint.com/css  91,5 127,196
circle  http://www.tutorialspoint.com/javscript  154,150,59

Этот путь вы можете задать различные соединения к различной части изображения и когда те координаты щелкнуты, вы можете раскрыть соединенный документ. Так препятствуйте нам перезаписать вышеуказанный пример используя архив ismap.map:

<!DOCTYPE html>
<html>
<head>
<title>ISMAP Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href="/html/ismap.map" target="_self"> 
   <img ismap src="/images/logo.png" alt="Tutorials Point" border="0"/> 
</a>
</body>
</html>

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

Система координат

Натуральная величина coords зависел полностью на форме в вопросе. Здесь сводка, быть следовать детальными примерами. Вы можете использовать любой доступный инструмент как Adobe Photoshop или краска MS для того чтобы обнаружить различные координаты доступные на изображении, котор нужно использовать для ISMAP.

Линии начиная с # комментарии. Каждая другая non-пустая линия состоит из следующего:

rect = x₁ , y₁ , x₂ , y₂: x₁ и y₁ координаты верхнего левого угла прямоугольника; x₂ и y₂ координаты более низкого правого угла.
круг = x_c , y_c , радиус: x_c и y_c координаты центра круга, и радиус радиус круга. Круг центризованный на 200,50 с радиусом 25 имел бы coords= " 200,50,25" атрибута
поли = x₁ , y₁ , x₂ , y₂ , x₃ , y₃ ,… x_n , y_n: Различные x-y пары определяют вершины (пункты) полигона, при «линия» будучи нарисованным от одного пункта к следующему пункту. Ромбовидный полигон с своим верхним пунктом на 20,20 и 40 пикселах поперек на свои самые широкие этапы имел бы coords= " 20,20,40,40,20,60,0,40" атрибута.

Все координаты по отношению к верхн-левому углу изображения (0,0). Каждая форма имеет родственное URL.You может использовать любое програмное обеспечение изображения для того чтобы знать координаты различных положений.

html_image_links.htm