スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ブログで動的に画像を挿入する術 insertAdjacentHTML

insertAdjacentTextと同様に、タグを含めたテキストを挿入できるのが、insertAdjacentHTMLです。タグを含んだテキストといえば、当然画像も挿入できることになります。
書式は
ID.insertAdjacentHTML("position","insert string")
positionは以下のオプションがある。

"BeforeBegin":文字列の前に挿入します。新文字列-改行-文字列で挿入されます。
"AfterBegin":文字列の前に挿入します。新文字列-文字列で挿入されます。
"BeforeEnd":文字列の後ろに挿入します。文字列-新文字列-で挿入されます。
"AfterEnd":文字列の後ろに挿入します。文字列-改行-新文字列-で挿入されます。
 下は6個のさいころのモーションGIF画像を、文字をクリックするごとに追加していき、6個になるともとにもどるというスクリプトです。




ソースは条件分岐や配列も含まれていてすこし複雑になるが以下です


<center>
<div style="width:550;height:180;margin:10px;background-color:#eeff99;"><span style="font-size:1;color:#eeff99;"><<div id="num070208" width=1 height=0></span></div>
<span style="font-size:1;color:#eeff99;"><<marquee style="background-color:#eeff99;width:500;height:140;padding:10;" id="mq070208" ><img src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/12723596674bd6aaf307931_import.gif"><</marquee></span>
<br>
<span style="font-size:1;color:#eeff99;"><<a href="#dummy" onclick="
var gazou=new Array(7);
gazou[1]='<img src=http://blog-imgs-43.fc2.com/d/o/n/dongwcat/12723596674bd6aaf307931_import.gif />';
gazou[2]='<img src=http://blogimg.goo.ne.jp/user_image/3c/b4/2cf0cb28598ea36eea0ea3dec0e68f17.gif />';
gazou[3]='<img src=http://blogimg.goo.ne.jp/user_image/6e/c8/b540aad047336a75945d65695567c534.gif />';
gazou[4]='<img src=http://blogimg.goo.ne.jp/user_image/15/71/759780459f4215b43f5da7ad085d106a.gif />';
gazou[5]='<img src=http://blogimg.goo.ne.jp/user_image/71/d7/be1637569eb4ee8292caab9ab2397ee9.gif />';
gazou[6]='<img src=http://blogimg.goo.ne.jp/user_image/7f/dd/911ff6cfd5c2c72e3f7cb7acc9d74263.gif />';
i=num070208.width;if(++i>6){mq070208.innerText='';i=1;} mq070208.insertAdjacentHTML('BeforeEnd',gazou[i]);num070208.width=i;"></span>さいころを増やす</a>
</div></center>

コメントの投稿

非公開コメント

FC2カウンター
プロフィール

dongwcat

Author:dongwcat
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。