So verwenden Sie den HTML-Bereichsbild-Hotspot

Dieses Mal zeige ich Ihnen, wie Sie den HTML-BereichBild-Hotspot verwenden und welche Vorsichtsmaßnahmen für die Verwendung des HTML-Bereichs-Bild-Hotspots gelten. Das Folgende ist ein praktischer Fall Schauen Sie mal rein. Das

03fc64e1e502d5ba947b3a9af06d2d2a-Tag wird hauptsächlich für die Bild-Karte verwendet. Dieses Tag kann verwendet werden, um den Wirkungsbereich (auch Hotspot genannt) in der Bildkarte festzulegen Wenn der Benutzer die Maus auf den angegebenen Aktionsbereich bewegt, wird er automatisch mit der voreingestellten Seite verknüpft. Die grundlegende Syntaxstruktur lautet wie folgt:

<area class=type id＝Value href＝url alt＝text shape＝area-shape coods＝value>

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

alt: Alternativer Text zum Festlegen von Hotspots.

href: wird verwendet, um die mit dem Hotspot verknüpfte URL-Adresse festzulegen.

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>表示设定热点的形状为矩形，左上角顶点坐标为（X1,y1），右下角顶点坐标为（X2,y2）。 
<area shape="circle" coords="x1, y1,r" href=url>表示设定热点的形状为圆形，圆心坐标为（X1,y1），半径为r。 
<area shape="poligon" coords="x1, y1,x2,y2 ......" href=url>表示设定热点的形状为多边形，各顶点坐标依次为（X1,y1）、（X2,y2）、（x3,y3） ......。

Hinweis: x1, y1, x2, y2 Die Positionen dieser Punkte werden basierend auf dem Bild und nicht auf der Größe des Fensters bestimmt.

c1d0cfebc62abde21fb0acd79be02baa-Markierung teilt den Aktionsbereich in der Bildkarte, daher muss der Aktionsbereich, den es teilt, innerhalb des Bereichs der Bildkarte liegen, also vor der Verwendung von a9617142ca0761c7477432977196b5f8 wird verwendet, um den Umfang der Imagemap festzulegen und einen Namen für die angegebene Imagemap festzulegen. Kartenname="Bildkartenname"> .... .. 205a5be6c2444442266d3019416bb37a.

Das Folgende ist ein Beispiel, um die Verwendung dieser beiden Tags zu veranschaulichen:

Hier ist ein Bild eines neuen Bücherregals. Der Effekt ist: wenn die Maus auf das Buch „Website-Verzeichnis“ klickt. Wenn Sie mit der Maus auf das Buch „Website Design Guide“ klicken, wird ein neues Fenster geöffnet, um die Einführung und die Bestellseite (urlall.htm) zu diesem Buch anzuzeigen .htm); wenn die Maus auf das Buch „Web Page Skills Encyclopedia“ klickt, wird ein neues Fenster geöffnet, um die Einleitung und die Bestellseite des Buches anzuzeigen (pagejqlall.htm). Produktionsmethode:

1. Fügen Sie das Bild ein, legen Sie die relevanten Parameter des Bildes fest und legen Sie den Parameter usemap="newbook" ismap im a1f02c36ba31691bcfe87b2722de723b fest, um das Zitat2. Verwenden Sie das Tag dab9f699790ab0922e596ecb9f6677d5 und benennen Sie es: newbook; Verwenden Sie das Tag 03fc64e1e502d5ba947b3a9af06d2d2a. Teilen Sie die drei rechteckigen Aktionsbereiche entsprechend der Position der drei Bücher und legen Sie deren Verknüpfungsparameter href fest.

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



Einige Punkte, die beim Erstellen der in diesem Artikel vorgestellten Effekte beachtet werden sollten :

1. Vergessen Sie nicht, die Parameter usemap und ismap im Tag a1f02c36ba31691bcfe87b2722de723b festzulegen. Der Parameterwert von usemap muss mit dem Parameterwert name im Tag dab9f699790ab0922e596ecb9f6677d5 übereinstimmen , das heißt, der „Image-Map-Name“ muss konsistent sein.

<img src="http://www.webjx.com/images/logo.gif" width="207" height="148" alt="新书架" hspace="10" align="left" usemap="#newbook" border="0"> 
<map name="newbook"> 
<area shape="rect" coords="56,69,78,139" href="urlall.htm" target="_blank" alt="这里收集十万多个网址。" title="这里收集十万多个网址。"> 
<area shape="rect" coords="82,70,103,136" href="siteall.htm" target="_blank" alt="网站设计师的启蒙读本。" title="网站设计师的启蒙读本。"> 
<area shape="rect" coords="106,68,128,136" href="pageall.htm" target="_blank" alt="网页制作者不可不读的书。" title="网页制作者不可不读的书。"> 
</map>

2. Alle Hotspot-Bereiche in derselben „Image-Map“ müssen im Geltungsbereich der Image-Map liegen, d. h. alle < Bereichs-Tags müssen zwischen dab9f699790ab0922e596ecb9f6677d5 und

liegen. Das durch den Cords-Parameter festgelegte Koordinatenformat muss mit der Form des Aktionsbereichs übereinstimmen Der Formparameter soll verhindern, dass er in dem durch den Formparameter festgelegten rechteckigen Aktionsbereich erscheint, während der in Kordeln festgelegte polygonale Bereich auftritt. Das Phänomen der Scheitelpunktkoordinaten tritt auf.

Unterschiede zwischen HTML und XHTML

In HTML erfordert das 03fc64e1e502d5ba947b3a9af06d2d2a-Element kein schließendes Tag.

Aber in XHTML muss das 03fc64e1e502d5ba947b3a9af06d2d2a-Element korrekt geschlossen werden.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So öffnen Sie ein temporäres QQ-Dialogfeld auf einer Webseite

So verwenden Sie den Trigger Methode, um dies zu erreichen Klicken Sie auf die Dateitypeingabe, um das Dialogfeld zur Dateiauswahl aufzurufen

So verwenden Sie js in HTML, um die lokale Systemzeit abzurufen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den HTML-Bereichsbild-Hotspot. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!