節約テクノロジ >

CSSを使わずにHTMLのIMGタグのALT要素を画像に並べて表示する方法(+jQueryプラグイン)

IMGタグのALT属性は本来、画像を表示しないブラウザが画像の変わりに表示する文字列です。 しかしながら場合によっては画像の脇にそれを表示したいことがあります。 例えば画像を表示しない場合（RSSなど）に出すと文が不自然になるので必要がなく、画像を表示する場合だけ補足としてに出したい場合です。（本来の目的とは逆ですが）

ブラウザによってはではCSSを使いimg:afterでaltの内容を出すことができるのですが、これはHTMLの構成的におかしい(IMGの外にテキストが要素で囲まれずに追加される）ので、これを表示しないブラウザも多いです。

ここではJavascriptを使った方法を紹介します。

HTMLのIMGタグのALT要素を画像に並べて表示するjQueryプラグイン

jQueryプラグインです。

使用例

<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src='jquery-showimgalt.js' ></script>

    <script>
        $(document).ready(function(){
                $('img').showImgAlt();
        });
    </script>
</head>

<body>
    <img src='flower.jpg' alt='綺麗な花'></img>
</body>

結果

    <img src='flower.jpg' alt='綺麗な花'></img>
    <span class='imgalt'>綺麗な花</span>

オプションの例

$('img').showImgAlt({before:true});  //直後ではなく手前にALTテキストを挿入します。
$('img').showImgAlt({tag:'<p>'});     //spanではなくpにALTテキストを格納します。
$('img').showImgAlt({class:'someclass'});  //imgaltクラスではなくsomeclassを要素に設定します。

jQueryを使わない方法

jQueryを使わない方法です。

手順

以下をshowimgalt.jsの名前で保存します。

window.addEventListener('load',function(e){
    var imgs=document.getElementsByTagName('img');
    for(var i=0;i<imgs.length;i++){
        var el=imgs[i];
        var alt=el.getAttribute('alt');
        if(alt){
            var dv=document.createElement('span');
            dv.innerHTML=alt;
            dv.className='imgalt'
            var pn=el.parentNode;
            if(pn)pn.appendChild(dv);
        }
    }
});

imgaltの部分はIMG要素の次に挿入されるspan要素のクラス名です。 img要素はすべて以下の様にpやdiv要素で囲んでおきます。（この要素内の最後にSPANが挿入されます）

<p><img src=".."/></p>

HTMLのHEAD部分で上記スクリプトを読み込みます。

<head><script src="showimgalt.js"/></head>

以上でドキュメント読み込み後にALTがついているIMGの直後にspan要素が挿入されます。

もしALTの内容を画像の下に表示したい場合はcssに

.imgalt {
    display:block;
}

の様に記述するとよいでしょう。

この記事を見た人がよく読んでいる記事

節約テクノロジ >

トップページ

節約テクノロジ > CSSを使わずにHTMLのIMGタグのALT要素を画像に並べて表示する方法(+jQueryプラグイン)