SITEMAP [初めてのホームページ講座] [JavaScript , DHTML] [マウス通過時にフォントカラーを変える(JS)]

マウス通過時にフォントカラーを変える(JS)

機能

マウス通過時にフォントカラーと背景色を変えるスクリプトです。

利用方法

HEAD部分にスクリプトを、フォントカラーを変更したい要素に以下の属性を指定します。

onmouseover="Mover()"
onmouseout="Mout()"

改造方法

以下の変数をお好みにあわせて変更できます。値には一般的なカラーコードを指定します。

col[1]: マウス通過時のフォントカラー
col[2]: マウス非通過時のフォントカラー
col[3]: マウス通過時の背景色
col[4]: マウス非通過時の背景色

対応ブラウザ

IE3以上

サンプル

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

<!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-Script-Type" CONTENT="text/javascript">
<TITLE>マウス通過時にフォントカラーを変える(JS)</TITLE>

<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
<!--
var col=new Array();
col[1]="#0000ff";	//マウス通過時のフォントカラー
col[2]="#000000";	//マウス非通過時のフォントカラー
col[3]="#f0f0ff";	//マウス通過時の背景色
col[4]="#ffffff";	//マウス非通過時の背景色

function Mover(){
	window.event.srcElement.style.color = col[1];
	window.event.srcElement.style.background = col[3];
}

function Mout(){
	window.event.srcElement.style.color = col[2];
	window.event.srcElement.style.background = col[4];
}
// -->
</SCRIPT>

</HEAD>

<BODY>

<P onmouseover="Mover()" onmouseout="Mout()">
マウスが通過するとフォントカラーが変わります
</P>

</BODY>
</HTML>

[Go To Top]