リンクメニューで、マウスが重なると画像が入れ替わる物を良く目にします。
これはjavascriptによって組まれる事が多いのですが、
実はcssだけで実現できます。
まずcssでリンクメニューのクラスを決めます。
次にそのクラスのリンク・ホバー・ビジテッドの色と画像を指定します。
そして実際のメニューにクラスを指定するだけです。
リストで作る場合とテーブルで作る事ができます。以下に例を示します
下はテーブルで作っています
.[ここがメニューのクラス名] {
width:[メニューのサイズ]px;
float:[left,rightのどちらか];
text-align:[left,center,rightのどれか];
}
td.[テーブルのクラス名] a {
margin-[top,right,left,bottomが指定できる]:[好きなサイズ]px;
padding-[top,right,left,bottomが指定できる]:[好きなサイズ]px;
width:[メニューのサイズ]px;
display:block;
background-image: url('[表示させる画像の場所と名前]');
background-repeat: no-repeat;
background-position: left top;
}
td.[テーブルのクラス名] a:link{
margin-[top,right,left,bottomが指定できる]:[好きなサイズ]px;
padding-[top,right,left,bottomが指定できる]:[好きなサイズ]px;
width:[メニューのサイズ]px;
display:block;
background-image: url('[表示させる画像の場所と名前]');
background-repeat: no-repeat;
background-position: left top;
}
td.[テーブルのクラス名] a:hover{
margin-[top,right,left,bottomが指定できる]:[好きなサイズ]px;
padding-[top,right,left,bottomが指定できる]:[好きなサイズ]px;
width:[メニューのサイズ]px;
display:block;
background-image: url('[入れ替えて表示させる画像の場所と名前]');
background-repeat: no-repeat;
background-position: left top;
}
td.[テーブルのクラス名] a:visited{
margin-[top,right,left,bottomが指定できる]:[好きなサイズ]px;
padding-[top,right,left,bottomが指定できる]:[好きなサイズ]px;
width:[メニューのサイズ]px;
display:block;
background-image: url('[表示させる画像の場所と名前]');
background-repeat: no-repeat;
background-position: left top;
}
このようなcssを作成したらHTML内のメニューにクラスを指定します。
<table class="[cssで指定したクラス名]"><tr>
<td class="[cssで指定したクラス名]">
<a href="[リンク先]">
[リンクメニューに表示する文字]</a></td>
○ここのメニュー項目はいくらでも増やせます
</tr></table>
以下はリストで作る場合の例です。
.[ulのクラス名]{
[ここでulのスタイルを指定]
}
.[ulのクラス名] li{
[ここでliのスタイルを指定]
}
.[ulのクラス名] li a{
display:block;
}
.[ulのクラス名] li a:link{
[ここでリンクのスタイルを指定]
}
.[ulのクラス名] li a:hover{
[ここでホバーのスタイルを指定]
}
.[ulのクラス名] li a:visited{
[ここでビジテッドのスタイルを指定]
}
指定方法は上記と変わりません。
