オンマウスやクリックで画像を切り替える（ロールオーバー）、ずらす - HTML/CSS

画像の上にポインタを乗っける（マウスオーバー、オンマウス）とその画像が切り替わり、さらにクリックするとまた画像が変わる。
そんなインタラクティブな動きを、JavaScirptを使わずHTMLとスタイルシートCSSだけで実現することが出来ます。
ボタンみたいで、文字やただの画像でのリンクとは一味違った感じが出せます。
今回紹介するCSSは、横に並んだトップコンテンツなどを作るのに適しています。

• HOME
• HQ
• BBS
• CHAT

まずその仕組みを簡単に説明します。

画像を切り替えるには、最低でも2枚の画像が必要です。
今回紹介する方法では、通常時、マウスオーバー時、クリック時の3つの画像が必要になります。

では、3枚の画像をそれぞれアップロードすればいいのでしょうか。
しかしその方法では、上のように4つ並べると、3×4=12枚もの画像を用意してアップロードしなくてはいけません。
それは面倒なことだし、3枚の画像がそれぞれ違う場所にあると、マウスオーバー時やクリック時の処理に時間がかかってしまいます。

画像の枚数を節約し、さらに処理を速くするには･･･
画像を1枚にし、それをずらせばいいのです！

今回はCSSを使って画像をずらし、あたかも画像が切り替わってるように見せる技術の紹介です。
初めての人にはとってはとても難しいかもしれません。でも諦めずに頑張れば必ずできます。コードの書き換えが一番重要だと思います。


■準備段階1 画像を用意する



同じサイズの画像が、3つ縦に並んだ状態の画像を作ってください。
※「ボタン工房」を使えば簡単に作る事が出来ます。
「ボタン工房」 - WEBページ製作者向けのボタン作成ツール

この時、「100px×20px」というような、一つの画像の縦サイズと横サイズ把握しておいてください。

上の画像は、「100px×20px」の画像が3つ縦に並んでいて、合計のサイズは「100px×60px」です。
この部分のサイズが「100px×20px」
（pxはピクセルの意味で、サイズの単位です。 参考: ピクセル - Wikipedia / 長さ(length)の単位）

ペイントでのサイズの求め方

左メニューの「選択」をクリックし、求めたい部分をドラッグで選択してください。すると右下にその部分のサイズ（単位:px）が表示されます。



■準備段階2 画像をアップロードする

無料ホームページスペースなどに画像をアップロードします。
FC2の無料ホームページとFTP転送～サービス登録～
FC2の無料ホームページとFTP転送～FFFTPの設定～

アップロードした画像へのURLを把握しておいてください。
（例）http://andornot.nobody.jp/picture/exbotan1.png





いよいよHTMLとCSSの記述方法です。




上の5枚の画像と、以下の情報を例にして紹介します。
【一つの画像の縦サイズ（px）】20
【一つの画像の横サイズ（px）】100
【画像のURL】
http://andornot.nobody.jp/picture/exbotan1.png
http://andornot.nobody.jp/picture/exbotan2.png
http://andornot.nobody.jp/picture/exbotan3.png
http://andornot.nobody.jp/picture/exbotan4.png
http://andornot.nobody.jp/picture/exbotan5.png


＜CSSのソース＞

---

ul#navigation {
    position: relative;
    width: 【一つの画像の横サイズ×横に並べたい画像の数 (例)100×5=500】-px;
    margin: 0;
    height: 【一つの画像の縦サイズ×(例)20】px;
    list-style: none;
    overflow: hidden;
}

ul#navigation li a {
    height: 【一つの画像の縦サイズ(例)20】px;
    position: absolute;
    overflow: hidden;
    padding: 【一つの画像の縦サイズ(例)20】px 0 0 0;
    text-indent: -100em;
    text-decoration: none;
    top: 0;
    width: 【一つの画像の横サイズ(例)100）】px;
}
html>body ul#navigation li a{
    height: 0;
}


li#botan1 a{
    background: transparent url('【画像1へのURL(例)http://andornot.nobody.jp/picture/exbotan1.png】') no-repeat 0 0;
    left: 【一つの画像の横サイズ×0(例)0】px;
    }
li#botan2 a{
    background: transparent url('【画像2へのURL(例)http://andornot.nobody.jp/picture/exbotan2.png】') no-repeat 0 0;
    left: 【一つの画像の横サイズ×1(例)100】px;
    }
li#botan3 a{
    background: transparent url('【画像3へのURL(例)http://andornot.nobody.jp/picture/exbotan3.png】') no-repeat 0 0;
    left: 【一つの画像の横サイズ×2（例)200】px;
    }
li#botan4 a{
    background: transparent url('【画像4へのURL(例)http://andornot.nobody.jp/picture/exbotan4.png】') no-repeat 0 0;
    left: 【一つの画像の横サイズ×3(例)300】px;
    }
li#botan5 a{
    background: transparent url('【画像5へのURL(例)http://andornot.nobody.jp/picture/exbotan5.png】') no-repeat 0 0;
    left: 【一つの画像の横サイズ×4(例)400】px;
    }

li#botan1 a:hover,
li#botan2 a:hover,
li#botan3 a:hover,
li#botan4 a:hover,
li#botan5 a:hover{
    background-position: 0px -【一つの画像の縦サイズ(例)20】px;
    }
li#botan1 a:active,
li#botan2 a:active,
li#botan3 a:active,
li#botan4 a:active,
li#botan5 a:active{
    background-position: 0px -【一つの画像の縦サイズ×2(例)40】px;
    }

---

＜HTMLのソース＞

---

<ul id="navigation">
<li id="botan1"><a href="リンク先のURL" title="【1】" accesskey="0">【1】</a></li>

<li id="botan2"><a href="リンク先のURL" title="【2】" accesskey="1">【2】</a></li>

<li id="botan3"><a href="リンク先のURL" title="【3】" accesskey="2">【3】</a></li>

<li id="botan4"><a href="リンク先のURL" title="【4】" accesskey="3">【4】</a></li>

<li id="botan5"><a href="リンク先のURL" title="【5】" accesskey="4">【5】</a></li>

</ul>

---

以上です。
青色の部分はそれぞれのボタンのサイズやURLに合わせて、好きなように書き換えてください。【】も消してね。
赤色の部分は書き換えても書き換えなくてもOKです。
ただし、例えば「li#botan1 a:hover,」の部分を「li#home a:hover,」と書き換えたならば、「li#botan1 a:active, 」や「<li id="botan1">」のbotan1も同様に、homeに書き換えてください。

CSSとHTMLのソースを書き足したり消したりすれば、コンテンツの数を変えられます。
この色が付け足した部分です。

＜CSSのソース＞
（中略）
    }
li#botan5 a{
    background: transparent url('【画像5へのURL(例)http://andornot.nobody.jp/picture/exbotan5.png】') no-repeat 0 0;
    left: 【一つの画像の横サイズ×4(例)400】px;
    }
li#botan6 a{
    background: transparent url('【画像6へのURL】') no-repeat 0 0;
    left: 【一つの画像の横サイズ×5(例)500】px;
    }
（中略）
li#botan4 a:hover,
li#botan5 a:hover,
li#botan6 a:hover{
    background-position: 0px -【一つの画像の縦サイズ(例)20】px;
    }
（中略）
li#botan4 a:active,
li#botan5 a:active,
li#botan5 a:active{
    background-position: 0px -【一つの画像の縦サイズ×2(例)40】px;
    }


＜HTMLのソース＞
（中略）
<li id="botan4"><a href="リンク先のURL" title="4" accesskey="3">4</a></li>

<li id="botan5"><a href="リンク先のURL" title="5" accesskey="4">5</a></li>

<li id="botan6"><a href="リンク先のURL" title="6" accesskey="4">6</a></li>
（中略）




完成例

完成したHTMLソース
完成したCSSソース

●テンプレートへの挿入方法
後で書きますっ