innerHTMLでページの一部分を動的に書き換える（書いて試せるホームページ制作講座）

・　サンプルの説明: 　ページの一部分を動的に変更する方法は色々ありますが、このページでは innerHTML を使用する方法を説明します。下の表のピンクとグリーンのタイトル部分にマウスを重ねると黄色い部分の内容が入れ替わります。

東京の紅葉	千葉のバラ園
ここを動的に書き換えます。

・　スクリプト部分のソース: 　タイトルと同数（サンプルは２個）の要素を持つ配列を作り、各要素にＨＴＭＬソースを文字列として代入します。サンプルは区分けした文字列を足し合わせていますが、１行で書いてもかまいません。クォーテーションが重複しないように注意します。

<SCRIPT language="JavaScript">
<!--

a_data=new Array();

a_data[0]='<CENTER><TABLE><TR>'
+'<TD style="width:160;"><IMG src="../img/113023s.jpg"></TD>'
+'<TD style="width:130;font-size:12px;vertical-align:bottom;">'
+'<LI><A href="#">旧古河邸</A>'
+'<LI><A href="#">日比谷公園</A>'
+'<LI><A href="#">井の頭公園</A>'
+'<LI><A href="#">代々木公園</A>'
+'<LI><A href="#">神代植物公園</A>'
+'</TD>'
+'<TD style="width:120;font-size:14px;vertical-align:top;">'
+'<B>写真集の説明</B><BR><BR>　東京の庭園や公園で撮影した紅葉の写真集です。'
+'</TD>'
+'</TR></TABLE></CENTER>';

a_data[1]='<CENTER><TABLE><TR>'
+'<TD style="width:200;height:20;font-size:12px;">'
+'<A href="#">谷津バラ園</A>'
+'</TD>'
+'<TD style="width:20;"></TD>'
+'<TD style="width:200;height:20;font-size:12px;">'
+'<A href="#">京成バラ園</A>'
+'</TD>'
+'</TR><TR>'
+'<TD style="width:200;height:90;font-size:12px;">'
+'　東京湾の最奥部に残された約40haの干潟です。ここには、ゴカイ・貝・カニ・魚そして水鳥などたくさんの生き物たちが生息しています。バラ園は、市制50周年を記念したオリジナルのバラをはじめ数多くのばらが栽培されています。'
+'</TD>'
+'<TD style="width:20;"></TD>'
+'<TD style="width:200;height:90;font-size:12px;">'
+'　3万㎡のローズガーデンを中心に700種7000株のバラと四季折々の草花や樹木が年間を通して楽しめます。冬は温室で開花します。園内には原種やオールドローズも植わっており､園内を1周するとバラの歴史がご覧になれます。'
+'</TD>'
+'</TR></TABLE></CENTER>';

function kobo(sel){document.getElementById("l_menu").innerHTML=a_data[sel];}

//-->
</SCRIPT>

・　ＨＴＭＬ部分のソース: 　動的に書き換える部分に固有のＩＤ（サンプルは id="l_menu" ）を付けます。関数 kobo(配列番号) でこの部分の innerHTML を変更します。

戻る

SEO		[PR] 花おまとめローン Windows7 冷え性対策	動画掲示板レンタルサーバーライブチャット SEO