表示に関するイベント例です。
色や大きさやスタイルを変えたり、画像を変えたりできます。
this.style.colorで前景色を変えることができます。
<p onmouseover="this.style.color='#0066ff'" onmouseout="this.style.color='#000000'">
On Mouse Over Color 文字色を変える
this.style.backgroundrで背景色を変えることができます。
<p onmouseover=
"this.style.background='#e0e0ff'"
onmouseout="this.style.background='#ffffff'">
On Mouse Over Background Color背景色を変える
this.style.fontFamilyで書体を変えます
<p onmouseover="this.style.fontFamily='Times New Roman'" onmouseout="this.style.fontFamily='Arial'">
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斜体に変える
this.style.fontWeightでフォントの太さを変えます。
<p onmouseover="this.style.fontWeight='bold'" onmouseout="this.style.fontWeight='normal'">
On Mouse Over Font Weight Bold 文字の濃さを変える
「FILTER GROW」で文字を光らせます。
スタイルシートで、マウスが領域に入った時の「glow-on」と、マウスが領域から離れたときの「glow-off」クラスセレクタ作り、「this.className」で、クラスセレクタを呼びます。
<div onmouseover="this.className='glow-on'" onmouseout="this.className='glow-off'">
On Mouse Over Filter Glowフィルターに変える
this.style.leftで要素の右からの位置を変えることができます。
<p onclick="this.style.left='200px'" onmouseout="this.style.left='0'" style="position: relative;">
On Click Left Move 200px表示位置を変える
this.style.widthで要素の幅を変えることができます。
<p style="border: 2px solid #80a0ff;" onclick="this.style.width='120'"
onmouseout="this.style.width='auto'">
On Click Width 120px表示幅を変える
this.innerHTMLでHTMLコードを書き換えることができます。
<span onmouseover="this.innerHTML='このように別の文字が置き換えられます'"
onmouseout="this.innerHTML='表示文字の置き換え'">表示文字の置き換え、または追加
</span></p>
表示文字の置き換え、または追加
???.innerHTMLでHTMLコードを書き換え別の場所に表示できます。
<span onmouseover="img1.innerHTML='このように別の文字が追加されます'"onmouseout="img1.innerHTML='表示文字の追加'">表示文字の追加 </span>
<span id="img1"></span></p>
表示文字の追加
???.innerHTMLでHTMLコードを書き換え別の場所に表示できます。
<p><span onmouseover="img2.innerHTML='<img border=0 src=./img/cat10.gif width=32
height=32>'"
onmouseout="img2.innerHTML=''">猫１</span>
<span onmouseover="img2.innerHTML='<img border=0
src=./img/cat4.gif width=32 height=32>'"
onmouseout="img2.innerHTML=''">猫２</span>
<span onmouseover="img2.innerHTML='<img border=0
src=./img/cat12.gif width=32 height=32>'"
onmouseout="img2.innerHTML=''">猫３</span>
<span onmouseover="img2.innerHTML='<img border=0
src=./img/cat2.gif width=32 height=32>'"
onmouseout="img2.innerHTML=''">猫４</span>
<span onmouseover="img2.innerHTML='<img border=0
src=./img/cat3.gif width=32 height=32>'"
onmouseout="img2.innerHTML=''">猫５</span></p>
<p><span id="img2"></span></p>
猫１猫２猫３ 猫４猫５
this.srcで要素の画像を変えることができます。
<p><img onmouseover="this.src='../images/art01.png'"
onmouseout="this.src='../images/art07.png'"
src="../images/art01.png" width="256" height="256">
</p>
