So verwenden Sie den HTML-Bereichsbild-Hotspot-HTML-Tutorial-php.cn

So verwenden Sie den HTML-Bereichsbild-Hotspot

php中世界最好的语言

Freigeben： 2018-02-11 10:47:40

Original

2784 Leute haben es durchsucht

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

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

Nach dem Login kopieren

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） ......。

Nach dem Login kopieren

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

-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 < Um den Bereich zu unterteilen, muss HTML verwendet werden. Ein weiteres Tag wird verwendet, um den Umfang der Imagemap festzulegen und einen Namen für die angegebene Imagemap festzulegen. Kartenname="Bildkartenname"> .... .. .

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 fest, um das <🎜 der Bildkarte anzugeben ( newbook) >Zitat2. Verwenden Sie das Tag und benennen Sie es: newbook; Verwenden Sie das Tag . 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 festzulegen. Der Parameterwert von usemap muss mit dem Parameterwert name im Tag ü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>

Nach dem Login kopieren

2. Alle Hotspot-Bereiche in derselben „Image-Map“ müssen im Geltungsbereich der Image-Map liegen, d. h. alle < Bereichs-Tags müssen zwischen 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 -Element kein schließendes Tag.

Aber in XHTML muss das -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!