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
Docker-Tutorial: Container verwenden (einfaches Beispiel)
Wenn Sie mit Docker noch nicht vertraut sind, seh...
Natives JS zum Erzielen von Verzeichnis-Scrolleffekten
Hier ist ein Text-Scrolling-Effekt, der mit nativ...
Die beste Erklärung zu HTTPS
Guten Morgen allerseits, ich habe meinen Artikel ...
JavaScript-Grundlagen für Schleife und Array
Inhaltsverzeichnis Schleife - für Grundlegende Ve...
(MariaDB) Umfassende Erklärung der MySQL-Datentypen und Speichermechanismen
1.1 Übersicht über Datentypen Der Datentyp ist ei...
JS-Funktionsaufruf, Anwenden und Binden einer superdetaillierten Methode
Inhaltsverzeichnis JS-Funktionsaufruf, Apply- und...
Ubuntu 20.04 – Bestes Konfigurationshandbuch (unverzichtbar für Anfänger)
1. Systemkonfiguration 1. Deaktivieren Sie das Su...
js Canvas realisiert Slider-Verifizierung
In diesem Artikelbeispiel wird der spezifische Co...
Lösung für die Systemstörung (Booten nicht möglich), die durch das Upgrade von glibc in Centos7 verursacht wurde
Inhaltsverzeichnis Ursache des Problems: Lösung: ...
MySQL-Unterabfrage und Details zur Verknüpfungstabelle
Inhaltsverzeichnis 1. Was ist eine Unterabfrage? ...
Detaillierte Erklärung der Methoden des fs-Moduls und des Path-Moduls in Node.js
Überblick: Das Dateisystemmodul ist ein einfacher...
Detaillierte Erklärung des Unterschieds zwischen einem href=# und einem href=javascript:void(0)
a href="#"> Nach dem Klicken auf den ...
CSS3-Filtercode zum Erreichen des Grau- oder Schwarzmodus auf Webseiten
Frontend css3.filter kann nicht nur den Graueffek...
Dockers Mechanismus zur Integritätserkennung
Für Container ist die einfachste Integritätsprüfu...
Ein kurzes Verständnis der drei Verwendungen von Standard-SQL-Update-Anweisungen
1. Umwelt: MySQL-5.0.41-win32 Windows XP Professi...