マウスオーバー処理

HTML CSS

画像にマウスを乗せると、マウスオーバー用の画像に切り替わり、クリックするとアクティブ用の画像に切り替わるように設定してみましょう(。・ω・。)ﾉ

まずはデフォルト用、マウスオーバー用、アクティブ用の画像を用意し、加工します。
自分はこんな感じに加工しました。
黄色がデフォルト用、オレンジ色がマウスオーバー用、赤色がアクティブ用です。

HTMLファイルのほうは、下記の通りに入力します。


<!DOCTYPE html>
<html lang="ja">
<head>
　　　　<meta charset="UTF-8">
　　　　<link rel="stylesheet" type="text/css" href="style.css">
　　　　<title>マウスオーバー処理</title>
</head>
<body>
<div id="menu">
　　　　<a href="#">リンク1</a>
　　　　<a href="#">リンク2</a>
　　　　<a href="#">リンク3</a>
　　　　<a href="#">リンク4</a>
　　　　<a href="#">リンク5</a>
</div>
</body>
</html>
CSSファイルのほうは、下記の通りに入力します。

@charset "UTF-8";

#menu a{
　　　　display:block;
　　　　color:#333333;
　　　　font-size:12px;
　　　　text-align:left;
　　　　background:url("menu.gif") top left no-repeat;
　　　　padding:9px 0px 0px 20px;
　　　　width:128px;
　　　　height:24px;
}
#menu a:hover{
　　　　background-position:0 -33px;
}
#menu a:active{
　　　　background-position:0 -66px;
}

これで画像にマウスを乗せると、マウスオーバー用の画像に切り替わり、クリックするとアクティブ用の画像に切り替わります！

可視エリアを設定することによって、画像一つでデフォルト用、マウスオーバー用、アクティブ用の画像を表示させることが出来ます。
JavaScriptでやるよりも、上記のように設定するほうが軽いし、ファイル数も減るので楽です。