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
So installieren und konfigurieren Sie den Supervisor-Daemon unter CentOS7
Neuling, nimm es selbst auf 1. Supervisor install...
Das neueste grafische Tutorial zur Installation und Konfiguration von MySQL 5.7.23
Die detaillierte Installation und Konfiguration d...
Windows Server 2019 installieren (grafisches Tutorial)
Windows Server 2019 ist das neueste Server-Betrie...
Detaillierter Prozess zur Verwendung von Vscode in Kombination mit Docker für die Entwicklung
Vorwort Durch die Verwendung von Docker und VS Co...
Analysieren Sie die Prinzipien der Tomcat-Architektur für den Architekturentwurf
Inhaltsverzeichnis 1. Lernziele 1.1. Beherrschen ...
Detaillierte Erklärung der benutzerdefinierten Swiper-Komponente in JavaScript
Inhaltsverzeichnis Effektanzeige Komponenteneinst...
So implementieren Sie einen einfachen HTML-Videoplayer
Dieser Artikel stellt die Methode zur Implementie...
Detaillierte Erklärung der Lösung für HTML-Layout mit festen linken und rechten Breiten und adaptiver Mitte
In diesem Artikel wird eine detaillierte Erläuter...
Beispielanalyse zur Metadatenextraktion von MySQL und Oracle
Inhaltsverzeichnis Vorwort Was sind Metadaten? Ad...
Detaillierte Erklärung zur Erstellung von Schießspielen mit CocosCreator
Inhaltsverzeichnis Szeneneinstellung Spielressour...
So installieren Sie den Zookeeper-Dienst auf einem Linux-System
1. Erstellen Sie den Ordner /usr/local/services/z...
html-Seite!--[if IE]...![endif]--Detaillierte Einführung in die Verwendung
Code kopieren Der Code lautet wie folgt: <!--[...
CSS, um in wenigen Schritten visuelle Effekte im Stil von Cyberpunk 2077 zu erzielen
Hintergrund Bevor wir mit dem Artikel beginnen, w...
HTML+CSS zur Implementierung des Beispielcodes des Dropdown-Menüs der Navigationsleiste
Wirkung Die Bilder im Code können selbst geändert...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.15 (Windows)
Da ich MySQL installieren muss, zeichne ich den I...