Beispielcode zum Setzen von Hotlinks und Koordinatenwerten für Webbilder
|
Manchmal müssen Sie mehrere Bereiche auf einem Bild festlegen. Sie können verschiedene Seiten aufrufen, indem Sie mit der Maus auf verschiedene Bereiche des Bildes klicken, oder Sie können eine bestimmte Seite aufrufen, indem Sie auf einen bestimmten Bereich des Bildes klicken. Dies ist der Hotlink der Webseite. Code kopieren Der Code lautet wie folgt:<img src="test.jpg" usemap="#testmap" alt="test" /> <map name="testmap" id="testmap"> <area shape="Kreis" coords="180,139,14" href="test1.html" alt="test1" /> <area shape="Kreis" coords="129,161,10" href="test2.html" alt="test2" /> <area shape="rect" coords="0,0,110,260" href="test3.html" alt="test3" /> </Karte> Hinweis: Das usemap-Attribut in <img> kann entweder auf das id- oder das name-Attribut in <map> verweisen (wird vom Browser bestimmt), daher müssen wir sowohl das id- als auch das name-Attribut zu <map> hinzufügen.
Wie erhält man also diesen Koordinatenwert? Methode 1: Erstellen Sie eine neue HTML-Seite und fügen Sie den folgenden Code in den Textkörper ein: Code kopieren Der Code lautet wie folgt:<a href="#"><img src="test.jpg" ismap="ismap"></a> Beachten Sie das " ismap='ismap '". Öffnen Sie mit diesem Attribut diese HTML-Seite und bewegen Sie den Cursor an eine beliebige Stelle im Bild. In der Statusleiste in der unteren linken Ecke der Webseite wird der aktuelle Koordinatenwert angezeigt.
Auf diese Weise können Sie den Koordinatenwert erhalten. Methode 2: Öffnen Sie Dreamwever, erstellen Sie eine neue Seite, fügen Sie ein Bild ein,
Klicken Sie auf das „Rechteck“ oder andere Hotspot-Tools und ziehen Sie dann die Position auf dem Bild.
Öffne den Codebereich erneut
Dies wurde bereits generiert. |
<<: CSS wählt das erste untergeordnete Element unter dem übergeordneten Element aus (:first-child)
>>: Der Unterschied und die Wahl zwischen Datum und Uhrzeit und Zeitstempel in MySQL
Artikel empfehlen
Das adaptive CSS-Layout realisiert die Gesamtzentrierung von Unterelementelementen und die Linksausrichtung von internen Elementen
Bei der täglichen Arbeit stoßen wir möglicherweis...
Installations-Tutorial für VMware Workstation 12 Pro Linux
Dieser Artikel zeichnet das Linux-Tutorial zur In...
display:grid in CSS3, eine Einführung in das Rasterlayout
1. Rasterlayout (Raster): Es unterteilt die Webse...
Native JS realisiert den besonderen Effekt der Verbreitung von Liebe durch Mausbewegungen
In diesem Artikel wird ein JS-Spezialeffekt vorge...
Schreiben Sie mit CSS in drei Schritten einen Coupon für eine Shopping-Card
Heute ist der 618. und alle großen Einkaufszentre...
Fünf Verzögerungsmethoden für die MySQL-Zeitblindinjektion
Fünf Verzögerungsmethoden für die MySQL-Zeitblind...
mysql 8.0.20 winx64.zip komprimierte Version Installations- und Konfigurationsmethode grafisches Tutorial
Das Installationstutorial der komprimierten Versi...
SQL-Implementierung LeetCode (176. Zweithöchstes Gehalt)
[LeetCode] 176. Zweithöchstes Gehalt Schreiben Si...
Bedingte Kommentare zur Bestimmung des Browsers (IE-Reihe)
<!--[if IE 6]> Nur IE6 kann erkennen <![e...
Tutorial zur MySQL-Infrastruktur: Detaillierte Erläuterung des Ausführungsprozesses von Abfrageanweisungen
Vorwort Ich wollte schon immer wissen, wie eine S...
MySQL sollte niemals Update-Anweisungen wie diese schreiben
Inhaltsverzeichnis Vorwort Ursache Phänomen warum...
JavaScript-Tippspiel
In diesem Artikel wird der spezifische JavaScript...
Beispielcode zur Implementierung von Zeitleisten- und Animationseffekten mit JavaScript (Front-End-Komponentenbildung)
Inhaltsverzeichnis Code-Bereinigung "Frames&...
Detaillierte Erklärung zur Verwendung von Titel-Tags und Absatz-Tags in XHTML
XHTML-Überschriftenübersicht Wenn wir Word-Dokume...
MySQL-Abfrageoptimierung: Eine Tabellenoptimierungslösung für 1 Million Daten
1. Abfragegeschwindigkeit von zwei Abfrage-Engine...