Mouse Event
マウス操作でイベントを起こします。
マウスが触れたら色を変わったり、クリックしたら文字が大きくなったり、マウス操作でさまざまなイベントをコントロールできます。
領域内でボタンのON・OFF
「onmousedown」でマウスボタンを押した時、「onmouseup」でマウスボタンを離した時イベント起きます。
onmousedown=”＜イベント関数＞”
onmouseup=”＜イベント関数＞”
<p style="color: #6666ff" onmousedown="this.style.color='#ff6600'" onmouseup="this.style.color='#6666ff'"> Onmouse Up Color Orange</p>
On Mouse Up Color Orange
領域内にIN・OUT
「onmouseover」でマウスが領域に入った時、「onmousemove」でマウスが動いた時、「onmouseout」でマウスが領域を出た時イベントが起きます。
onmouseover=”＜イベント関数＞”
onmouseout=”＜イベント関数＞”
<p style="color: #6666ff" onmouseover="this.style.color='#ff6600'" onmouseout="this.style.background='#6666ff'"> On Mouse Out Color Blue</p>
On Mouse Out Color Blue
領域内でMOVE
「onmoumover」で領域内でマウスが動いた時イベントに起きます。
onmousemove=”＜イベント関数＞”
<p style="color: #ffffff" onmousemove="this.style.color='#ff6600'" onmouseout="this.style.color='#ffffff'"> On Mouse Out Color Orange</p>
On Mouse Out Color Orange
領域内でクリック
「onclick」でマウスボタンをクリックした時、「ondblclick」でマウスボタンをWクリックした時イベントが起きます。
onclick=”<イベント関数>”
ondblclick=”<イベント関数>”
<p style="#ff6666" onclick="this.style.color='#6666ff'" ondblclick="this.style.color='#ff6666'"> Onclick olor Red</p>
Onclick Color Red
 |
 |
|---|
