- ベストアンサー
ジャバスクリプトでの画像の記述方法
ジャバスクリプトでの画像の記述方法 下のようなイメージがあります。 これをjsに読み込めますか？ 他の方法がありますか？ その場合、どのような記述をすればいいのでしょうか？ document.write ("<>"); よろしくおねがいします。 セリフをたびたび変えたいので、jsで記述したいのです。 -----ここから <img src="../aaa.gif" alt=" あああああ いいいいい ううううう えええええ おおおおお たたたたた" width="28" height="30"> -----ここまで
- grizzly
- お礼率81% (895/1101)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- ittochan
- ベストアンサー率64% (2667/4137)
<HEAD> <TITLE>ヘ(・、ヘ)ホイホイ(ノ、・)ノホイホイ</TITLE> <SCRIPT LANGUAGE=javascript> <!-- var mes = new Array(); mes[0]="ヾ(@^▽^@)ノ わはは"; mes[1]="ニャハハ (*^▽^*)"; mes[2]="ξ^▽〆オーホッホッホ"; mes[3]="(ノ*゜▽゜*)ニパパパ"; var img; var count=0; function window_onload() { img = document.getElementById("img"); window.setInterval("kaeru()",1000); } function kaeru(){ img.alt=mes[count]; if(count==mes.length-1){count=0;} else {count++;} } //--> </SCRIPT> </HEAD> <BODY LANGUAGE=javascript onload="return window_onload()"> <P>こういうのはどうでしょうか。</P> <P>たびたび代替テキストが変わります。</P> <P> <IMG id=img height=30 src="="../aaa.gif" width=28 ></P> <P></P> </BODY> </HTML>
お礼
興味があります。 いずれ、使ってみようと思います。 ありがとうございます。
- mirurin
- ベストアンサー率43% (48/111)
== htmlファイル ============================= <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript" SRC="Func.js" TYPE="text/javascript"></SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"><!-- ImgFunc(); //--></SCRIPT> </BODY> == Func.js ================================== function ImgFunc() { document.write('<img src="../aaa.gif" alt="\nあああああ\nいいいいい\nううううう\nえええええ\nおおおおお\n\nたたたたた" width="28" height="30">'); }
お礼
バッチリできました。 感謝しております。
関連するQ&A
- Java ScriptでHTMLのソースを使いまわす方法で、、、
こんにちわ。 Java ScriptでHTMLソースを使いまわす方法で困っています。 "tes.js"で使いまわしのHTMLを入力してます。 ロールオーバーの処理を記述する前は表示されるのに ロールオーバーの処理をいれると、表示されなくなりこまってます。 HTMLのファイルでは、呼び出す際 <script type="text/javascript" src="common/tes.js"></script>と記述してあり、 Java Scriptのファイル"tes.js"では、 document.write(" <a href='ndex.html'onMouseOut='MM_swapImgRestore()' onMouseOver='MM_swapImage('home','','common/img/menu_home_on.gif',1)'><img src='common/img/menu_home_off.gif' alt='home' name='home' width='42' height='9' border='0'></a>") と記述してあります。 もしかしたら、この処理↓に原因があるかもしれないとおもうんですが、 onMouseOut='MM_swapImgRestore()' onMouseOver='MM_swapImage('home','','common/img/menu_home_on.gif',1)' 誰かわかる方がいらっしゃれば教えていただけたらと思います。よろしくお願いします。
- ベストアンサー
- JavaScript
- tableの作成方法について
よろしくお願いします。 表を以下のように作成しました。 表の横のラインに罫線を引きたいのですが記述方法が分かりません。 表の周りにはcssで記述して2pxの罫線を引いてあります。 どなた様か、ご指導の程よろしくお願いします <table> <tr> <td rowspan="3" class="b"><img src="img/wg.jpg" alt="パソコンノウハウ" width="190" height="250" /></td> <td class="c"><img src="img/txt21.gif" alt="" width="168" height="24" /><br /> </td> </tr> <tr> <td class="d"><img src="img/9.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/ten.gif" alt="パソコンノウハウ" width="21" height="63" /><img src="img/8.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/0.gif" alt="パソコンノウハウ" width="41" height="63" /><img src="img/0.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/en.gif" alt="パソコンノウハウ" width="131" height="63" /></td> </tr> <tr> <td class="e"><a href="http://www."><img src="img/enter_off.gif" alt="" width="349" height="83" /></a></td> </tr> ----------------------------------------------------------------ここに横の罫線を引きたいのですが記述方法が分かりません。 <tr> <td rowspan="3" class="b"><img src="img/wg.jpg" alt="パソコンノウハウ" width="190" height="250" /></td> <td class="c"><img src="img/txt22.gif" alt="" width="103" height="23" /><br /> </td> </tr> <tr> <td class="d"><img src="img/1.gif" alt="パソコンノウハウ" width="41" height="63" /><img src="img/0.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/ten.gif" alt="パソコンノウハウ" width="21" height="63" /><img src="img/8.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/0.gif" alt="パソコンノウハウ" width="41" height="63" /><img src="img/0.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/en.gif" alt="パソコンノウハウ" width="131" height="63" /> </td> </tr> <tr> <td class="e"><a href="http://"><img src="img/enter_off.gif" alt="" width="349" height="83" /></a></td> </tr> </table>
- ベストアンサー
- HTML
- Tableの記述兵方法について、質問をさせて頂きます。よろしくお願いし
Tableの記述兵方法について、質問をさせて頂きます。よろしくお願いします。 まず、以下のようなtableを作成しました。 <table border="1"summary="お知らせ"> <tr> <th><img src="img/aaa.gif" alt="画像1" width="199" height="64" /></th> <td><img src="img/bbb.gif" alt="画像2" width="547" height="60" /></td> </tr> <tr> <th><img src="img/ccc.gif" alt="画像3" width="199" height="364" /></th> <td><img src="img/ddd.gif" alt="画像4" width="547" height="60" /></td> </tr> </table> よろしければ、画像を拝見してみてください。 画像1と画像2は問題無いのですが、次の画像3と画像4を入れると、画像3のheightが364に設定しているために画像2と画像4の間に隙間が出来てしまいます。 このような場合は、隙間を無くしたいのですが、このような場合はどのようにすれば良いものでしょうか？ 画像4の<td>に右記のclass名を付けて、<td class="1"> cssにtd.1{padding-top:-30px;}としてみたところ、画像3のthまで上がってしまいます。 全く分からずに困っております。 どなた様か、ご指導の程よろしくお願い致します。
- ベストアンサー
- HTML
- 画像の切り替えの記述形式について
<a href="#A" onclick="document.A.src='../img/gif/B1.gif'"><img src="../img/gif/A1.gif" alt="" width="133" height="176" name="A" id="A" /></a> 画像としてA1.gifがあるのですが、A１.gifを押すと、リンク先のB1.gifが呼び出されて、変更されるというスクリプトになっています。 上のような記述をしているのですが、この場合、指定している#Aのアンカーリンクを指定しているため、画像を押す事に移動してしまいます。移動をしないようにするにはどうしたらいいですか？ <a href="javascript:openURL('URL');"><img></a> このような形式で、アンカーリンクにならずに、上のような操作が可能になるという話を聞きました。 こういう場合、どのように記述したらいいですか？
- 締切済み
- JavaScript
- 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
- 1つの画像オンマウスで3つの画像を切り替えたい！
現在、下記のような感じで一つの画像オンマウスでその画像を含む3つの画像が切り替わるようにしています。 ---------------------------------- <a href="#" onMouseOver="11111.src='a.gif';22222.src='b.gif';33333.src='c.gif'" onMouseOut="11111.src='a_01.gif';22222.src='b_01.gif';33333.src='c_03.gif'"><img src="aaaaaa.gif" alt="" width="94" height="32" border="0" name="11111" /></a> <img src="b_01.gif" alt="" width="572" height="50" name="22222" /> <img src="c_01.gif" alt="" width="96" height="32" border="0" name="33333" /> ---------------------------------- IE6だと、きちんと表示されるのですが、 Firefoxだと表示がおかしくなります。 改善方法はありませんでしょうか？ 助けてください！
- ベストアンサー
- JavaScript
- ジャバスクリプトの正しい描き方
ヤフーの解析ソースをそのまま貼ったら Another HTML-lint gatewayで２点注意されました。 １、<SCRIPT>～</SCRIPT> 内の要素はすべてコメントで囲んだ方が安全です。 ２、`&js` は不明な実体参照です。 どうすれば良いでしょうか？ それと、altが空白でも良いにのでしょうか？ ------------------------------------ <script type="text/javascript" src="http://i.yimg.jp/images/analytics/js/ywa.js"></script> <script type="text/javascript"> var YWATracker = YWA.getTracker("XXXX"); YWATracker.addExcludeProtocol("file:"); YWATracker.submit(); </script> <noscript> <div><img src="http://by.analytics.yahoo.co.jp/p.pl?a=XXXX&js=no" width="1" height="1" alt="" /></div> </noscript>
- ベストアンサー
- JavaScript
- html内かscript内で画像出力。どちらが軽い
ホームページの読み込みは、画像を使えば使うほど重くなってしまいます。 下記コードでは、(1)と(2)で1.jpg～5.jpgの画像をページに出力しています。 (1)はHTMLに、(2)はscript内に、 (1)と(2)では(2)の方がhtmlに<img src=".jpg" width="800" height="300"/> と書かなかった分、ページが重くならない、ということになりますか？ <html> <head> <title>HTML上に直接imgを出力した場合</title> </head> <body> <img src="1.jpg" width="800" height="300"/> <img src="2.jpg" width="800" height="300"/> <img src="3.jpg" width="800" height="300"/> <img src="4.jpg" width="800" height="300"/> <img src="5.jpg" width="800" height="300"/> </body> </html> <html> <head> <title>HTML上にはimgを出力せず、script内でimgを出力した場合</title> <script language="JavaScript"> var imgSanple = new Array( "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"); var randomSelect = Math.floor((Math.random() * 100)) % imgSanple.length; var i = "<img src='"+imgSanple[randomSelect]+"' width='800' height='300'>"; document.write(i); // --> </script> </head> <body> <noscript> <img src="1.jpg" width="800" height="300"> </noscript> </body> </html>
- ベストアンサー
- JavaScript
- 代替文字が表示されなくなった原因は?
画像をポイントすると、かつては代替文字が表示されていました。しかし、急にポイントしても代替文字が表示されなくなりました。原因をお教えください。 image.js → <script src="image.js"></script> は、 document.write('<img src="image.gif" alt="\nあいうえお" width="28" height="30"\n\n'); ジャバスクリプトでない他の画像の代替テキストは表示されます。 インターネットエクスプローラ6です。
- ベストアンサー
- JavaScript
- 画像を縦に並べたら隙間ができることについて
画像を縦に並べたところ隙間ができてしまいます。 隙間無くくっつけたいのですがどうすればいいのでしょうか。 以下htmlです。 <img src="img/nakama_img01.gif" width="687" height="227" alt="画像１" /><br /> <img src="img/nakama_img02.gif" width="687" height="197" alt="画像２" /><br /> <img src="img/nakama_img03.gif" width="687" height="244" alt="画像3" /> <br />で改行せずくっつけてタグを並べても同じ結果でした。 よろしくお願いします。
- ベストアンサー
- HTML
お礼
バッチリできました。 感謝しております。