JavaScript ロールオーバー時に画像をカラーにする

画像の上にマウスカーソルを合わせてください。

<!-- 宣言 -->
<script language="Javascript">
<!--
function monotone(obj){
    obj.filters["Gray"].enabled = true;
}
function color(obj){
    obj.filters["Gray"].enabled = false;
}
// -->
</script>

<!-- 呼び出し -->
<img src="./img/image01.jpg" style="filter:Gray()"
    onMouseOver="color(this)" onMouseOut="monotone(this)">
<img src="./img/image02.jpg" style="filter:Gray()"
    onMouseOver="color(this)" onMouseOut="monotone(this)">
<img src="./img/image03.jpg" style="filter:Gray()"
    onMouseOver="color(this)" onMouseOut="monotone(this)">

まず、画像の初期状態としてstyle="filter:Gray()"を指定してグレースケールにします。そしてカーソルのロールオーバー(onMouseOver)、ロールアウト(onMouseOut)時に有効・無効を切り替えることで、動的なイメージ描画切り替えを実現します。