..



 ■HomeJavaScriptサンプル集〔基本編〕−画像制御(マウスを重ねると画像が入れ替わる)

JavaScript 無料のフリースクリプト集...
画像入れ替え
マウスを重ねると画像が入れ替わる

 
マウスカーソルを画像に合わせると違う画像に入れ替わります。
 ※通信速度が遅いと画像の読み込みまでに時間がかかる場合があります。


 HPでの使用方法
<img>タグの編集

 <img>タグに次の赤字の部分を挿入してください。詳しい説明は入門編に編集してあります。


<img src="最初に表示する画像ファイル" onMousemove="this.src='入れ替える画像ファイル'" onMouseout="this.src='最初に表示する画像ファイル'">


サンプルのHTML

<head>
<title>マウスを重ねると画像が入れ替わる</title>
</hrad>
<body>
<div align="center"><br><font color="#ff0000"><b><big><big><big>シーサーのホームページ</big></big></big></b></font><br>
<table cellpadding="0" cellspacing="0" border="0" width="550">
  <tbody>
    <tr>
<td height="255" align="center" width="25%">
<img src="si3_1.gif" onMousemove="this.src='si3_2.gif'" onMouseout="this.src='si3_1.gif'">

      <br>
      </td>
      <td valign="bottom" height="255" align="center" width="25%">
<img src="si0_1.gif" onMousemove="this.src='si0_2.gif'" onMouseout="this.src='si0_1.gif'">

      <br>
      </td>
      <td valign="bottom" height="255" align="center" width="25%">
<img src="si1_1.gif" onMousemove="this.src='si1_2.gif'" onMouseout="this.src='si1_1.gif'">
      <br>
      </td>
      <td valign="middle" height="255" align="center" width="25%">
<img src="si2_1.gif" onMousemove="this.src='si2_2.gif'" onMouseout="this.src='si2_1.gif'">

      <br>
      </td>
    </tr>
  </tbody>
</table>
<br><font color="#666666"><small>マウスカーソルを画像に重ねてください</small></font><br>
</div>
</body>
</html>

※上記のサンプルプログラムをコピー&ペーストで実行する場合は以下の画像ファイルを右クリックして「対象を保存」で同じフォルダ内に保存してください。

  si0_1.gif  si0_2.gif  si1_1.gif  si1_2.gif  si2_1.gif  si2_2.gif  si3_1.gif  si3_2.gif

一括ダウンロード書庫ファイル:sisa.lzh

..


..


..