- マウスのポインターをのせた時にいろいろなアクションをすることができます。
- マウスイベントの記述例
- <span onMouseover="this.style.color='red'" onMouseout="this.style.color=''">〜</span>
● onMouseover= マウスのポインターをのせた時は・・・しなさい
● onMouseout= マウスのポインターを離した時は・・・しなさい - 具体例
| <span onMouseover="this.style.color='red'" onMouseout="this.style.color=''">〜</span> | |
| マウスをのせた時の色を指定 | <span onMouseover="this.style.color='red'" onMouseout="this.style.color=''"> マウスをのせた時の色を指定 </span> |
| 表示文字の置き換え | <span onMouseover="this.innerHTML='別の文字に置き換えます'" onMouseout="this.innerHTML='マウスを離した時の文字'> 表示文字の置き換え </span> |
| 画像に換えます | <span onMouseover="this.innerHTML='<img src=icon.gif>'" onMouseout="this.innerHTML='画像に換えます'"> 画像に換えます </span> |
 画像も換えられます |
<span onMouseover="this.innerHTML='<img src=icon2.gif>これが隠されている画像'" onMouseout="this.innerHTML='<img src=icon.gif>画像も換えられます'"> <img src="icon1.gif" WIDTH="88" HEIGHT="31"> 画像も換えられます </span> |
| <span id="msg1"></span> （この位置に文字を表示） <span onMouseover="msg1.innerHTML='表示する文字 '" onMouseout=' '">マウスを載せる文字</span> |
|
| 表示文字の追加==>> | <span onMouseover="msg1.innerHTML='このように文字が追加されます。'" onMouseout="msg1.innerHTML=''"> 表示文字の追加==>>; </span> <span id="msg1"></span> |
| 画像を追加します==>> | <span onMouseover="img1.innerHTML='<img src=icon.gif align=middle'" onMouseout="img1.innerHTML=''">画像を追加します==>>>; </span> <span id="img1"></span> |
 |
<span onMouseover="img2.innerHTML='<img src=icon.gif'" onMouseout="img2.innerHTML=''"> <img src="iconb.gif" width="88" height="31"alt="icon2.gif"> </span> <span id="img2" ;></span> |
 マウスを載せるとモノクロがカラ−表示に |
<img src="url" style="align:reft;width=100px;hight:100px;filter:Gray" onMouseover="this.style.filter=''" onMouseout="this.style.filter='gray'"> 指定を逆にすれば、カラ−をモノクロとできます。 |
⇒ イベント属性 一覧