Das IMG -Element ermöglicht es uns, Bilder in HTML -Dokumente einzubetten.
Um ein Bild einzubetten, müssen Sie die SRC- und ALT -Attribute verwenden. Der Code lautet wie folgt:
<img src = "../ img/example/img-map.jpg"/>
Anzeigeffekt:
1 einbetten Sie das Bild in den Hyperlink ein
Eine gemeinsame Verwendung des IMG-Elements besteht darin, einen bildbasierten Hyperlink in Kombination mit dem A-Element zu erstellen. Der Code ist wie folgt:
<a href = "otherpage.html"> <img src = "../ img/example/img-map.jpg" ismap/> </a>
Die Art und Weise, wie der Browser dieses Bild anzeigt, ist nicht anders. Daher ist es wichtig, den Benutzern visuelle Hinweise zu bieten, die ein bestimmtes Bild einen Hyperlink darstellt. Der spezifische Ansatz kann darin bestehen, CSS zu verwenden, um ihn im Bildinhalt besser auszudrücken.
Wenn Sie auf dieses Bild klicken, navigieren der Browser zu der URL, die durch das HREF -Attribut des übergeordneten Elements a angegeben ist. Das Anwenden des ISMAP-Attributs auf das IMG-Element erstellt eine serverseitige Filialen-Antwortkarte, sodass die auf das Bild geklickten Stellen an die URL angehängt werden. Wenn der Klicksposition beispielsweise 8 Pixel oben im Bild und 10 Pixel am linken Rand beträgt, navigiert der Browser zu der folgenden Adresse:
https://yxiaochao.github.io/show4cnblogs/otherpage.html?10,8
Der folgende Code zeigt den Inhalt in otherPage.html an, das ein einfaches Skript enthält, um die Koordinaten der Klickposition anzuzeigen:
<body> <p> Das X-Koordinat ist <b> <span id = "xco">? </span> </b> </p> <p> Das y-koordinate ist <b> <span id = "yco"> ?? window.location.href.split ('?') [1] .Split (','); document.getElementById ("xco"). InnerHtml = Koordinaten [0]; document.getElementById ("yco"). Innerhtml = Koordinaten [1]; </script> </body>Die Art und Weise, wie der Browser dieses Bild anzeigt, ist nicht anders. Daher ist es wichtig, den Benutzern visuelle Hinweise zu bieten, die ein bestimmtes Bild einen Hyperlink darstellt. Der spezifische Ansatz kann darin bestehen, CSS zu verwenden, um ihn im Bildinhalt besser auszudrücken.
Wenn Sie auf dieses Bild klicken, navigieren der Browser zu der URL, die durch das HREF -Attribut des übergeordneten Elements a angegeben ist. Das Anwenden des ISMAP-Attributs auf das IMG-Element erstellt eine serverseitige Filialen-Antwortkarte, sodass die auf das Bild geklickten Stellen an die URL angehängt werden. Wenn der Klicksposition beispielsweise 8 Pixel oben im Bild und 10 Pixel am linken Rand beträgt, navigiert der Browser zu der folgenden Adresse:
https://yxiaochao.github.io/show4cnblogs/otherpage.html?10,8
Der folgende Code zeigt den Inhalt in otherPage.html an, das ein einfaches Skript enthält, um die Koordinaten der Klickposition anzuzeigen:
<body> <p> Das X-Koordinat ist <b> <span id = "xco">? </span> </b> </p> <p> Das y-koordinate ist <b> <span id = "yco"> ?? window.location.href.split ('?') [1] .Split (','); document.getElementById ("xco"). InnerHtml = Koordinaten [0]; document.getElementById ("yco"). Innerhtml = Koordinaten [1]; </script> </body>Sie können den Effekt von Mausklick sehen:
Das serverseitige Partitions-Antwortdiagramm bedeutet normalerweise, dass der Server gemäß dem Klickbereich des Benutzers im Bild unterschiedlich reagiert, z. B. die Rückgabe verschiedener Antwortinformationen. Wenn das ISMAP -Attribut im IMG -Element weggelassen wird, werden die Koordinaten des Mausklicks nicht in der Anforderungs -URL enthalten.
2 Erstellen Sie ein Client -Partitions -Antwortdiagramm
Wir können eine Client Partition -Antwortkarte erstellen und den Browser zu verschiedenen URLs navigieren lassen, indem Sie auf verschiedene Bereiche auf einem Bild klicken. Dieser Vorgang erfordert nicht das Booten über den Server, sodass Elemente verwendet werden, um die einzelnen Bereiche auf dem Bild und das von ihnen darstellende Verhalten zu definieren. Das Schlüsselelement des Client -Partitions -Antwortdiagramms ist eine Karte, die ein oder mehrere Flächenelemente enthält, die jeweils einen Bereich auf dem Bild darstellen, auf das geklickt werden kann.
Die Eigenschaften des Flächenelements können in zwei Kategorien unterteilt werden. Die erste Kategorie befasst sich mit der URL, zu der der Browser navigiert wird, nachdem der vom Bereich dargestellte Bildbereich vom Benutzer angeklickt wurde. Die folgende Abbildung führt diese Art von Attribut ein, die den entsprechenden Attributen ähnlich ist, die auf anderen Elementen zu sehen sind.
Die zweite Kategorie enthält interessantere Attribute: Form- und Koordinierungsattribute. Diese Eigenschaften können verwendet werden, um jeden Bildbereich anzugeben, auf den der Benutzer klicken kann. Die Eigenschaften der Form und der Koordinierung arbeiten zusammen. Die Bedeutung des Attributs des Koordnens hängt vom Wert des Formattributs ab, wie in der folgenden Abbildung gezeigt:
Nach der Einführung dieser Elemente nennen Sie ein Beispiel, der Code lautet wie folgt:
<body> <img src="../img/example/img-map.jpg" ismap usemap="#mymap" /><map name="mymap"> <area href="javascript:show_page(1)" shape="rect" coords="'34,60,196,230" /> <area href="javascript:show_page(2)" SHAPE = "RECT" Coords = "'210,60,370,230" /> <Area href = "JavaScript: show_page (3)" shape = "rect" coords = "' 383,60,545,230" /> < /map> <script type alarm ("Dies ist Produkt"+num); } </script> </body>Der Display -Effekt ist der gleiche, außer dass beim Klicken auf das entsprechende Produktbild der entsprechende Produktname angezeigt wird, was auf der Seite mit gesprungenem Produkt angibt.
Der obige Artikel JavaScript Basics_Simple Implementierung eingebetteter Bilder ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.