うさのJavaScript講座

うさのJavaScript講座 - Blog館 - tag:blog.usagi-js.com,2006://1 2006-10-04T14:53:19Z このサイトでは「うさのJavaScript講座」の情報をお届けしています♪ Movable Type 3.32-ja イメージでdivの表示・非表示を切り替える tag:blog.usagi-js.com,2006://1.17 2006-10-04T14:30:39Z 2006-10-04T14:53:19Z

今回は、サンプルでもよくDLされている、イメージで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>

]]> id値をテキストボックスに表示 tag:blog.usagi-js.com,2006://1.16 2006-10-02T14:25:16Z 2006-10-04T14:50:49Z

週末ふらっと海外で潜ってまいりました。（実はダイブマスターだったりするうさです。...

（実はダイブマスターだったりするうさです。）
普段よくボーイング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>

]]> S~Wから始まるメソッド、プロパティリファレンス tag:blog.usagi-js.com,2006://1.15 2006-09-22T16:51:24Z 2006-09-22T16:54:06Z

S~Wから始まるメソッド、プロパティなどのリファレンスページを復旧しました。こ...

うさのJavaScript講座TOPへ]]> 本日日付を画像で表示☆サンプル集１－６９を追加しました tag:blog.usagi-js.com,2006://1.14 2006-09-20T17:48:33Z 2006-10-04T14:00:16Z

本日日付を画像で表示☆サンプル集１〓６９を追加しました。もともとサンプル集１〓...

もともとサンプル集１－７に入っていたのですが、最近のブラウザでは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>

]]> J~Rから始まるメソッド、プロパティリファレンス tag:blog.usagi-js.com,2006://1.13 2006-09-16T15:51:43Z 2006-09-16T15:53:15Z

J~Rから始まるメソッド、プロパティなどのリファレンスページを復旧しました。よ...

うさのJavaScript講座TOPへ]]> JavaScript川柳募集♪ tag:blog.usagi-js.com,2006://1.12 2006-09-15T17:28:04Z 2006-09-17T15:48:03Z

いつも楽しい川柳を投函していただいていたJavaScript川柳。もうじき再開...

エントリーはこちらから ]]> サンプル集10復旧のお知らせ tag:blog.usagi-js.com,2006://1.11 2006-09-15T17:17:23Z 2006-09-15T17:20:09Z

うさのJavaScript講座・サンプル集10を復旧させました。サンプル集10...

うさのJavaScript講座へ]]> G,H,Iから始まるメソッド、プロパティリファレンス tag:blog.usagi-js.com,2006://1.10 2006-09-13T18:15:32Z 2006-09-13T18:16:44Z

G,H,およびIから始まるメソッド、プロパティなどのリファレンスページを復旧しま...

うさのJavaScript講座TOPへ]]> サンプル集9復旧のお知らせ tag:blog.usagi-js.com,2006://1.9 2006-09-12T15:05:29Z 2006-09-12T15:10:34Z

うさのJavaScript講座・サンプル集9を復旧させました。サンプル集9はい...

うさのJavaScript講座・サンプル集9を復旧させました。サンプル集9はいろいろなものを集めたサンプル集です。よろしくお願いいたします♪ Fから始まるメソッド、プロパティリファレンス tag:blog.usagi-js.com,2006://1.8 2006-09-11T19:56:15Z 2006-09-11T19:56:52Z

Fから始まるメソッド、プロパティなどのリファレンスページを復旧しました。よろし...

うさのJavaScript講座TOPへ]]> Eから始まるメソッド、プロパティリファレンス tag:blog.usagi-js.com,2006://1.7 2006-09-10T17:31:15Z 2006-09-10T17:33:30Z

Eから始まるメソッド、プロパティなどのリファレンスページを復旧しました。 Jav...

うさのJavaScript講座TOPへ]]> サンプル集7,8復旧のお知らせ tag:blog.usagi-js.com,2006://1.6 2006-09-05T16:39:55Z 2006-09-05T16:45:09Z

うさのJavaScript講座・サンプル集7およびサンプル集8を復旧させました。...

サンプル集入口へ ]]> ブログにもJavaScriptを♪ おみくじ編 tag:blog.usagi-js.com,2006://1.5 2006-09-04T18:20:33Z 2006-10-04T13:57:59Z

こんにちは。ブログでももちろん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">

]]> 別ページにサンプルを張っておりましたが、ブログ本文に戻しました。(10/03) サンプル集6復旧のお知らせ tag:blog.usagi-js.com,2006://1.4 2006-09-04T17:23:13Z 2006-09-05T16:45:39Z

うさのJavaScript講座・サンプル集6を復旧させました。サンプル集6は演...

サンプル集入口へ]]> サンプル集5復旧のお知らせ tag:blog.usagi-js.com,2006://1.3 2006-09-03T16:32:29Z 2006-09-04T17:43:03Z

うさのJavaScript講座・サンプル集5を復旧させました。サンプル集5はフ...

サンプル集入口へ ]]>