クリックした画像の情報(ファイル名など)を取得する方法

JavaScriptFirefox, Google Chrome, IE11, 実装サンプル

JavaScript

クリックした画像の情報をJavaScriptで取得

HTMLで複数(または単一)記述された「imgタグ」(画像)をクリックして、

IDやNAMEの各種属性、ファイル名などをJavaScriptを利用して

取得する方法をご紹介します。

※メモリ面も考慮しているつもりです。

 

ソースコード

まずは、以下をHTMLに貼り付けます。

(以下、サンプルの代わりにご自身のHTMLでもOKです。)

<img id="img-id1" name="img-name1" src="img-1.jpg">
<img id="img-id2" name="img-name2" src="../img-2.jpg">
<img id="img-id3" name="img-name3" src="../imgs/img-3.jpg">
<img id="img-id4" name="img-name4" src="/img-4.x120y120.jpg">
<img id="img-id5" name="img-name5" src="img-5.jpeg">
<img id="img-id6" name="img-name6" src="img-6.png">
<img id="img-id7" name="img-name7" src="img-7.gif">

続いて、JavaScriptの実装です。

/**
 * Click-imgTag
 * @param e event
 */
function clickImgs(e) {
    // get-id
    console.log(this.getAttribute("id"));
    // get-name
    console.log(this.getAttribute("name"));
    // get-src
    var srcValue = this.getAttribute("src");
    console.log(srcValue);
    // get-fileName
    var bIdx = 0;
    if(srcValue.indexOf("/") > -1) {
        bIdx = srcValue.lastIndexOf("/") + 1;
    }
    console.log(srcValue.slice(bIdx));
    // get-fileName (No extension)
    var eIdx = srcValue.lastIndexOf(".");
    console.log(srcValue.slice(bIdx,eIdx));
}
// addEventListener(Click-imgTag)
var imgs = document.getElementsByTagName("img");
for(var i = 0; i < imgs.length; i++) {
    imgs[i].addEventListener("click", clickImgs, false);
}

最後に

jQueryを使えば、もっとスマートに実装できますが、

JavaScriptで「やりたい」という人も多いと思うので、

jQuery無しで実装してます。

console.log()は、()中身をコンソールに表示します。

コンソールって、何?どこ?

というのは、コチラの記事をどうぞ。

スポンサーリンク