Mit Hilfe von HTML ISMAP

Um ein Bild mit ismap Attribut zu verwenden, setzen Sie einfach Ihren Bild in einem Hyper-Link und verwenden ismap Attribut, das es spezielle Bild macht und wenn der Benutzer einen Ort innerhalb des Bildes klickt, geht der Browser die Koordinaten des Mauszeigers mit dem in der URL spezifiziert & lt; a & gt; Tag, um den Web-Server. Der Server verwendet die Maus-Zeiger-Koordinaten zu bestimmen, welches Dokument an den Browser zu liefern.

Wenn ismap verwendet wird, das href-Attribut des enthaltenden <a> Tag muss die URL einer Server-Anwendung wie eine CGI-oder PHP-Skript etc., um die eingehende Anfrage auf der Grundlage der übergebenen Koordinaten verarbeiten enthalten.

Die Koordinaten der Mausposition sind Bildschirmpixel von der oberen linken Ecke des Bildes gezählt, beginnend mit (0,0). Die Koordinaten, durch ein Fragezeichen vorangestellt, werden an das Ende der URL hinzugefügt.

Zum Beispiel, wenn ein Benutzer über 50 Pixel und 30 Pixel von der linken oberen Ecke des folgenden Bild klickt unten:

Click following link

Die durch die folgende Codeausschnitt generiert wurde:

<!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>

Dann sendet der Browser die folgenden Suchparameter an den Web-Server:

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

Nun sind diese übergebenen Koordinaten können durch eine der folgenden zwei Arten verarbeitet werden:

Using a CGI (or PHP file if you are not using CGI file)
Using a map file

A CGI or PHP file

Following is the perl code for ismap.cgi script which is being used in the above example:

#!/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;

Da Sie in der Lage, übergebenen Koordinaten zu analysieren sind, können Sie eine Liste von setzen, wenn Bedingungen , um gebenen Koordinaten lesen und senden entsprechenden verlinkten Dokument an den Browser zurück.

Eine Map-Datei

Eine Map-Datei kann verwendet werden, um die Position von HTML-Dateien, die Sie wollen, dass die Leser auf, wenn der Bereich zwischen den identifizierten Koordinaten genommen werden speichern "geklickt haben."

Sie halten Standard-Datei an der ersten Stelle und andere Dateien werden gesetzt, die verschiedenen Koordinaten wie unten in gezeigt ismap.map Datei.

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

Auf diese Weise können Sie verschiedene Links zu anderen Teil des Bildes und, wenn diese Koordinaten angeklickt werden, können verknüpft werden geöffnete Dokument zuweisen. Lassen Sie uns also neu schreiben obigen Beispiel mitismap.map Datei:

<!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>

Bevor Sie versuchen obigen Beispiel, müssen Sie sicherstellen, dass Ihr Webserver hat Konfiguration erforderlich, um Image-Map-Datei zu unterstützen..

Koordinatensystem

Der tatsächliche Wert der Koordinaten ist völlig abhängig von der Form in Frage. Hier ist eine Zusammenfassung, die von detaillierten Beispielen folgen. Sie können jede verfügbare Tool wie Adobe Photoshop oder MS Mit Paint verschiedene Koordinaten auf dem Bild zu erkennen verfügbar für ISMAP verwendet werden.

Ein Zeilen, die mit # sind Kommentare. Jeder andere nicht-leeren Zeile besteht aus den folgenden:

rect = x₁ , y₁, x₂ , y₂: x₁ und y₁ sind die Koordinaten der linken oberen Ecke des Rechtecks; x₂ and y₂ sind die Koordinaten der unteren rechten Ecke.
Kreis = x_c, y_c, radius: x_c und y_c nd die Koordinaten der Mitte des Kreises, und der Radius ist der Kreisradius. Ein Kreis um 200,50 mit einem Radius von 25 zentriert wäre das Attribut haben Koordinaten ="200,50,25"
poly = x₁, y₁, x₂, y₂, x₃, y₃, ... x_n , y_n: Die verschiedenen xy-Paare definieren Ecken (Punkte) des Polygons, mit einer "Linie", die von einem Punkt zum nächsten Punkt gezogen. Ein Diamant-förmige Polygon mit seiner oberen Punkt 20,20 und 40 Pixel an der breitesten Punkte würde das Attribut Koordinaten = "20,20,40,40,20,60,0,40" haben .

Alle Koordinaten sind relativ zur oberen linken Ecke des Bildes (0,0). Jede Form hat eine verwandte URL.You können jedes Bild Software verwenden, um die Koordinaten der verschiedenen Positionen kennen.

html_image_links.htm