HTMLのimgタグのalt属性を利用して画像キャプションを作成する方法
- 初心者を抜け出そうとしている者が、HTMLのimgタグのalt属性を利用して画像キャプションを作成する方法について質問しています。
- 質問者は、画像の下にキャプションを付けたいと考えており、alt属性の値を利用する方法を検討しています。
- スクリプトを使用して、imgタグのalt属性の値を取得し、その値を使ってキャプションを作成することができます。
- ベストアンサー
<img>タグの alt= の値をキャプションに
初心者を抜け出そうとしている者です。 画像の下にキャプションを付けたいのですが、 alt= の値を利用しようと思っています。 下記のようなスクリプトで実現できる方法はあるのでしょうか？ <html> <head> <script type="text/javascript"> <!-- window.onload = function() { var list = document.getElementsByTagName('img'); for (var i=0; i < list.length; i++) { /* ココで、それぞれの<img> の alt=の値を取り出し、 それぞれの<img>の直後に、 '<br><span> alt の値 </span>' を挿入したい */ } } //--> </script> </head> <body> <h1>テスト IMGタグの後に文字列出力</h1> <img src="../images/logo1.gif" alt="Logo1" /> <img src="../images/logo2.gif" alt="Logo2" /> </body> </html> ※ 上記インデントは全角スペースで書いております。 上のような方法以外でもかまいませんので、 スクリプト例を書いていただけると嬉しいです。 よろしくお願いします。
- brosis
- お礼率94% (100/106)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （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" />
その他の回答 (1)
- SAYKA
- ベストアンサー率34% (944/2776)
そういう場合は 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>
お礼
早速の回答をありがとうございます。 幅広くアドバイスをいただいてありがたいです。
関連するQ&A
- <img>タグを<span>でくくりたい
Javascript初心者を脱出したい者です。 <img>タグをgetElementsByTagNameで取得し、 <span class="align_left"><img .... /></span> みたいに囲いたいと考えています。 条件として、<img>タグの親ノードは<p>タグです。 全くノウハウは知りませんが、以下のような考え方で実現できるのでしょうか？ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Insert nextContent</title> <script type="text/javascript"> <!-- window.onload = function() { var out_span = document.createElement('span'); out_span.setAttribute('class', 'align_left'); var list = document.getElementsByTagName('img'); var img = list[0]; /* この後、 どうやって、out_span を挿入すればよいのか？ */ } //--> </script> </head> <body> <h1> IMGタグに親ノードを追加したい </h1> <p> 文ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー。 <img src="../images/logo.gif" alt="Logo" /> </p> </body> </html> ★ インデントは全角スペースで行っております。 ご教示お願いします。
- ベストアンサー
- JavaScript
- imgタグをそのまま使うことは正しいの？
<h2>hogehogehoge</h2> <p>hogehogehogehogehogehogehoge</p> <img src="images/hoge.gif" alt"hoge" /> これって正しいですか？ <h2>はタイトル <p>は段落（文章？） <img>は？？？？ 画像？ もしかして正確にはimgタグも<p>とかで囲わなければいけないのか？ 教えてください。。。
- ベストアンサー
- HTML
- changeimgの際のalt設定
head部分の記述 <!-- function changeimg(src) { document.getElementById("img").src = src; } //--> </script> body部分の記述 <a href="javascript:changeimg('./img/img02.gif');">02の絵です</a> <img src="./img/img01.gif" alt="01の絵" id="img" width=100 height=100> このようにすると「02の絵です」をクリックすると01の絵が02に変わる、というのを、検索して見つけました。 これを使いたいのですが、img02.gifにalt属性をつけるには、どのようにしたらよいでしょうか。 よろしくお願いします。
- ベストアンサー
- JavaScript
- imgのaltとtitleの要素を抜き出したい
お世話になっております。サウナマンと申します。 var allImages = window.document.getElementsByTagName("img"); for (i = 0; i < allImages.length; i++){ var s = allImages[i].src; var w = allImages[i].width; var h = allImages[i].height; var a = allImages[i].alt; } ↑上記のコードにて画像の、パス、幅、高さ、は取得できるのですが ALTの内容がうまくとれません。どのように参照したらよいのか 教えていただけませんでしょうか。 また、titleの値の場合はどのようにすれば取得できるのでしょうか？ ※このJSはGreasemonkeyで使用します。
- ベストアンサー
- JavaScript
- altだけランダムに並び替えできません。
はじめまして、お力をお貸しください。 ３個のバナー（今後増減あり）をリロードするたびにランダムで 順番を入れ替えて表示したいと思っています。重複ナシです。 ３個中３個すべてを表示して順番だけ入れ替えたいです。 上記に(1)画像(2)リンク(3)altの３点セットをランダム順番入れ替え したいのですが、下記スクリプトだとaltだけ順番が入れ替わりません。 altも順番入れ替えできる用にしてもらえませんでしょうか。 お願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS"> <title>バナーランダム順番入れ替え</title> <script type="text/javascript"> <!-- function bannerclass(address,src){ this.src = src; this.address = address; } function getBannerAddress(){ var i = 0; var tempAddressList = new Array(); while(document.getElementById('banner' + i)){ tempAddressList[i] = new bannerclass(document.getElementById('banner' + i).parentNode.href,document.getElementById('banner' + i).src); i++; } return tempAddressList; } function setBannerAddress(tempBannerData){ var bannernum = tempBannerData.length; var i; for (i = 0; i < bannernum; i++){ var rndNum = Math.floor(Math.random() * bannernum); var tempData = tempBannerData[rndNum]; tempBannerData[rndNum] = tempBannerData[i]; tempBannerData[i] = tempData; } for (i = 0; i < bannernum; i++){ document.getElementById('banner' + i).parentNode.href = tempBannerData[i].address; document.getElementById('banner' + i).src = tempBannerData[i].src; } } function setBanner(){ var tempdata = getBannerAddress(); setBannerAddress(tempdata); } if (window.addEventListener) window.addEventListener("load", setBanner, false); else if (window.attachEvent) window.attachEvent("onload", setBanner); else window.onload = setBanner; // --> </script> </head> <body> <p> <a href="address1.html"><img src="001.gif" id="banner0" alt="banner1"></a> </p> <p> <a href="address2.html"><img src="002.gif" id="banner1" alt="banner2"></a> </p> <p> <a href="address3.html"><img src="003.gif" id="banner2" alt="banner3"></a> </p> </body> </html>
- ベストアンサー
- JavaScript
- 画像を変えるスクリプト
<HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- img=new Array(); for(i=1;i<=4;i++){ img[i]=new Image(); img[i].src="img"+i+".gif"; } function changeImage(i,j){ document.images[i].src=img[j].src; } // --> </SCRIPT> </HEAD> <BODY> <CENTER> <A href="#" onMouseOver="changeImage(0,2)" onMouseOut="changeImage(0,1)"><IMG src="img1.gif" border=0></A><BR> <BR> <A href="#" onMouseOver="changeImage(1,4)" onMouseOut="changeImage(1,3)"><IMG src="img3.gif" border=0></A> </CENTER> </BODY> </HTML> マウスオーバーしたら画像が変わるスクリプトです。 質問ですがこのスクリプトでどうしてオブジェクトを作っているのでしょうか？ 普通にsrcプロパティを変更するだけではだめなのでしょうか？例えばdocument.images[i].src="img"＋j＋".gif"のようにしてiとjを変えるような 感じです。
- ベストアンサー
- JavaScript
- JavaScriptで数値をimgに設定する
JavaScriptで 下記のソースにてランダムで出した数値を htmlの width="" height=""に 設定するには どのようにすればよいのでしょうか？ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title></title> </head> <body> <script> var width = Math.floor(Math.random() * 400) + 1; var height = Math.floor(Math.random() * 400) + 1; </script> <img src="hoge.jpg" alt="" width="" height=""> </body> </html>
- ベストアンサー
- JavaScript
- 見出しタグについて
<h2><img src="sozai/▲▲▲.gif" alt="●●●"> ■■■■</h2> というのと、 <img src="sozai/▲▲▲.gif" alt="●●●"><h2>■■■■</h2> のとでは、 やはりSEO対策的に違いはあるのでしょうか？
- 締切済み
- レンタルサーバ・ASP
- ALT属性に見出しタグをつけると画像がズレます。
見出しタグをHTMLで製作後、画像とALT属性に採用すると 画像がずれてしまいます。 <img src="images/img6.jpg" alt="●●●●●●●●●●●●" width="745" height="511"> を <h2><img src="images/img6.jpg" alt="●●●●●●●●●●●●" width="745" height="511"> </h2> 以下のコーディングにすると画像がずれます。 HTMLバージョンは、DTD HTML 4.01 Transitional となります。 CSSなどで画像の位置固定をするのではなく、そのままHTML内で完結したいと考えています。 どのように変えれば良いでしょうか また、alignタグなどは、HTML4.01非推奨で使えません。 バグで探したのですが見付かりませんでした。 よろしくお願いします。
- ベストアンサー
- HTML
- プログラムのみで複雑に画像を変える方法役
クリックすると画像が次々と変わるものを作りたいのですが、 下記方法では画像の枚数が増えたり、複雑な動作を作る場合、 複雑な構造になってしまうと思うのですが、 少しでも複雑にならない方法はありますか？ フラッシュは使わずにプログラムだけで 同じ位置で画像を変えたいです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <script language="JavaScript"> <!-- var img1 = new Image(100,50); var img2 = new Image(100,50); var img3 = new Image(100,50); var img1.src = "sample1.gif"; var img2.src = "sample2.gif"; var img3.src = "sample3.gif"; function mF1(){ document.images[0].src = img1.src; setTimeout("mF2()",100); } function mF2(){ document.images[0].src = img2.src; setTimeout("mF3()",100); } function mF2(){ document.images[0].src = img3.src; } //--> </script> </head> <body> <img src="omote.jpg" width="100" height="50" onclick="mF1()"> </body> </html> あと、document.images[0].srcを変数として格納すると動作しないのですが、 document～というのは変数にできないのでしょうか。 var dcum = document.images[0].src; function mF1(){ dcum = img1.src; setTimeout("mF2()",100); } function mF2(){ dcum = img2.src; setTimeout("mF3()",100); } function mF2(){ dcum = img3.src; }
- ベストアンサー
- JavaScript
お礼
早速の回答ありがとうございます。 試してみまして、できることを確認しました。 この先は、それぞれ画像を <span>で囲い、style="margin: 5px; float: right;" などを付けたりするつもりです。 どうもありがとうございました。