週末ふらっと海外で潜ってまいりました。（実はダイブマスターだったりするうさです。）
普段よくボーイング747に乗るのですが、今回は757。行きはエコノミー（コーチ）で帰りはビジネスだったので、その座席配列をマウスイベントで表現してみることにします。

サンプルでは、テキストにAタグを貼り、そのid値をテキストボックスに表示させています。AタグでなくてDIVタグなどでも動作します。ただし、テキストボックスに表示する場合、特に古いヴァージョンのブラウザなどgetElementById関数を利用できないブラウザもありますので、その場合は、"document.フォーム名.テキストボックス名"にてご利用くださいませ。フォームに関するサンプルは、うさのJavaScript講座のサンプル集４に入っています。

■ ■　 ■ ■

■ ■ ■　 ■ ■ ■



ソースはこちら↓

<script language="javascript"> <!-- //------------------------------------------------------------ //javascript by ＠うさ http://www.usagi-js.com/ //------------------------------------------------------------ //テキストボックスの値をセットしています。マウスがはずれたときに呼び出されています。 function ShowDescription(content) { document.getElementById('sampleDescription').value = content.id; } //テキストボックスの値をなしにしています。マウスがはずれたときに呼び出されています。 function EraseDescription() { document.getElementById('sampleDescription').value = ""; } //--> </script> <!--以下HTML部です--> <a href="#" id="Seat Coach A" onmouseover="ShowDescription(this)" onmouseout="EraseDescription()"><font color="red">■</font></a> <input id="sampleDescription" type="text" name="sampleDescription" size="20" readonly>

本日日付を画像で表示☆サンプル集１－６９を追加しました。
もともとサンプル集１－７に入っていたのですが、最近のブラウザではgetYearでなくgetFullYearで年度を取得するので、その1行を変更したものです。サンプルはそのままHTML/XHTML内部にも記述できますし、JSファイルにしていただいても結構です。ご自由にカスタマイズしてくださいませ。
ブログにももちろん使えますのでご利用くださいね♪

うさのJavaScript講座・サンプル集1-69をこのページに貼り付けています。

ソースはこちら↓

<script language="javascript"> <!-- //------------------------------------------------------------ //javascript by ＠うさ http://www.usagi-js.com/ //------------------------------------------------------------ //変数宣言 var dtToday = new Date; var strYear; var strMonth; var strDate; //０から９までの画像を用意してください。 //画像のURLを宣言します。 var strPicture = new Array("../images/number/orange0_on.gif", "../images/number/orange1_on.gif", "../images/number/orange2_on.gif", "../images/number/orange3_on.gif", "../images/number/orange4_on.gif", "../images/number/orange5_on.gif", "../images/number/orange6_on.gif", "../images/number/orange7_on.gif", "../images/number/orange8_on.gif", "../images/number/orange9_on.gif"); //年月日を取得 strYear = dtToday.getFullYear(); strMonth = dtToday.getMonth() + 1; strDate = dtToday.getDate(); //桁数を整理します if (strMonth < 10) { strMonth = "0" + strMonth; } if (strDate < 10) { strDate = "0" + strDate; } //数字に画像を当てるための準備です。 var imgYear, imgMonth, imgDate; imgYear = strYear.toString(); imgMonth = strMonth.toString(); imgDate = strDate.toString(); //ここから表示 document.write("<img src='"+strPicture[imgYear.substring(0,1)]+"'>"+"<img src='"+strPicture[imgYear.substring(1,2)]+"'>"+"<img src='"+strPicture[imgYear.substring(2,3)]+"'>"+"<img src='"+strPicture[imgYear.substring(3,4)]+"'>"+"年<br>"); document.write("<img src='"+strPicture[imgMonth.substring(0,1)]+"'>"+"<img src='"+strPicture[imgMonth.substring(1,2)]+"'>"+"月"); document.write("<img src='"+strPicture[imgDate.substring(0,1)]+"'>"+"<img src='"+strPicture[imgDate.substring(1,2)]+"'>"+"日"); //--> </script>

こんにちは。
ブログでももちろんJavaScriptが使えるということで、サンプル集の一部からブログに貼り付けてお送りします。
今回は本日サンプルを復旧させましたサンプルの中から、ここにおみくじをはってみました。サンプルでは投函本文にありますが、左や右のブログパーツ部分にいかがでしょうか？Script内部は配列になっていますのでいくつでも画像を準備していただけます。
おためしあれ♪





ソースはこちら↓

<script language="javascript"> <!-- //------------------------------------------------------------ //javascript by ＠うさ http://usagi-js.com/ //------------------------------------------------------------ function CalStart() { //画像を用意していれておきます。 var arrImage = new Array("http://usagi-js.com/sample/images/omikuji/daikichi.gif", "http://usagi-js.com/sample/images/omikuji/kichi.gif", "http://usagi-js.com/sample/images/omikuji/chuukichi.gif") //処理スタート nTemp = Math.round(Math.random()*(arrImage.length - 1)); document.getElementById('imageOmikuji').src = arrImage[nTemp]; } //--> </script> <!--以下HTML部です--> <INPUT type="button" name="buttonOmikuji" value="ぽちっ" onClick="javascript:CalStart()"><br> <img src="http://usagi-js.com/sample/images/omikuji/blank.gif" name="imageOmikuji" border="0">