DHTMLの基本
<html>
<body>
<span onmouseover="this.style.fontSize='30'" onmouseout="this.style.fontSize='12'">
→マウスのカーソルをここへ
</span>
</body>
</html>
|
【説明】
onmouseoverというイベントが起こると、spanのfontsizeを30にする。
onmouseoutというイベントが起こると、spanのfontsizeを12にする。
ここでいうthisはイベントの発生したオブジェクトを指します。
DHTMLは静的な属性をイベントによって、動的に変更できる仕組みをいいます。
JavaScriptやVBScriptなどが使用できます。
 サンプル
<html>
<body>
<table border=1 width=100%>
<tr onmouseover="this.style.backgroundColor='#cccccc'" onmouseout="this.style.backgroundColor='#ffffff'"><td>テキスト１<td>テキスト２
<tr onmouseover="this.style.backgroundColor='#cccccc'" onmouseout="this.style.backgroundColor='#ffffff'"><td>テキスト１<td>テキスト２
<tr onmouseover="this.style.backgroundColor='#cccccc'" onmouseout="this.style.backgroundColor='#ffffff'"><td>テキスト１<td>テキスト２
<tr onmouseover="this.style.backgroundColor='#cccccc'" onmouseout="this.style.backgroundColor='#ffffff'"><td>テキスト１<td>テキスト２
<tr onmouseover="this.style.backgroundColor='#cccccc'" onmouseout="this.style.backgroundColor='#ffffff'"><td>テキスト１<td>テキスト２
</table>
</body>
</html>
|
【説明】
onmouseoverというイベントが起こると、trのbackgroundColor(背景色)を#ccccccにする。
onmouseoutというイベントが起こると、trのbackgroundColor(背景色)を#ffffffにする。
サンプル
関連リンク
DHTMLとは
DHTMLで使用できるイベント
ドキュメントを動的に変更する(1)
ドキュメントを動的に変更する(2)
ドキュメントを動的に変更する(3)
ドキュメントを動的に変更する(4)
スポンサードリンク
| |
