JavaScript の HTML 画像タグに Onclick イベントを追加する

onclick は、HTML 内の画像タグの上に追加されます。onclick イベントにより、画像をクリック可能になります。ユーザーが画像をクリックすると、新しい Web ページを開いたり、アニメーションを追加したり、既存の画像を新しい画像に変更したりするなど、好きなことを行うことができます。onclick 内で、関数を渡すことができます。ここでは、JavaScript で記述した関数を作成して呼び出すか、window.open() などのウィンドウオブジェクトで使用できる既存の関数を使用できます。

この記事では、ユーザーが onclick イベントを使用して画像をクリックしたときに、新しいブラウザタブに画像を表示する方法を説明します。これを実現するには、関数を作成し、HTML 画像タグの oncreate 属性内で呼び出します。

JavaScript を使用して HTML img タグに onclick イベントを追加する

JavaScript で onclick イベント機能を実現するには、最初に関数を作成してから、HTML 内の画像タグにある onclick 内でその関数を呼び出す必要があります。ここでは画像を撮影しました。ユーザーがこの画像をクリックすると、新しいブラウザタブで画像が開きます。以下の例でこれを実装します。

以下に基本的な HTML ドキュメントがあり、その中には、サーバーからフェッチされた画像に設定された src 属性を持つ img タグのみがあります。画像の onclick 属性で、その関数を呼び出す openImg() 関数を渡します。この関数はまだ作成していません。ファイルの最後に、JavaScript ファイルをリンクして関数を作成しました。以下のコードを参照してください。

<!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>

上記のコードを実行すると、Web ブラウザでは次のようになります。

HTML の画像タグ

JavaScript ファイル内に、関数 openImg() を定義しました。この関数内では、最初に、id 属性 image を使用して DOM 内に存在する img タグへの参照を取得する必要があります。これは、document.getElementById() メソッドを使用して実行できます。次に、画像タグの参照を image 変数内に保存します。

新しいブラウザタブ内に同じ画像を表示したいので、src 属性を使用して取得できる変数に画像ソースを保存する必要もあります。JavaScript では、image.src を使用してソース属性にアクセスする必要があります。次に、それを source 変数内に格納します。

最後に、ソースを使用して画像を表示するには、window.open() メソッドを使用できます。window.open() メソッドは新しいタブを開くために使用され、この関数内で渡したものはすべて新しいタブ内に表示されます。ここでは、画像自体のリンクを含むソース変数を渡します。JavaScript の openImg() 関数は次のようになります。

function openImg(){
    var image = document.getElementById('image');
    var source = image.src;
    window.open(source);
}

上記のコードを Web ブラウザー内で実行して画像をクリックすると、以下に示すように、画像が新しいブラウザータブで開きます。

javascript で onclick イベントを追加した後の img

HTML の onclick 画像属性は、JavaScript で画像をクリック可能にするのに役立ちます。これは、さまざまな状況で、Web サイトに実装する機能の種類に応じて使用できます。

関連記事 - HTML onclick