HTML Links zum Bild

Wir haben gesehen, wie man Hypertext-Link zu erstellen mit Text und wir haben auch gelernt, wie man Bilder in unseren Internetseiten zu verwenden. Jetzt werden wir lernen, wie man Bilder verwenden, um Hyperlinks zu erstellen.

Beispiel

Es ist einfach, um ein Bild als Hyperlink verwenden. Wir müssen nur ein Bild im Inneren Hyperlink am Ort der Text zu verwenden, wie unten dargestellt:

<!DOCTYPE html>
<html>
<head>
<title>Image Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href="https://www.tutorialspoint.com" target="_self"> 
   <img src="/images/logo.png" alt="Tutorials Point" border="0"/> 
</a>
</body>
</html>

Dies wird produzieren folgendes Ergebnis, in dem Sie auf die Bilder klicken, um erreichen zur Homepage des Tutorials Punkt .

Click following link

Das war der einfachste Weg zur Schaffung von Hyperlinks mit Bildern. Als nächstes werden wir sehen, wie wir kann Maus-Sensitive-Bildverknüpfungen erstellen.

Maus-Sensitive Bilder

Die HTML-und XHTML-Standards bieten eine Funktion, die Sie viele verschiedene Links einbetten innen einem einzigen Bild können.Sie können erstellen verschiedene Links auf der Einzelbild auf der Basis verschiedener Koordinaten vorhanden auf dem Bild .einst anders Links sind auf verschiedene Koordinaten angeschlossen ist, können wir verschiedene klick Teile des Bildes , um Ziel Dokumente zu öffnen. so Maus-sensitive Bilder werden als Imagemaps bekannt.

Es gibt zwei Möglichkeiten, um Karten zu erstellen Bild:

sServer-Imagemaps - Dies ist ermöglichen durch dieismap -Attribut des <img> -Tag und erfordert Zugriff auf einen Server und verwandte Bild Karte Verarbeitung Anwendungen.
Client-Imagemaps - Dies ist mit erstellt usemap -Attribut des <img> Tag, zusammen mit den entsprechenden <map> und <Bereich> tags.

Server-Imagemaps

Hier können Sie einfach legte Ihren Bild innen einem Hyper-Link und Einsatz ismap Attribut, das es spezielle Bild macht und wenn der Benutzer einen Ort innerhalb des Bildes klickt, geht der Browser die Koordinaten des Mauszeigers entlang mit dem in der URL spezifiziert <ein> Tag, um den Web-Server. Der Server verwendet die Maus-Zeiger-Koordinaten zu bestimmen ,welches Dokument liefern zurück an den Browser.

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

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

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

Click following link

welche hat gewesen durch die folgende Codeausschnitt generiert :

<!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 welche kann verarbeitet durch vonismap.cgi -Skript oder Map-Datei und Sie können zu verknüpfen, was auch immer Dokumente, die Sie mögen zu diesen Koordinaten:

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

diese Weise Sie kann zuweisen verschiedene Links zu verschiedenen Koordinaten des Bildes und wenn diese Koordinaten sind geklickt haben, können Sie öffnen entsprechenden verlinkten Dokument. Um mehr über ismap-Attribut , können Sie prüfen Wie Sie benutzen Bild ismap?

Hinweis: Sie werden CGI-Programmierung lernen, wenn Sie werden studie Perl-Programmierung . Sie können schreiben Ihr skript zu verarbeiten diese übergeben Koordinaten mit PHP oder eine andere Schrift als auch.Denn jetzt lassen Sie konzentrieren sich auf das Lernen von HTML und später können Sie diesen Abschnitt überdenken.

Client-Imagemaps

Client Imagemaps sind ermöglichen durch der usemap -Attribut des <img /> Tag und durch spezielle definiert<map> und <Bereich> Erweiterung Tags.

Das Bild dass ist gehen um die map zu bilden ist eingefügt in die Seite unter Verwendung dem <img /> Tag als normales Bild, außer es trägt eine zusätzliche Attribut namens usemap. Der Wert des usemap Attribut ist der Wert welche werden sein verwendet in ein <map> Tag zu verknüpfen map und Image-Tags. Die <map> zusammen mit< Bereich > Tags definieren alle Bildkoordinaten und die entsprechenden Links.

Die <Bereich> -Tag in der Karte-Tag, gibt an die Form und Die koordinaten zu definieren Grenzen hinweg der einzelnen anklickbaren Hotspot auf das Bild. Hier ist ein Beispiel aus der Bild karte:

<!DOCTYPE html>
<html>
<head>
<title>USEMAP Hyperlink Example</title>
</head>
<body>
<p>Search and click the hotspot</p>
<img src=/images/html.gif alt="HTML Map" border="0" usemap="#html"/>
<!-- Create  Mappings -->
<map name="html">
   <area shape="circle" 
   coords="80,80,20" href="/css/index.htm" alt="CSS Link" target="_self" />
   <area shape="rect" 
   coords="5,5,40,40" alt="jQuery Link" href="/jquery/index.htm" target="_self" />
</map>
</body>
</html>

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 gefolgt werden:

rect = x₁, y₁, x₂, y₂: x₁ and y₁ sind die Koordinaten der linken oberen Ecke des Rechtecks; ; x₂ und y₂ sind die Koordinaten der unteren rechten Ecke.
Kreis = x_c, y_c, radius: x_c and y_c sind die Koordinaten der Mitte des Kreises, und der Radius ist der Kreisradius. Ein Kreis zentriert um 200, 50 mit einem Radius von 25 wäre haben das Attribut Koordinaten="200,50,25"
poly = x₁, y₁, x₂, y₂, x₃, y₃ , ... x_n , y_n: Die verschiedenen x-y Paare definieren EckPunkte (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 über an der breitesten Punkte würde das Attribut haben Koordinaten="20,20,40,40,20,60,0,40".

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.