画像にマウスを重ねるとフェードインして別画像に入れ替える
action
web技
◆手順1【画像設置とスクリプト実行】
※画面上<body>〜</body>間に画像を設置する。
※画像には id設定(d="IMG_3")し、スタイル設定で画像の不透明度をstyle="filter:Alpha(Opacity=100)" に設定します
※onmouseout="fadeIn_B('photo/003.JPG')"で、マウスカーソルが重なったときのイベントを設定します
※スクリプト fadeIn_B() では、表示する画像のパスを指定します
※onmouseout=""も同様です
-----次の行から(copy)-----
<img src="photo/003.JPG" id="IMG_3" style="filter:Alpha(Opacity=100)"
width="300" height="240" border="0" alt=""
onmouseover="fadeIn_B('photo/004.JPG')" onmouseout="fadeIn_B('photo/003.JPG')">
-----上の行まで(copy)-----
◆手順2【スクリプト】画像をフェードインさせて入れ替えるスクリプト
-----次の行から(copy)-----
<script type="text/javascript">
<!--
var f; //表示する画像のパス(相対パス、http://から指定可能)
var TIMER_B=300; //フェードインする時間
var STEP_B=5; //フェードインのステップ(STEP_B×Di_Bの最大値=100)
//透明度を1ステップに5変化させる(全20ステップ)
var Di_B=0; //最初は0に設定
function fadeIn_B(f) {
Di_B=0;
document.all.IMG_3.src=f; //画像を入れ替える
document.all.IMG_3.filters["Alpha"].Opacity=0; //フェードイン実行
fadeIn_B2();
}
function fadeIn_B2() {
if (Di_B <= 20) {
document.all.IMG_3.filters["Alpha"].Opacity=Di_B * STEP_B;
Di_B++;
setTimeout("fadeIn_B2()",TIMER_B);
}
}
//-->
</script>
-----上の行まで(copy)-----
解説等
【類似技】
◆[技g007]画像をフェードイン・フェードアウトする
◆[技m015]画像やセルにマウスを重ねると画像やセル背景色の透明度が変わる
◇filter◇Opacity◇setTimeout
history
(2004.10.04)設置
注意
◆上記の[web技]をクリップボードにコピーしテキストエディタに貼り付けて使用する場合は、表示のための改行記号や全角・半角スペースの記号等を削除して下さい。
-----次の行から(copy)-----
(この部分をクリップボードにコピーしてテキストエディタ等に貼り付けて下さい)
-----上の行まで(copy)-----