 |
・・・ インスタントＪＡＶＡＳＣＲＩＰＴ ・・・
マウスの動きに反応して画像を変えたい場合に使うのがこれ。マウスイベントと呼ばれる機能である。マウスが重なったときにロードを開始すると画像がすぐに表示されないので、まず利用する画像をキャッシングすること。そして<img>タグと<a>タグに特殊なアトリビュートを挿入する必要があるが、とりあえずはサンプルコードをどうぞ。
<head>...</head>にはいるコード：
<script language=JavaScript>
<!--
title_out = new Image(); title_out.src = "imgs/title.gif";
title_over = new Image(); title_over.src = "imgs/title2.gif";
function swp(ImgName, SrcName) {
document.images[ImgName].src = eval(SrcName + ".src");
}
//-->
</script>
|
続いてタグへの特殊処理：
<a href="title_page.html"
onMouseOver="swp('title','title_over')"
onMouseOut="swp('title','title_out')"
><img src="imgs/title.gif" name="title"
width=110 height=21 border=0></a>
|
ちょっと複雑だが、ポイントは「swp」というファンクション。変化する画像に名前をつけ、その名前と変化後の画像の名前を指定して「swp」におくることで変化を実現する。
- onMouseOver="何々"： マウスが画像の上にきたら「何々」する
- onMouseOut="何々"： マウスが画像の上から離れたら「何々」する
「何々」はＪＡＶＡＳＣＲＩＰＴのコード。この場合は以前に定義した「swp」という機能を実行している。「swp」は単純に画像を入れ替えることしかしないので、マウスが重なった場合と離れた場合とでどの画像に変化させるかを名前で指定すればいいわけだ。
|
|