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
HTML validieren HTML-Validierung
„HTML-Validierung“ bezieht sich auf die HTML-Valid...
Native JS-Implementierung des Ladefortschrittsbalkens
Dieser Artikel zeigt einen Spezialeffekt für dyna...
Verwenden von Schleifen in awk
Lernen wir verschiedene Arten von Schleifen kenne...
Detaillierte Erläuterung verschiedener Fehlerbehandlungen, wenn Nginx nicht gestartet werden kann
Bei der Verwendung von Nginx als Webserver sind m...
Vue Router lädt verschiedene Komponenten je nach Hintergrunddaten
Inhaltsverzeichnis Anforderungen aus der Projektp...
Einführung in die Funktionen und Verwendung von Wert- und Namensattributen in HTML
1. Der in der Schaltfläche verwendete Wert bezieht...
So verwenden Sie JavaScript, um mehrere gängige Browser über userAgent zu bestimmen
Vorwort Normalerweise müssen Sie beim Erstellen v...
Das WeChat-Applet implementiert das Scrollen von Text
In diesem Artikelbeispiel wird der spezifische Co...
Zusammenfassung mehrerer Methoden zur Implementierung der vertikalen Zentrierung mit CSS
Im Front-End-Layoutprozess ist es relativ einfach...
CSS erreicht hochadaptiven Vollbildmodus
Beim Schreiben meiner eigenen Demo möchte ich dis...
Typora-Codeblock-Farbabgleich und Implementierungscode für die Titelseriennummer
Wirkung: Der Titel hat eine eigene Seriennummer, ...
Eine kurze Diskussion über die Docker-Compose-Netzwerkeinstellungen
Tutorial zur Netzwerknutzung Offizielle Website d...
Mit wie vielen Pixeln sollte eine Webseite gestaltet werden?
Viele Webdesigner sind beim Entwurf des Webseitenl...
Implementierungscode der schwebenden Ebene, die auf der rechten Seite der Webseite fixiert ist
Code kopieren Der Code lautet wie folgt: <!DOC...
Detailliertes Installationstutorial zur dekomprimierten Version von mysql5.7.19 (mit rein geknackter chinesischer Version von SQLYog)
Die Version Mysql5.7.19 ist eine neue Version, di...