うさのJavaScript講座 - Blog館 - | マウスオーバーで指定した場所の色が変化する

日	月	火	水	木	金	土
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

マウスオーバーイベントで画像が切り替わるっていうのはよく見ますが、単純に色が変化するのもありですよね。ということで、今回はサンプル集3の30をご紹介します。
マウスが上にくると、Spanタグ内の色を変えます。一色ぢゃつまらないので、いろんな色を配列に入れて、タイマーでクルクル回してみてます。
ぜひお試しくださいませ♪

ここの→色がかわります♪
マウスを当ててね！

ソースはこちら↓

<script language="javascript">
<!--
//------------------------------------------------------------
//javascript by ＠うさ http://usagi-js.com/
//------------------------------------------------------------
var strColor = new Array("#ff0000","#00cc00","#0000ff","#990099","#999999","#ff80c0","#0080ff","#ff8000"); 
var nLoop = 0;
var nTimer;
function StartColorChange()
{
	clearTimeout(nTimer);
	if (document.getElementById)
	{
		nTimer = setInterval("ChangeColor()", 500);	//変化するスピードの変更はここで。
	}
}
function ChangeColor()
{
	document.getElementById("changeColorArea").style.color=strColor[nLoop];
	//次の準備
	if (nLoop > strColor.length-1)
	{
		nLoop = 0;
		clearTimeout(nTimer);
		return;
	}
	else
	{
		nLoop++;
	}
}
//-->
</script>
<!--以下HTML部です-->
ここの→<span id="changeColorArea">色</span>がかわります♪<BR>
<a href="リンク先" onMouseOver="StartColorChange()" name="lnkMouse">マウスを当ててね！</a>

うさのJavaScript講座 - Blog館 -

このサイトでは「うさのJavaScript講座」の情報やブログにも使えるJavaScriptサンプルをお届けしています♪

Calendar

うさゾン [うさ+Amazon]

Links

Category Archives

Archives

マウスオーバーで指定した場所の色が変化する

タグ:

trackbacks

comments

comment form

Recent Entries

Feed

Inside
うさのJavaScript講座

Powered by

copyright (c) ＠うさ

うさのJavaScript講座 - Blog館 -

このサイトでは「うさのJavaScript講座」の情報やブログにも使えるJavaScriptサンプルをお届けしています♪

Calendar

Search

うさゾン [うさ+Amazon]

Links

Category Archives

Archives

マウスオーバーで指定した場所の色が変化する

タグ:

trackbacks

comments

comment form

Recent Entries

Feed

Inside うさのJavaScript講座

Powered by

copyright (c) ＠うさ

Inside
うさのJavaScript講座