CSSによるリンク効果２
グレイ効果
画像をグレイフィルタを通しモノクロ化して置きます、マウスカーソルが乗るとフィルタ効果を外し元の画像表示とします。
透明フィルタ効果
画像を透明フィルタを通し50％の不透明度で表示させて置きます、マウスカーソルが乗るとフィルタ効果を外し不透明度100％表示とします。
◎CSSを利用したリンク画像を魅せる効果です
設置方法は手順（１）〜（２）を設定するだけです。
IE5.5・IE6.0で動作確認をしています、他のブラウザでは確認していません。
フィルタ機能はInternet Explorer4.0以上のみ動作します。
メモ帳とFrontPageExpress兼用
〜〜手順（１）〜〜
メモ帳の場合：以下のCSSを<head>〜</head>の中に打ちます
FrontPageExpressの場合：メニューバーの表示（V）⇒HTML（H）でHTMLの表示と編集画面を出して<head>〜</head>の間に以下の記述をします
<style type="text/css">
<!--
グレイ効果の場合
.graykouka_out {
border:0;
filter:gray;
}
.graykouka_over {
border:0;
position:relative;
top:1px;
left:1px;
}
透明フィルタ効果
.toumeikouka_out {
border:0px;
filter:alpha(opacity=50,style=0,enabled=true;)
}
.toumeikouka_over {
border:0;
position:relative;
top:1px;
left:1px;
}
-->
</style>
上記のCSSをそのまま記述すればサンプルと同じ効果で表示されます、グレイ効果はカスタマイズ出来ません透明フィルタ効果も不透明度位のカスタマイズでしたら簡単に出来ます、その他のカスタマイズは座標の概念が出てくる為記載しません
透明フィルタ効果
マウスが乗っていない時の表示.toumeikouka_out {画像の周りの枠を消す設定border:0px;透明度の設定：(不透明度：0〜100、スタイル：(0:標準)、フィルタの実行：(true:する))filter:alpha(opacity=50,style=0,enabled=true;)}マウスが乗った時.toumeikouka_over {画像の周りの枠を消す設定border:0;画像の位置を変化させる設定position:relative;表示位置の上から１px移動top:1px;表示位置の左から１px移動left:1px;}
メモ帳の場合：<body>以下の画像のimg タグの中に記述
FrontPageExpressの場合：メニューバーの表示（V）⇒HTML（H）でHTMLの表示と編集画面を出して<body>以下の画像のimg タグの中に記述
グレイ効果の場合
<a href="#"><img src="../../img/flashmaterial.gif" alt="" class="graykouka_out" onMouseout="this.className='graykouka_out'" onMouseover="this.className='graykouka_over'"></a>
透明フィルタ効果の場合
<a href="#"><img src="../../img/flashmaterial.gif" alt=""
class="toumeikouka_out" onMouseout="this.className='toumeikouka_out'" onMouseover="this.className='toumeikouka_over'"></a>
赤太字のタグをリンクボタンにしたい画像のimg タグの中に記述すればOKです☆
