アクセントをつけよう!

カーソルが重なると文字背景色を変える

<a href="★" onMouseOver="this.style.backgroundColor='red'"
onMouseOut="this.style.backgroundColor='white'">〜</a>

★=リンク先URLまたはファイル名

カーソルが重なると文字をポップアップ表示

だけの機能です
<a href="★" onMouseOver="msg.innerHTML='☆'"
onMouseOut="msg.innerHTML=''">〜</a>
<span ID="msg"></div>

タグ使用例
<html>
<head>
<title>タグであそぼう!</title>
</head>
<body bgcolor="#008b8b">
<a href="***.html" onMouseOver="msg.innerHTML='<marquee width=100>更新日時×××××</marquee>'"
onMouseOut="msg.innerHTML=''">〜</a>
<span ID="msg" style="background-color: #8470ff; font-size: 10pt"></span>

</body>
</html>

カーソルを重ねるとメッセージが表示されます

リンクにボタンを使おう

<input type="button" style=background-color:★;font-weight:☆;color:■; value="□" onclick="location.href='△'">
★=スタイルシートでボタンの背景色を指定します
☆=スタイルシートでボタンに表示する文字の太さを指定します
■=スタイルシートでボタンに表示する文字色を指定します
□=ボタンに表示される文字
△=リンク先のURL
ページの一番したのナビゲーションボタンがサンプルです(^_^)/

マウスが重なるとヘルプを表示する

<タグ名 title="★">
<img>タグのALTを使用するのと同じようにチップヘルプを表示させる事が出来ます
★=表示させるヘルプ文字列
ここにカーソルを乗せるとチップヘルプが表示されます

カーソルが重なると画像のサイズを変更する

onMouseover="document.img.width=50;document.img.height=15;"
onMouseout="document.img.width=30;document.img.height=15;"
タグ使用例
<html>
<head>
<title>タグであそぼう!</title>
</head>
<body bgcolor="#008b8b">
<a href="***.html" onMouseover="document.img.width=50;document.img.height=15;"
onMouseout="document.img.width=30;document.img.height=15;">
<img src=***.gif name="img" width="30" height="15"></a>

</body>
</html>
複数の行で使用する場合はdocument.img,<img>タグ内のname=imgを
それぞれ違う名前に変更して下さい
サンプル

リンク1 リンク2 リンク3


フォーム項目背景色をonMouseoverで変化させる

onMouseover="this.style.backgroundColor='★1'"
onMouseout="this.style.backgroundColor='★2'"

★1=マウスカーソルが重なったときの色カラーコード又はカラーネームで指定
★2=カーソルが離れた時の色カラーコード又はカラーネームで指定
タグ使用例
<form>
<textarea cols="55" rows="7" onMouseover="this.style.backgroundColor='#87cefa'"
onMouseout="this.style.backgroundColor='white'"
〜テキストエリアの内容〜</texarea> </form>

サンプル

フォーム項目外枠色をonMouseoverで変化させる

onMouseover="this.style.borderColor='★1'"
onMouseout="this.style.borderColor='★2'"

★1=マウスカーソルが重なったときの色カラーコード又はカラーネームで指定
★2=カーソルが離れた時の色カラーコード又はカラーネームで指定
タグ使用例
<form>
<input type="text" style="border-width:3px;border-color:#87cefa;border-style: solid" onMouseover="this.style.borderColor='red'" onMouseout="this.style.borderColor='#87cefa'"> </form>

サンプル
マウスカーソルを重ねると外枠色が変わります

ボタン背景色をonMouseoverで変化させる

onmouseover="this.style.backgroundColor='★1'"
onmouseout="this.style.backgroundColor='★2'"

★1=マウスカーソルが重なったときの色カラーコード又はカラーネームで指定
★2=カーソルが離れた時の色カラーコード又はカラーネームで指定
タグ使用例
<input type="button" style="background-color: #00CCCC;" onmouseover="this.style.backgroundColor='#FF3300'" onmouseout="this.style.backgroundColor='#00CCCC'" value="背景色が変化します">
サンプル
マウスカーソルを重ねるとボタン背景色が変わります

Click Here!