Subject   : マウスイベント

カテゴリー  : Home page



マウスのポインターをのせた時にいろいろなアクションをすることができます。


マウスイベントの記述例
<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='&lt;img src=icon.gif&gt;'"
onMouseout="this.innerHTML='画像に換えます'">
画像に換えます
</span>

画像も換えられます
<span
onMouseover="this.innerHTML='&lt;img src=icon2.gif&gt;これが隠されている画像'"
onMouseout="this.innerHTML='&lt;img src=icon.gif&gt;画像も換えられます'">
<
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='&lt;img src=icon.gif align=middle'"
onMouseout="img1.innerHTML=''">画像を追加します==>>>;
</span>
<span id="img1"></span>
icon2.gif <span
onMouseover="img2.innerHTML='&lt;img src=icon.gif'"
onMouseout="img2.innerHTML=''">
<img src="iconb.gif" width="88" height="31"alt="icon2.gif">
</span>
<span id="img2" ;></span>

work3.jpg
マウスを載せるとモノクロがカラ−表示に
<img src="url"
style="align:reft;width=100px;hight:100px;filter:Gray" onMouseover="this.style.filter=''"
onMouseout="this.style.filter='gray'">

指定を逆にすれば、カラ−をモノクロとできます。

   ⇒ イベント属性 一覧

[メニューへ戻る]  [HOMEへ戻る]  [前のページに戻る]