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 ブラウザでは次のようになります。
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 ブラウザー内で実行して画像をクリックすると、以下に示すように、画像が新しいブラウザータブで開きます。
HTML の onclick 画像属性は、JavaScript で画像をクリック可能にするのに役立ちます。これは、さまざまな状況で、Web サイトに実装する機能の種類に応じて使用できます。
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.
LinkedIn関連記事 - JavaScript Image
- HTML Canvas を使用して JavaScript で画像を切り抜く
- JavaScript を使用したフェードインイメージ
- JavaScript で URL から画像を読み込む
- JavaScript でホバーの画像を変更する
- JavaScript で画像を回転させる