| ポイント |
<![CDATA[
imgSrc = str;
if (!str) imgSrc = "image"+Math.floor(Math.random()*4 + 1)+".gif";
document.images[iName].src = imgSrc;
]]>
|
| 説 明 |
マウスが画像に重なったら、画像を切り替えるには「document.画像の名前.src」に表示する画像URLを入れます。この画像URLをランダムに生成するには、あらかじめ画像のファイル名の命名規則を決めておきます。サンプルでは「image」「番号」「.gif」となっています。この番号の部分をランダムに生成することで表示する画像のファイル名を生成します。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>マウスが重なったら、その下の画像をランダムに切り替える</title>
<script Language="JavaScript"><!--
function swImg(iName,str)
{
imgSrc = str;
if (!str) imgSrc = "image"+Math.floor(Math.random()*4 + 1)+".gif";
document.images[iName].src = imgSrc;
}
// --></script>
</head>
<body>
<a href="#" onMouseover="swImg('myIMG')" onMouseout="swImg('myIMG','image0.gif')">
<img src="image0.gif" name="myIMG" border="0">
</a>
</body>
</html>
]]>
|
| 補足説明 |
IE4,NN6などDOM (Document Object Model)に対応しているブラウザではハイパーリンクを使わなくても直接imgタグ内にイベントを記述して処理することもできます。 |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
マウスが重なったら、その下の画像をランダムに切り替える