2026-01-02

JavaScript – 画像をクリックしたら別タブで開く方法

JavaScriptを使い画像をクリックしたら別タブで開く方法について解説します。処理の一連の流れとしては次の通り。

画像情報の取得
クリックした画像のURLを取得
その取得したURLを別タブで開く

例

画像情報の取得

次のようなHTML構造があったとします。

<body>
    <div id="wrap-contents">
        <div class="wrap-img">
            <img src="./001.png" alt="">
        </div>
        <div class="wrap-img">
            <img src="./002.jpg" alt="">
        </div>
        <div class="wrap-img">
            <img src="./003.jpg" alt="">
        </div>
    </div>


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

これらの構造からquerySelectorAll()を使いNodeListを取得します。

const imges = document.querySelectorAll(".wrap-img > img");

クリックした画像のURLを取得

クリックした要素の情報を取得するにはaddEventListener()メソッドを使用しますが、imgesは配列風になっているためforEach()でNodelistの各要素情報を取得します。

imges.forEach((img) =>{
    img.addEventListener("click", () => {
        console.log(img.src);
    });
});

そしてリストの中の画像がクリックされたときにイベントを発生させたいので上記のようにaddEventListener()を使います。

試しにconsole.log(img.src)でデバックしてみると画像情報が取得できていることが確認できるかと思います。

その取得したURLを別タブで開く

URLを別タブで開かせたい場合open()メソッドを使用します。簡単な使い方であれば引数にURL情報を埋め込むだけで新しいタブで開かれます。

imges.forEach((img) =>{
    console.log(img);
    img.addEventListener("click", () => {
        window.open(img.src);
    });
});