| 解 説 |
マウスが文字の上に乗ったらテキストのサイズを変更するにはイベントを検知しthis.style.fontSizeに文字のサイズを指定します。１文字ずつspanタグで囲んで手入力するのは面倒なのでdocument.all[タグ名].innerTextとして文字を読み出しspanタグを設定後に再度document.all[タグ名].innerHTMLで内容を書き戻します。
|
| コード |
<![CDATA[
<html>
<head>
<title>マウスが乗ったら表示されているテキストのサイズを変える</title>
<script language="JavaScript"><!--
function setText(tagName)
{
text = document.all[tagName].innerText;
html = "";
mEvent = "<span style='font-size:12pt' onMouseover=this.style.fontSize='18pt' onMouseout=this.style.fontSize='12pt'>";
mEnd = "</span>";
for (i=0; i<text.length; i++)
{
str = text.charAt(i);
html= html + mEvent + str + mEnd;
}
document.all[tagName].innerHTML = html;
}
// --></script>
</head>
<body onLoad="setText('myTEXT')">
<p id="myTEXT" style="font-size:12pt">
文字の上にマウスを乗せると１文字ごとにサイズが変わります。<br>
指定した段落（ブロックタグで囲まれた範囲）だけ指定できます。
</p>
</body>
</html>
]]>
|
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View! |
マウスが乗ったら表示されているテキストのサイズを変える