Onclick-Ereignis zu HTML-Image-Tag in JavaScript hinzufügen

Das onclick wird über einem image-Tag innerhalb von HTML hinzugefügt. Das onclick-Ereignis macht unser Bild klickbar. Nachdem ein Benutzer auf das Bild geklickt hat, können Sie tun, was Sie wollen, wie 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 erstellen und aufrufen, die Sie in JavaScript geschrieben haben, oder vorhandene Funktionen verwenden, die uns das window-Objekt zur Verfügung stellt, wie window.open().

Dieser Artikel zeigt, wie man ein Bild in einem neuen Browser-Tab anzeigt, wenn ein Benutzer darauf klickt, indem man das onclick-Ereignis verwendet. Wir werden dies erreichen, indem wir eine Funktion erstellen und sie innerhalb des onclick-Attributs des HTML-image-Tags aufrufen.

Hinzufügen eines onclick-Ereignisses zu einem HTML-Tag img mit JavaScript

Um die onclick-Ereignisfunktionalität in JavaScript zu erreichen, müssen wir zuerst eine Funktion erstellen und dann diese Funktion innerhalb des onclick aufrufen, das auf dem image-Tag innerhalb des HTML vorhanden ist. Hier haben wir ein Bild genommen, und wenn ein Benutzer auf dieses Bild klickt, wird das Bild in einem neuen Browser-Tab geöffnet. Wir werden dies im folgenden Beispiel implementieren.

Unten haben wir ein einfaches HTML-Dokument, in dem wir nur ein img-Tag haben, dessen src-Attribut auf ein vom Server abgerufenes Bild gesetzt ist. Im onclick-Attribut eines Bildes übergeben wir die Funktion openImg(), die diese Funktion aufruft. Wir haben diese Funktion 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" alt="Sample image" 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 zuerst die Referenz auf das img-Tag erhalten, das innerhalb des DOM vorhanden ist, indem wir sein id-Attribut image verwenden. Dies kann mit der Methode document.getElementById() erfolgen. Dann speichern wir die Referenz des image-Tags innerhalb der Variablen image.

Da wir dasselbe Bild in einem neuen Browser-Tab anzeigen wollen, müssen wir auch die Bildquelle in einer Variablen speichern, die wir mit dem src-Attribut erhalten 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. Beachten Sie, dass image.src die vollständig aufgelöste (absolute) URL des Bildes zurückgibt, was genau das ist, was der neue Tab benötigt.

Schließlich können wir die Methode window.open() verwenden, um das Bild anhand seiner Quelle anzuzeigen. Die Methode window.open() wird verwendet, um einen neuen Tab zu öffnen, und was immer wir in diese Funktion übergeben, wird in dem neuen Tab angezeigt. Hier übergeben wir die Variable source, 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-onclick-image-Attribut hilft dabei, ein Bild in JavaScript klickbar 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.