SITEMAP [初めてのホームページ講座] [JavaScript , DHTML] [マウス通過時に背景色を変える]

マウス通過時に背景色を変える

機能

テキストの上をマウスが通過すると背景色を変えるスクリプトです。メニューなどに最適な手法です。

利用方法

HEAD部分にスタイルとスクリプトを記述します。 BODY部分には、任意の場所にDIV要素に対してID属性iLxを指定します。この時、DIV要素（レイヤー）は使用するテキスト分だけ必要です。具体的には、基準となるテキストを「iL0」とし、それ以外に影を付けるテキスト分を加えます。また、iLxのxの部分は0から順に連番で付ける必要があります（ここでは１～４）。

改造方法

タイプする速度とスタイル、テキストを変更可能です。

スタイル(Style1): CSSリファレンスに従って、変更可。
テキスト: A要素に記述しているテキストを変更することで可能。
レイヤー数の変更: Laymaxに変更後のレイヤー数を指定します。と同時に、DIV要素を追加、削除し数を合わせます。この時、ID属性値はiLxの「x」の数値に注意して下さい。また、「iL0」は必須で、これはマウス非通過時のレイヤーを示します。
テキストカラー: 変数Col[x]を変更します。このときID属性iLxの「x」に対応した配列番号がそのテキストカラーを示します。このテキストカラーはマウス通過時を示し、Col[0]はマウス非通過時のテキストカラーを指定します。

対応ブラウザ

IE4,NN4以上

サンプル

［サンプルを見る］［ダウンロード］

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>

<HEAD>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_JIS">
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<TITLE>マウス通過時に背景色を変える</TITLE>

<STYLE TYPE="text/css">
<!--
.Style1{
	position:	absolute;
	font-size:	28px;
	font-weight:	bold;
}
#iL1{
	color:		#0000ff;
	top:		100px;
	left:		100px;
	width:		400px;
	height:		28px;
	clip:		0 400 28 0;
}
#iL2{
	color:		#ff0000;
	top:		130px;
	left:		100px;
	width:		400px;
	height:		28px;
	clip:		0 400 28 0;
}
#iL3{
	color:		#00ff00;
	top:		160px;
	left:		100px;
	width:		400px;
	height:		28px;
	clip:		0 400 28 0;
}
#iL4{
	color:		#00ff00;
	top:		190px;
	left:		100px;
	width:		400px;
	height:		28px;
	clip:		0 400 28 0;
}
-->
</STYLE>

<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
<!--
//ブラウザのバージョンチェック
var brw_v = navigator.appVersion.charAt(0);
var brw_n = navigator.appName.charAt(0);
var iIE4 = false;
var iNN4 = false;
if((brw_v >= 4)&&(brw_n == "M"))iIE4 = true;
if((brw_v >= 4)&&(brw_n == "N"))iNN4 = true;

var Laymax = 4;		//レイヤー数
var Col = new Array();
Col[0] = "#ffffff";		//マウス非通過時の背景色
Col[1] = "#ddddff";		//iL1の背景色
Col[2] = "#ffdddd";		//iL2の背景色
Col[3] = "#ddffdd";		//iL3の背景色
Col[4] = "#cccccc";		//iL4の背景色

function Mover(n){
	if(iIE4){
		document.all("iL"+n).style.backgroundColor = Col[n];
	}
	if(iNN4){
		document.layers["iL"+n].bgColor = Col[n];
	}
}

function Mout(n){
	if(iIE4){
		document.all("iL"+n).style.backgroundColor = Col[0];
	}
	if(iNN4){
		document.layers["iL"+n].bgColor = Col[0];
	}
}
// -->
</SCRIPT>

</HEAD>

<BODY>

<DIV CLASS="Style1" ID="iL1">
<A HREF="./sp26.html"
onMouseOver="Mover(1)" onMouseOut="Mout(1)">初めてのホームページ講座</A>
</DIV>

<DIV CLASS="Style1" ID="iL2">
<A HREF="./sp26.html"
onMouseOver="Mover(2)" onMouseOut="Mout(2)">メールマガジン</A>
</DIV>

<DIV CLASS="Style1" ID="iL3">
<A HREF="./sp26.html"
onMouseOver="Mover(3)" onMouseOut="Mout(3)">HTML リファレンス</A>
</DIV>

<DIV CLASS="Style1" ID="iL4">
<A HREF="./sp26.html"
onMouseOver="Mover(4)" onMouseOut="Mout(4)">戻る</A>
</DIV>

</BODY>
</HTML>

[Go To Top]