Javascriptで画像をクリックしてURLをコピーできるようにする方法

WEB制作、マーケティングに関する情報をお届けします。

Javascriptで画像をクリックしてURLをコピーできるようにする方法

2025.04.17

カテゴリ：WEB制作

タグ：

JavaScript

※当サイトはアフィリエイト広告を利用しています。

ギャラリーサイトでよく見かける画像をクリックすると画像のURLがコピーする方法を今回はJavascriptを使用して紹介します。
画像のURL以外にもdata属性などにコピーさせたいものを入れておくことで流用することも可能です。

デモを見る

コードを紹介

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>クリックで画像URLをコピー</title>
<style>
img {
    width: 100%;
}
ul{
    display: flex;
    justify-content: space-between;
}
ul > *{
    width: calc( 33.333333% - 10px )
}
</style>
</head>
<body>
    <ul>
        <li><img src="https://design-tera.com/demo/img/image_01.jpg" alt=""></li>
        <li><img src="https://design-tera.com/demo/img/image_02.jpg" alt=""></li>
        <li><img src="https://design-tera.com/demo/img/image_03.jpg" alt=""></li>
    </ul>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const images = document.querySelectorAll("img");
            images.forEach((img) => {
                img.addEventListener("click", function () {
                    const imageUrl = img.src;
                    navigator.clipboard.writeText(imageUrl)
                    .then(() => {
                        alert(`URLをコピーしました: ${imageUrl}`);
                    })
                    .catch((err) => {
                        console.error("コピーに失敗しました: ", err);
                    });
                });
            });
        });
    </script>
</body>
</html>

　コードを解説

HTMLの説明は割愛します。

Javascript

読み込みが完了したら実行します。

document.addEventListener("DOMContentLoaded", function () {
});

全ての画像を取得します。

const images = document.querySelectorAll("img");

ループで全ての画像にクリックイベントを設定します。

images.forEach((img) => {
  img.addEventListener("click", function () {
  });
});

クリックされたimgタグのsrc属性を取得してクリップボードにコピー、アラートで結果を返します。

navigator.clipboard.writeText(imageUrl)
.then(() => {
    alert(`URLをコピーしました: ${imageUrl}`);
})
.catch((err) => {
    console.error("コピーに失敗しました: ", err);
});

以上で実装完了です。