HTMLのimgタグのalt属性を利用して画像キャプションを作成する方法

2011/09/01 17:34

このQ&Aのポイント

初心者を抜け出そうとしている者が、HTMLのimgタグのalt属性を利用して画像キャプションを作成する方法について質問しています。
質問者は、画像の下にキャプションを付けたいと考えており、alt属性の値を利用する方法を検討しています。
スクリプトを使用して、imgタグのalt属性の値を取得し、その値を使ってキャプションを作成することができます。

brosis
お礼率94% (100/106)

JavaScript
回答数2
ありがとう数3

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

yambejp
ベストアンサー率51% (3827/7415)

2011/09/01 17:54 回答No.2

定義通りつくるとこんな感じ。でもちょっと変ですね・・・ <script> window.onload = function() { var list = document.getElementsByTagName('img'); for (var i=0; i < list.length; i++) { var alt=list[i].getAttribute("alt"); if(alt){ var span=document.createElement("span"); span.appendChild(document.createTextNode(alt)); list[i].parentNode.insertBefore(span,list[i].nextSibling); var br=document.createElement("br"); list[i].parentNode.insertBefore(br,list[i].nextSibling); } } } </script> <h1>テストIMGタグの後に文字列出力</h1> <img src="1.jpg" alt="Logo1" /> <img src="2.jpg" alt="Logo2" /> <img src="3.jpg" />

質問者

お礼 2011/09/01 18:31

早速の回答ありがとうございます。試してみまして、できることを確認しました。この先は、それぞれ画像を <span>で囲い、style="margin: 5px; float: right;" などを付けたりするつもりです。どうもありがとうございました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (1)

SAYKA
ベストアンサー率34% (944/2776)

2011/09/01 17:51 回答No.1

そういう場合は　imgを直接探索するんじゃなくて識別できるspanかなにかで囲ってそれを変換する方が良いよ今 <img /> ↓ <span class="swap"><img /><br /><span class="altText" /></span> この形でswapのspanを取り出すか imgのparentにぶら下がってるaltTextのspanをいじるかどっちか。ただ、見た感じ、改行したいならspanじゃなくdivで囲んだり、htmlとして使われない独自タグを配置して入れ替えるほうがgetElementsByTagNameが使いやすいかもしれないけどブラウザによっては独自タグを使うとhtmlじゃないんで勝手に排除したりするので要求ブラウザを良く確認しないとならないね。 IE6を含めるならdivで囲ってやる方法、足斬りしてIE8とかでいいなら独自タグでいけると思う。 gecko(firefox)やwebkit(safari,chrome)、prest(opera)も検証した方が無難独自タグってこんな風ね <item><img /></item>

質問者