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

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

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

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" alt="Sample image" onclick="openImg()">

    <script src="./script.js"></script>
</body>
</html>

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

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

同じ画像を新しいブラウザタブ内に表示したいので、src 属性を使用して取得できる画像ソースも変数に格納する必要があります。JavaScript では、ソース属性にアクセスするために image.src を使用するだけでよく、それを source 変数の中に格納します。image.src は画像の完全に解決された（絶対）URL を返すことに注意してください。これはまさに新しいタブが必要とするものです。

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

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

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

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