Display Event
表示に関するイベント例です。
色や大きさやスタイルを変えたり、画像を変えたりできます。
テキストの色を変える
this.style.colorで前景色を変えることができます。
<p onmouseover="this.style.color='#ff6600'" onmouseout="this.style.color='#6666ff'">On Mouse Over Color Orange</p>
On Mouse Over Color Orange
背景色を変える
this.style.backgroundrで背景色を変えることができます。
<p onmouseover="this.style.background='#ff6600'" onmouseout="this.style.background='#ffffff'">On Mouse Over Background Color Orang</p>
On Mouse Over Background Color Orange
書体を変える
this.style.fontFamilyで書体を変えます。
<p onmouseover="this.style.fontFamily='Times New Roman'" onmouseout="this.style.fontFamily='Arial'">On Mouse Over Font Family Times</p>
On Mouse Over Font Family Times
フォントスタイルを変える
this.style.fontStyleでフォントのスタイルを変えます。
<p onmouseover="this.style.fontStyle='italic'" onmouseout="this.style.fontStyle='normal'">On Mouse Over Font Style Italic</p>
On Mouse Over Font Style Italic
フォントの太さを変える
this.style.fontWeightでフォントの太さを変えます。
<p onmouseover="this.style.fontWeight='bold'" onmouseout="this.style.fontWeight='normal'">On Mouse Over Font Weight Bold</p>
On Mouse Over Font Weight Bold
文字を光らせる
「FILTER GROW」で文字を光らせます。
スタイルシートで、マウスが領域に入った時の「glow-on」と、マウスが領域から離れたときの「glow-off」クラスセレクタ作り、「this.className」で、クラスセレクタを呼びます。
<style>
<!--
div.glow-on { width: 300px; height: 30px;
color: #ffffcc;
filter: glow(color=#ff3300, strength=3); }
div.glow-off { width: 300px; height: 30px;
color: #ff6600; }
-->
</style>
<div onmouseover="this.className='glow-on'"
onmouseout="this.className='glow-off'">
<p>On Mouse Over Filter Glow</p></div>
On Mouse Over Filter Glow
要素の位置を変える
this.style.leftで要素の右からの位置を変えることができます。
<p onclick="this.style.left='80'" onmouseout="this.style.left='0'">On Mouse Over Left Move 80px</p>
On Mouse Over Left Move 80px
要素の幅を変える
this.style.widthで要素の幅を変えることができます。
<p onclick="this.style.width='120'" onmouseout="this.style.width='auto'">On Mouse Over Width 120px</p>
On Mouse Over Width 120px
画像を変える
this.srcで要素の画像を変えることができます。
<img onmouseover="this.src='sample02.gif'" onmouseout="this.src='sample01.gif'" src="sample01.gif">
 |
 |
|---|
