マウスが重なったら個別に文字のスタイルを変える


■動作ブラウザ　【 IE:4.0　 NN:-】
Internet Explorer Netscape Navigator DreamPassport iCab
3.0x 4.0x 4.5 5.0x 5.5 6.0 2.0x 3.0x 4.0x 4.x 6.0 2 3 2.x
Windows × ○ - ○ ○ ○ × × × × × - × -
Macintosh × ○ ○ ○ - - × × × × × - - ×
UNIX - - - - - - × × × × × - - -
Dreamcast - - - - - - - - - - × × -

ポイント function change(xID,col,size) { document.all[xID].style.backgroundColor = col; document.all[xID].style.fontSize = size; }
説　　明 文字のスタイルを変更するにはaタグにid="myText1"などとして個別にIDを指定しておきます。このID名を関数に渡します。サンプルでは引数（変数）xIDに渡されたID名が入りますので、「document.all[xID].style.スタイル属性名」として各種スタイルを変更できます。
サンプル <html> <head> <title>マウスが重なったら文字のスタイルを変える</title> <script Language="JavaScript"><!-- function change(xID,col,size) { document.all[xID].style.backgroundColor = col; document.all[xID].style.fontSize = size; } // --></script> </head> <body bgcolor="white"> <a href="#" id="myText1" onMouseover="change('myText1','orange','24pt')" onMouseout="change('myText1','white','12pt')">マウスを乗せて【１】</a><br> <a href="#" id="myText2" onMouseover="change('myText2','red','48pt')" onMouseout="change('myText2','white','12pt')">マウスを乗せて【２】</a><br> </body> </html>
補足説明 aタグであればa:hover{ background-color:orange; font-size:24pt; }のようにスタイルシートで指定することもできます。

■サンプルスクリプトを実行する　>>実行
 ■各ブラウザでの動作結果を見る　>>View!
写真素材 PIXTA