|
 |
|
オンマウスで画像を入れ替える(プレロード)
 |
IE 4.0↑ |
 |
NN 3.0↑ |
| オススメ度： |
 |
|
設置難易度： |
 |
サンプルと機能
→ Sample 1：オンマウスで画像を入れ替える(プレロード)
画像にロールオーバー効果を加えます。
一般的には、画像メニューなどに使われます。
簡易版と違い、あらかじめ画像を呼び込むので、
素早く入れ替えることが可能です。
サンプルスクリプト
緑の文字が変更箇所で、赤い文字が対応するスクリプトです。
"//"以下はコメントです。削除しても影響ありません。
必要な箇所をコピー＆貼り付けして編集してください。
→ Sample 1：マウスを上に置くと画像を入れ替える
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="JavaScript">
<!--
// マウスを上に置くと画像を入れ替える(画像を先に読み込む)
// 入れ替える画像
img = new Array("img/img0.jpg","img/img1.jpg","img/img2.jpg","img/img3.jpg");
bfImg = new Array();
for(i=0; i<img.length; i++) {
bfImg[i] = new Image();
bfImg[i].src = img[i];
}
//-->
</SCRIPT>
</HEAD>
<BODY bgcolor="#ffffff">
マウスを画像の上に置くと画像が入れ替わります。<BR><BR>
<A href="#" onMouseover="document.ia.src='img/img1.jpg'" onMouseout="document.ia.src='img/img0.jpg'">
<IMG src="img/img0.jpg" name="ia" border="0"></A>
<A href="#" onMouseover="document.ib.src='img/img3.jpg'" onMouseout="document.ib.src='img/img2.jpg'">
<IMG src="img/img2.jpg" name="ib" border="0"></A>
</BODY>
</HTML> |
解説・注意点など
必ず対応するように「name」を付けてください。
← JavaScriptに戻る
|
|
|
