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
Detaillierte Erklärung der Kapselung und Verwendung der Vue-Bildvergrößerungskomponente
Basierend auf dem Vue-Bildvergrößerungskomponente...
Detaillierte Erklärung der Anwendung von CSS Sprite
CSS Sprite, auch bekannt als CSS Sprite, ist eine...
Verwenden Sie CSS, um zwischen dem Dunkelmodus und dem Hellmodus zu wechseln
In der fünften Ausgabe von Web Skills wird ausdrü...
SQL zur Implementierung der Wiederherstellung einer Zeitreihenversetzung
Inhaltsverzeichnis 1. Anforderungsbeschreibung 2....
Ein Artikel zum Verständnis der Verwendung von typeof in js
Inhaltsverzeichnis Base Rückgabetyp String und Bo...
So kehren Sie schnell von unten nach oben zurück, wenn die Webseite zu viele Inhalte enthält
Bei der Web-Frontend-Entwicklung ist es unvermeidl...
HTML+CSS zum Erstellen von Herzschlag-Spezialeffekten
Heute werden wir einen einfachen Herzschlageffekt...
So verwenden Sie CSS-Attribute, um Mausereignisse zu blockieren (Mausklicks können obere Elemente durchdringen)
Ursprung: Vor einigen Tagen hat ein Tester eine A...
Lösung für die hohe CPU-Auslastung des Tomcat-Prozesses
Inhaltsverzeichnis Fall Kontextwechsel-Overhead? ...
Beispiel für die Verwendung von JSX zur Entwicklung einer Markup-Komponente (Front-End-Komponentenbildung)
Inhaltsverzeichnis Aufbau einer JSX-Umgebung NPM ...
Über die Fallstricke bei der Implementierung der angegebenen Kodierung in MySQL
Vorne geschrieben Umgebung: MySQL 5.7+, MySQL-Dat...
Einführung in die Installation des Vim-Plugins unter Linux
Inhaltsverzeichnis Installieren Sie den Vim-Plugi...
Der Unterschied zwischen Vue-Interpolationsausdruck und V-Text-Direktive
Inhaltsverzeichnis 1. Verwenden Sie Plugin-Ausdrü...
So verwenden Sie den Vue-Video-Player für eine Live-Übertragung
Inhaltsverzeichnis 1. Installieren Sie den Vue-Vi...
Beispiel für die Konvertierung von Spark RDD in einen Dataframe und das Schreiben in MySQL
Dataframe ist eine neue API, die in Spark 1.3.0 e...