Einführung in die Verwendung von HTML-Bereichsbild-Hotspots mit einer Liste zugehöriger Eigenschaften

Der <area>-Tag wird vor allem in Imagemaps verwendet. Damit lässt sich in einer Imagemap ein aktiver Bereich (auch Hotspot genannt) festlegen. Bewegt der Benutzer die Maus über den angegebenen aktiven Bereich und klickt darauf, wird automatisch eine Verknüpfung zu einer voreingestellten Seite hergestellt. Die grundlegende grammatische Struktur ist wie folgt:

<Bereich Klasse=Typ ID=Wert href=URL alt=Text Form=Bereichsform Spalten=Wert>

Klasse und ID: Geben Sie jeweils den Typ und die ID-Nummer des Hotspots an.

alt: Alternativer Text zum Festlegen des Hotspots.

href: wird verwendet, um die URL-Adresse festzulegen, mit der der Hotspot verknüpft ist.

Form und Koordinaten: sind die beiden Hauptparameter, mit denen die Form und Größe des Hotspots festgelegt wird. Die grundlegende Verwendung ist wie folgt:

<area shape="rect" coords="x1, y1,x2,y2" href=url> bedeutet, dass die Form des Hotspots auf ein Rechteck festgelegt wird, mit den Koordinaten des Scheitelpunkts der oberen linken Ecke als (X1, y1) und den Koordinaten des Scheitelpunkts der unteren rechten Ecke als (X2, y2).

<area shape="circle" coords="x1, y1,r" href=url> bedeutet, die Form des Hotspots auf einen Kreis mit den Mittelpunktskoordinaten (X1, y1) und dem Radius r festzulegen.

<area shape="poligon" coords="x1, y1,x2,y2 ......" href=url> bedeutet, dass die Form des Hotspots auf ein Polygon festgelegt ist und die Koordinaten jedes Scheitelpunkts in der Reihenfolge (X1, y1), (X2, y2), (x3, y3) ...... sind.

Hinweis: Die Positionen der Punkte x1, y1, x2, y2 werden durch das Bild bestimmt, nicht durch die Größe des Fensters.

Das Tag <area> wird verwendet, um den effektiven Bereich in der Imagemap zu unterteilen. Der unterteilte effektive Bereich muss also innerhalb des Bereichs der Imagemap liegen. Bevor Sie also das Tag <area> zum Unterteilen des Bereichs verwenden, müssen Sie ein anderes HTML-Tag <map> verwenden, um den effektiven Bereich der Imagemap festzulegen und einen Namen für die angegebene Imagemap zu vergeben. Die Verwendung dieses Tags ist sehr einfach, nämlich <map name="image map name">... </map>.

Das folgende Beispiel veranschaulicht die Verwendung dieser beiden Tags:

Hier ist ein Bild eines neuen Bücherregals. Der gewünschte Effekt ist: Wenn Sie mit der Maus auf das Buch „URL-Verzeichnis“ klicken, öffnet sich ein neues Fenster, in dem die Einführung und die Bestell-Webseite des Buches angezeigt werden (urlall.htm); wenn Sie mit der Maus auf das Buch „Website-Design-Leitfaden“ klicken, öffnet sich ein neues Fenster, in dem die Einführung und die Bestell-Webseite des Buches angezeigt werden (siteall.htm); wenn Sie mit der Maus auf das Buch „Web Page Skills Encyclopedia“ klicken, öffnet sich ein neues Fenster, in dem die Einführung und die Bestell-Webseite des Buches angezeigt werden (pagejqlall.htm). Zubereitung:

1. Fügen Sie das Bild ein und legen Sie die entsprechenden Parameter des Bildes fest. Legen Sie im Tag <img> den Parameter usemap="newbook" ismap fest, um den Verweis auf die Imagemap (newbook) anzugeben.

2. Verwenden Sie das Tag <map>, um den Wirkungsbereich der Imagemap festzulegen, und benennen Sie sie: newbook;

3. Verwenden Sie das Tag <area>, um die drei Bücher in drei rechteckige Bereiche zu unterteilen, und legen Sie ihre Linkparameter href fest.

Die Produktion ist abgeschlossen. Der Quellcode dieses Beispiels lautet wie folgt:

Optionale Attribute

Kernattribute

Das <area>-Tag unterstützt die folgenden Kernattribute:

Weitere Informationen zu den Kerneigenschaften.

Ereignisattribute

Das <area>-Tag unterstützt die folgenden Ereignisattribute: