■ フォントの字体を動的に変えたい
|
HTMLソース | 結果 |
<DIV onmouseover="this.style.fontStyle='italic'"
onmouseout="this.style.fontStyle='normal'">
ここを通過すると、文字列が斜体に変化します。</DIV>
|
ここを通過すると、文字列が斜体に変化します。
|
■ フォントの種類を動的に変えたい
IMGタグにSTYLE属性で指定します。
|
HTMLソース | 結果 |
<SPAN style="font-family:'sans-serif'"
onmouseover="this.style.fontFamily='fantasy'"
onmouseout="this.style.fontFamily='sans-serif'">
ここを通過すると、フォントが変わります</SPAN>
|
ここを通過すると、フォントが変わります
|
■ 文字列の背景色を変えたい
|
HTMLソース | 結果 |
<SPAN onmouseover="this.style.background='pink';"
onmouseout="this.style.background='white';">
この上を通過すると、背景色がピンクに変わります。
</SPAN>
|
この上を通過すると、背景色がピンクに変わります。
|
■ フォントのサイズを動的に変えたい
|
HTMLソース | 結果 |
<DIV style="font-size:16px"
onmouseover="this.style.fontSize='20px'"
onmouseout="this.style.fontSize='16px'">
ここを通過すると、文字サイズが変化するよ。</DIV>
|
ここを通過すると、文字サイズが変化するよ。
|
■ カーソルが重なるとセルの背景色が変化する
|
HTMLソース | 結果 |
<table border="1">
<td bgcolor="#FFFFFF"
onmouseover="this.style.backgroundColor='#FF0000'"
onmouseout="this.style.backgroundColor='#FFFFFF'">
マウスを乗せると赤くなるよ！！
</td></table>
|
|
■ マウスを乗せると画像が変化
|
HTMLソース | 結果 |
<span onmouseout="changeimg.src='gazo/kabe1.gif'"
onmouseover="changeimg.src='gazo/kabe2.gif'">
<img src="gazo/kabe1.gif" width="100" height="100"
border="0" name="changeimg">
</span>
|
|
|
| 
