Onclick-Ereignis zu HTML-Image-Tag in JavaScript hinzufügen
Der onclick wird über einem Image-Tag in HTML hinzugefügt. Das onclick-Event macht unser Bild klickbar. Nachdem ein Benutzer auf das Bild geklickt hat, können Sie tun, was Sie möchten, z. B. eine neue Webseite öffnen, Animationen hinzufügen, ein vorhandenes Bild durch ein neues ersetzen und so weiter. Innerhalb des onclick können Sie eine Funktion übergeben. Hier können Sie entweder Ihre Funktion, die Sie in JavaScript geschrieben haben, erstellen und aufrufen oder vorhandene Funktionen nutzen, die uns durch das Window-Objekt zur Verfügung stehen, wie zB window.open().
Dieser Artikel zeigt, wie Sie ein Bild in einem neuen Browser-Tab anzeigen, wenn ein Benutzer mit dem Ereignis onclick darauf klickt. Dies erreichen wir, indem wir eine Funktion erstellen und diese innerhalb des oncreate-Attributs des HTML-Image-Tags aufrufen.
Hinzufügen eines onclick-Ereignisses zu einem HTML-Tag img mit JavaScript
Um die Event-Funktionalität onclick in JavaScript zu erreichen, müssen wir zuerst eine Funktion erstellen und diese Funktion dann innerhalb des onclick aufrufen, das auf dem Image-Tag im HTML-Code vorhanden ist. Hier haben wir ein Bild aufgenommen, und wenn ein Benutzer auf dieses Bild klickt, wird das Bild in einem neuen Browser-Tab geöffnet. Dies werden wir im folgenden Beispiel implementieren.
Unten haben wir ein einfaches HTML-Dokument, in dem wir nur ein img-Tag mit dem src-Attribut auf ein vom Server geholtes Bild haben. An das Attribut onclick eines Bildes übergeben wir die Funktion openImg(), die diese Funktion aufruft. Diese Funktion haben wir noch nicht erstellt. Am Ende der Datei haben wir unsere JavaScript-Datei verlinkt, um unsere Funktion zu erstellen. Siehe den Code unten.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- Image taken from Unsplash -->
<img id="image" src="https://bit.ly/3jFwe3d" onclick="openImg()">
<script src="./script.js"></script>
</body>
</html>
Wenn Sie den obigen Code ausführen, sieht er im Webbrowser so aus.
In unserer JavaScript-Datei haben wir eine Funktion openImg() definiert. Innerhalb dieser Funktion müssen wir zunächst die Referenz auf das img-Tag abrufen, das im DOM mit seinem id-Attribut image vorhanden ist. Dies kann mit der Methode document.getElementById() erfolgen. Und dann speichern wir die Referenz des Image-Tags in der Variablen image.
Da wir dasselbe Bild in einem neuen Browser-Tab anzeigen möchten, müssen wir auch die Bildquelle in einer Variablen speichern, die wir mit dem Attribut src abrufen können. In JavaScript müssen wir nur image.src verwenden, um auf das Quellattribut zuzugreifen, und dann speichern wir es in der Variablen source.
Um das Bild schließlich mit seiner Quelle anzuzeigen, können wir die Methode window.open() verwenden. Die Methode window.open() wird verwendet, um eine neue Registerkarte zu öffnen, und alles, was wir in dieser Funktion übergeben, wird in der neuen Registerkarte angezeigt. Hier übergeben wir die Quellvariable, die den Link des Bildes selbst enthält. So sieht unsere JavaScript-Funktion openImg() aus.
function openImg() {
var image = document.getElementById('image');
var source = image.src;
window.open(source);
}
Wenn Sie den obigen Code im Webbrowser ausführen und auf das Bild klicken, wird das Bild in einem neuen Browser-Tab geöffnet, wie unten gezeigt.
Das HTML-Bildattribut onclick hilft dabei, ein Bild in JavaScript anklickbar zu machen. Dies kann in verschiedenen Situationen verwendet werden und je nachdem, welche Art von Funktionalität Sie für Ihre Website implementieren möchten.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedInVerwandter Artikel - JavaScript Image
- Ein Bild in JavaScript mit HTML Canvas zuschneiden
- Bild einblenden mit JavaScript
- Ändern Sie das Bild beim Hover in JavaScript
- Bild von URL in JavaScript laden
- Drehen ein Bild mit JavaScript