うさのJavaScript講座

うさのJavaScript講座 - Blog館 - http://blog.usagi-js.com/ このサイトでは「うさのJavaScript講座」の情報をお届けしています♪ ja Copyright 2006 Wed, 04 Oct 2006 23:30:39 +0900 http://www.sixapart.com/movabletype/ http://blogs.law.harvard.edu/tech/rss イメージでdivの表示・非表示を切り替えるイメージをクリックすると指定しているDiv内（ここではid指定）の表示状態をDivタグスタイル属性を変更し、非表示にしたり表示に戻したりしています。
このブログTOPの左下の「サンプルブログパーツ」にも適応してみました。こんな感じで利用するのも一つの手かもしれませんネ。
なお、ネスケの古いヴァージョンなどでは、getElementByIdが利用できませんのでdocument.layers["div名"]で呼び出してくださいね。他のヴァージョンとの互換性など、レイヤー全般に関するサンプルはうさのJavaScript講座のサンプル集８でご紹介しております。

←クリックしてみてネ♪

この部分がDIV内です。

ソースはこちら↓

<script language="javascript">
<!--
//------------------------------------------------------------
//javascript by ＠うさ http://usagi-js.com/
//------------------------------------------------------------
var currentViewOnBody = true;
function ViewPartsOnBody(layerName)
{
 if (currentViewOnBody )
 {	
   //非表示
   document.getElementById(layerName).style.visibility="hidden";
   document.getElementById('imageArrowOnBody').src="http://usagi-js.com/images/arrowdown.gif";
   currentViewOnBody = false;
 }
 else
 {
   //表示
   document.getElementById(layerName).style.visibility="visible";
   document.getElementById('imageArrowOnBody').src="http://usagi-js.com/images/arrowup.gif";
   currentViewOnBody = true;
 }	
}
//-->
</script>
<!--以下HTML部です-->
<img id="imageArrowOnBody" src="http://usagi-js.com/images/arrowup.gif" border="0" onClick="javascript:ViewPartsOnBody('samplePartsOnBody')" style="cursor:hand">←クリックしてみてネ♪
   <div id="samplePartsOnBody">
<font color="blue">この部分がDIV内です。</font></div>

]]> http://blog.usagi-js.com/archives/2006/10/showhide.html http://blog.usagi-js.com/archives/2006/10/showhide.html JavaScript de ブログ DIV サンプルレイヤー表示非表示 Wed, 04 Oct 2006 23:30:39 +0900 id値をテキストボックスに表示（実はダイブマスターだったりするうさです。）
普段よくボーイング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>

]]> http://blog.usagi-js.com/archives/2006/10/id.html http://blog.usagi-js.com/archives/2006/10/id.html JavaScript de ブログサンプルテキストボックスマウスイベント Mon, 02 Oct 2006 23:25:16 +0900 S~Wから始まるメソッド、プロパティリファレンスうさのJavaScript講座TOPへ]]> http://blog.usagi-js.com/archives/2006/09/sw.html http://blog.usagi-js.com/archives/2006/09/sw.html 更新履歴リファレンス Sat, 23 Sep 2006 01:51:24 +0900 本日日付を画像で表示☆サンプル集１－６９を追加しましたもともとサンプル集１－７に入っていたのですが、最近のブラウザでは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>

]]> http://blog.usagi-js.com/archives/2006/09/post_1.html http://blog.usagi-js.com/archives/2006/09/post_1.html JavaScript de ブログサンプル日付 Thu, 21 Sep 2006 02:48:33 +0900 J~Rから始まるメソッド、プロパティリファレンスうさのJavaScript講座TOPへ]]> http://blog.usagi-js.com/archives/2006/09/jr.html http://blog.usagi-js.com/archives/2006/09/jr.html 更新履歴リファレンス Sun, 17 Sep 2006 00:51:43 +0900 JavaScript川柳募集♪ エントリーはこちらから ]]> http://blog.usagi-js.com/archives/2006/09/javascript_1.html http://blog.usagi-js.com/archives/2006/09/javascript_1.html お知らせ Sat, 16 Sep 2006 02:28:04 +0900 サンプル集10復旧のお知らせうさのJavaScript講座へ]]> http://blog.usagi-js.com/archives/2006/09/10.html http://blog.usagi-js.com/archives/2006/09/10.html 更新履歴 javascript クッキーサンプル Sat, 16 Sep 2006 02:17:23 +0900 G,H,Iから始まるメソッド、プロパティリファレンスうさのJavaScript講座TOPへ]]> http://blog.usagi-js.com/archives/2006/09/ghi.html http://blog.usagi-js.com/archives/2006/09/ghi.html 更新履歴リファレンス Thu, 14 Sep 2006 03:15:32 +0900 サンプル集9復旧のお知らせうさのJavaScript講座・サンプル集9を復旧させました。サンプル集9はいろいろなものを集めたサンプル集です。よろしくお願いいたします♪ http://blog.usagi-js.com/archives/2006/09/9.html http://blog.usagi-js.com/archives/2006/09/9.html 更新履歴サンプル Wed, 13 Sep 2006 00:05:29 +0900 Fから始まるメソッド、プロパティリファレンスうさのJavaScript講座TOPへ]]> http://blog.usagi-js.com/archives/2006/09/f.html http://blog.usagi-js.com/archives/2006/09/f.html 更新履歴リファレンス Tue, 12 Sep 2006 04:56:15 +0900 Eから始まるメソッド、プロパティリファレンスうさのJavaScript講座TOPへ]]> http://blog.usagi-js.com/archives/2006/09/e.html http://blog.usagi-js.com/archives/2006/09/e.html 更新履歴リファレンス Mon, 11 Sep 2006 02:31:15 +0900 サンプル集7,8復旧のお知らせサンプル集入口へ ]]> http://blog.usagi-js.com/archives/2006/09/78.html http://blog.usagi-js.com/archives/2006/09/78.html 更新履歴 ActiveX DirectX javascript サンプルレイヤー Wed, 06 Sep 2006 01:39:55 +0900 ブログにもJavaScriptを♪ おみくじ編
ブログでももちろん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">

]]> http://blog.usagi-js.com/archives/2006/09/javascript.html http://blog.usagi-js.com/archives/2006/09/javascript.html JavaScript de ブログおみくじブログにJavaScript Tue, 05 Sep 2006 03:20:33 +0900 サンプル集6復旧のお知らせサンプル集入口へ]]> http://blog.usagi-js.com/archives/2006/09/6.html http://blog.usagi-js.com/archives/2006/09/6.html 更新履歴 javascript サンプルランダム乱数演算処理 Tue, 05 Sep 2006 02:23:13 +0900 サンプル集5復旧のお知らせサンプル集入口へ ]]> http://blog.usagi-js.com/archives/2006/09/5.html http://blog.usagi-js.com/archives/2006/09/5.html 更新履歴 IFRAME javascript サンプルフレーム Mon, 04 Sep 2006 01:32:29 +0900