ロールオーバーで変化をするボタンを作る方法

ロールオーバーのボタンを作るのに、無数の作り方があると思いますが、
ここでは再度確認を含めて５つのパターンを掲載してみます。
ロールオーバーはCSSで表現、またはJavaScriptで切替を行ってみます。

■　タイプ１　CSSで作り、画像を2枚を差し替えて表現をする方法

• テキスト

これが最もベーシックな作り方でしょうか。
aタグを「display: block;」でブロック要素にしてリンクの範囲を広げます。
画像は1枚目を「a」で指定、2枚目を「a:hover」で指定することで切替を行っています。

－CSS－

#nav li {
list-style-type: none;
}
#nav li a {
display: block;
height: 19px;
width: 125px;
text-decoration: none;
font-size: 12px;
color: #333;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
text-align: center;
padding-top: 8px;
background-image: url(img/button01.jpg); ←画像1枚目
background-repeat: no-repeat;
background-position: left top;
}
#nav li a:hover {
background-image: url(img/button02.jpg);　←画像2枚目
background-repeat: no-repeat;
background-position: left top;
}

－HTML－

<ul id="nav">
<li><a href="#">テキスト</a></li>
</ul>

＞ Download - タイプ1 sample

■　タイプ２　CSSで作り、画像を1枚を切り替えて表現をする方法

• テキスト

タイプ１の発展型
2枚の画像を上下、または左右につなげて作成し、
一枚の画像として扱い、画像をbackgroundで指定します。
今回は上下の画像で作成し、
「background-position」でleft top(左上)で通常時の画像位置を指定し、
hover時にleft bottom(左下)と指定をすることで画像が挿し変わっているように見せています。

－CSS－

#nav li {
list-style-type: none;
}
#nav li a {
display: block;
height: 19px;
width: 125px;
text-decoration: none;
font-size: 12px;
color: #333;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
text-align: center;
padding-top: 8px;
background-image: url(img/button03.jpg);
background-repeat: no-repeat;
background-position: left top;　←画像の配置を左上
}
#nav li a:hover {
background-image: url(img/button03.jpg);
background-repeat: no-repeat;
background-position: left bottom;　←画像の配置を左下
}

－HTML－

<ul id="nav">
<li><a href="#">テキスト</a></li>
</ul>

＞ Download - タイプ2 sample

■　タイプ３　CSSで作り、画像を2枚を差し替えてテキストを隠して表現する方法

• テキスト

このタイプは一見画像のみにすることで視覚的に綺麗に見せてます。
ですが、検索エンジンなどは<a>タグの中身がないとそれが何なのか理解できず
構造上良くない為、テキストをHTMLで入れています。
ですが、テキストが表示されては視覚上もちろん困るので、
「text-indent」(テキストの位置)を-9999pxと指定することで
位置を飛ばして見えてないようにしてます。
（※この-9999、悪用してスパムとしても機能するので、禁物という意見もちらほらあり)

－CSS－

#nav li {
list-style-type: none;
}
#nav li a {
display: block;
height: 19px;
width: 125px;
text-decoration: none;
font-size: 12px;
color: #333;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
text-align: center;
padding-top: 8px;
background-image: url(img/button04.jpg);　←画像一枚目
background-repeat: no-repeat;
background-position: left top;
text-indent: -9999px;　←テキストをｰ9999とし、枠外に隠す
}
#nav li a:hover {
background-image: url(img/button05.jpg);　←画像二枚目
background-repeat: no-repeat;
background-position: left top;
}

－HTML－

<ul id="nav">
<li><a href="#">テキスト</a></li>
</ul>

＞ Download - タイプ3 sample

■　タイプ４　CSSで作り、画像を2枚使い、マウスオーバーした時、上画像をOFFにして表現をする方法

• テキスト

これは個人的に最も気に入りました。
上記方法だと、IE6の場合、画像がちらつくバグがあり、IEユーザーも考慮に入れると
ちらつかない構造を考える必要があります。
IEの独自拡張でexpression()を使うと解消できるわけですが、
IE6のみ考慮して作るのもスマートに思えず。
そこで調べているとwebbibo様のページでいい解決方法が書かれていましたので、そのやり方を記載してみることにします。

－CSS－

#nav li {
list-style-type: none;
background-image: url(img/button02.jpg);　←li要素にマウスオーバー時の画像を指定
background-repeat: no-repeat;
background-position: left top;
}
#nav li a {
display: block;
height: 19px;
width: 125px;
text-decoration: none;
font-size: 12px;
color: #333;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
text-align: center;
padding-top: 8px;
background-image: url(img/button01.jpg);　←一枚目の画像
}
#nav li a:hover {
background-image: none;　←一枚目の画像を非表示
}

－HTML－

<ul id="nav">
<li><a href="#">テキスト</a></li>
</ul>

＞ Download - タイプ4 sample

■　タイプ５　CSSで作り、画像を2枚使いJavaScriptで表現する方法

• 

こちらはJavaScirptを使った解決方法。
いくつか同様のJavaScirptがあるわけですが、
ここでは「image rollover code」というjsライブラリを使ってみることにします。(ダウンロード)
最大のメリットは多数のロールオーバーを指定しなくてはいけない場合、簡単に設定ができること。
画像は二枚用意をし、一枚を○○.jpgとすると、ロールオーバー時の画像を○○_o.jpgとします。
画像名の後に「_o」を付け加えるだけで、切替の指定を行っています。
HTMLコードには、「class="imgover"」と指定する必要があります。
JavaScriptでonloadを利用している為、他のJavaScriptを使う場合バッティングする可能性が考えられます。その場合は、to-R様のサイトで紹介している方法を使うと解消することができます。

－CSS－

#nav li {
list-style-type: none;
}

－JavaScript－

<script src="js/rollover.js" type="text/javascript"></script> ←image rollover codeのJavaScriptを設置

－HTML－

<ul id="nav">
<li><a href="#"><img src="img/button06.jpg" alt="ボタン" border="0" class="imgover" /></a></li>　←image rollover code専用のクラスを指定
</ul>

＞ Download - タイプ5 sample