ホームページ作成備忘録

ホームページを作成に関する備忘録

cssだけでロールオーバー効果を作る

Xhtmlファイルについて

<head>
<style type="text/css">
p.btn a:hover{
	position:relative;
	top:1px;
	left:1px;
}
</style>
</head>
<html>
<body>
<p class="btn">
  <a href="" ><img src="image/button1.png" alt="" height="30" 
  width="100"/></a>
</body>
</html>

スタイルシートについて

スタイルシートでは、リンクのアンカー画像にマウスカーソルが行くと、hoverの部分のスタイルが適応されます。これは、右下に1pxだけ画像の位置をずらすことになります。これにより画像が動くように見えます。この値を大きくすれば画像の動きも大きくなります。

1pxだけの動きの場合

ボタンの上にマウスカーソルを持って行ってみて下さい。なお、リンクはしていません。

5pxの場合

ボタンの上にマウスカーソルを持って行ってみて下さい。なお、リンクはしていません。ちょっと動きが大きすぎるかもしれません。1pxぐらいがおとなしくていいかも？

なお、これらのボタン画像は「ボタン工房」というフリーソフトを使って作りました。なかなか使いよいです。下のバナーをクリックしてぜひ使いましょう。

JavaScriptが有効ならば別ウインドウ（タグ）で開きます。