初心者を抜け出そうとしている者です。画像の下にキャプションを付けたいのですが、 alt= の値を利用しようと思っています。下記のようなスクリプトで実現できる方法はあるのでしょうか？の alt=の値を取り出し、それぞれのの直後に、 ' alt の値 ' を挿入したい */ } } //--> テスト IMGタグの後に文字列出力 ※ 上記インデントは全角スペースで書いております。上のような方法以外でもかまいませんので、スクリプト例を書いていただけると嬉しいです。よろしくお願いします。

<img>タグの alt= の値をキャプションに

解決済

質問者：brosis
質問日時：2011/09/01 17:34
回答数：2件

初心者を抜け出そうとしている者です。

画像の下にキャプションを付けたいのですが、
alt= の値を利用しようと思っています。
下記のようなスクリプトで実現できる方法はあるのでしょうか？

<html>
<head>
<script type="text/javascript">

</script>
</head>
<body>
<h1>テスト　IMGタグの後に文字列出力</h1>
<img src="../images/logo1.gif" alt="Logo1" />
<img src="../images/logo2.gif" alt="Logo2" />
</body>
</html>

※　上記インデントは全角スペースで書いております。

上のような方法以外でもかまいませんので、
スクリプト例を書いていただけると嬉しいです。
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： yambejp
回答日時：2011/09/01 17:54

定義通りつくるとこんな感じ。

でもちょっと変ですね・・・

<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" />

- 0
- 件

通報する

この回答へのお礼

早速の回答ありがとうございます。

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

どうもありがとうございました。

通報する

お礼日時：2011/09/01 18:31

No.1

回答者： SAYKA
回答日時：2011/09/01 17:51

そういう場合は　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>