KGWEB-パソコンとインターネットな生活、では皆様のパソコンライフ及びインターネットライフにお役立て出来るコンテンツで構成されます。ブログ形式となっていますので、関心のあるメニューからお進み下さい。
カーソルを当てると変化するボタン
カーソルを当てると変化するボタンは良く、長たらしいJavaScriptを使いますが、簡単に作成する方法があります。
簡単なJavaScript
最初にこのようなボタンを作成します。
<head></head>内に、
<meta http-equiv="Content-Style-Type" content="text/css" />を記述します（xhtmlの時、htmlの時は /は付けないで下さい）
<body></body>内に、
<a href=""><img src="btn0.gif" alt="" onmouseover="this.src='btn1.gif'" onmouseout="this.src='btn0.gif'" /></a>と記します。（xhtmlの時は必ず全て小文字にして下さい。大文字を使うとエラーとなります。）
これを実行するとこのようになります。画像にマウスオーバーして下さい。
スタイルシートを使う
以下のスタイルシートを記述します。ボタンの画像は使いません。
ul {
margin:0;
padding:0;
}
li {
list-style-type : none;
}
.menu a {
display:block;
width:120px;
height:100%;
border:solid 4px;
border-color:#dcdcdc #000066 #000066 #dcdcdc;
text-align:center;
text-decoration:none;
font-family : "MS UI Gothic";
font-size:22px;
font-weight:600;
background:#0000cd;
color:#ffffff;
padding:4px;
}
.menu a:hover {
padding:6px 2px 2px 6px;
border-color:#dcdcdc #000000 #000000 #dcdcdc;
background:#191970;
}
以下のHTMLを記述します。
<ul>
<li class="menu"><a href="entry1.html">TOP</a></li>
</ul>
次のようになります。