お世話になっております。fc2でblogを運営しているものです。

解決済

質問者：s_bird
質問日時：2010/10/04 00:09
回答数：2件

お世話になっております。fc2でblogを運営しているものです。
テンプレートをいじってロールオーバーボタンを作ってみたいのですがどうしてもできません。
以下ソースになります。

HTML：

<div id="navi">
<div class="navi01">
<a href="○○○○○○"><img src="○○○○○○" alt="blog　ボタン　トップ" border="0" width="120" height="30" /></a>
</div>
<div class="navi02">
<a href="○○○○○○"><img src="○○○○○○" alt="blog　ボタン　イラスト" border="0" width="120" height="30" /></a>
</div>
<div class="navi03">
<a href="○○○○○○"><img src="○○○○○○" alt="blog　ボタン　マンガ" border="0" width="120" height="30" /></a>
</div>
<div class="navi04">
<a href="○○○○○○"><img src="○○○○○○" alt="blog　ボタン　その他" border="0" width="120" height="30" /></a>
</div>
<div class="navi05">
<a href="○○○○○○"><img src="○○○○○○" alt="blog　ボタン　掲示板" border="0" width="120" height="30" /></a>
</div>
<div class="navi06">
<a href="○○○○○○"><img src="○○○○○○" alt="blog　ボタン　メール" border="0" width="120" height="30" /></a>
</div>
</div>


CSS：
#navi {
margin : 0 auto;
margin-top : 5px;
width : 800px;
}
.navi01 {
float : left;
margin-left: 15px;
}
.navi02 {
float : left;
margin-left: 10px;
}
.navi03 {
float : left;
margin-left: 10px;
}
.navi04 {
float : left;
margin-left: 10px;
}
.navi05 {
float : left;
margin-left: 10px;
}
.navi06 {
float : left;
margin-left: 10px;
}

です。navi01～navi06までがボタン。それをnaviでグループ化しているイメージです。
○○○○○○には当然ソースが書いてあります。各ボタンのロールオーバー用ボタンは用意してあります。
どのようなHTML、CSSを書けばよろしいでしょうか。よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： zeff#1
回答日時：2010/10/04 17:31

そういうのは、

リストにして、
aをblockレベル表示にし、
hover時にaのbackground-imageを入れ替えることで実現する、
というのがメジャーだと思います。

<style type="text/css">

</style>
</head>
<body>

<ul id="navi">
<li class="navi01"><a href="http://www.google.co.jp/">Google</a></li>
<li class="navi02"><a href="http://www.yahoo.co.jp/">Yahoo!!</a></li>
<li class="navi03"><a href="http://www.msn.co.jp/">MSN</a></li>
</ul>

</body>
</html>

この例はhover時にbackground-colorを替えていますが、
url()の中身を替えるようにすれば画像で行なえます。