掲示板/総合質問板/過去ログ/一覧/ 一枚の画像のみで、hoverでオンマウスのとき変えるには？

0 名前：トム： 2005/06/27 20:32: Mdnという雑誌を読んでいたのですが、分からないところがありました。
マウスを乗せたとき、:hoverというセレクタを使って切り替えるそうです。

下のような画像があり、名前がnavi.gifです。マウスが乗ったとき、
一段目が二段目に変わるはずですが…
（なお、枠内の表示は左からホーム、ニュース、製品紹介となっています。
上下一緒です）。

┌───┬───┬───┬───┬───┐
├───┼───┼───┼───┼───┤
└───┴───┴───┴───┴───┘

CSSソースでは、以下のように指定されています。

ul#navigation{
width:707px;
height:42px;
background:url(navi.gif);
}
・・・
li#navhome a:hover{
background:url(navi.gif) 0px -42px;
}
li#navnews a:hover{
background:url(navi.gif) -141px -42px;
}
li#navprod a:hover{
background:url(navi.gif) -282px -42px;
}
・・・

本来の、htmlのタグとしては、スタイルシートをリンクさせる以外に、
どのようにすればよいのでしょうか？
普通に貼り付けるだけなら、二段分そのまま表示されてしまいますよね？
ググったりして答えを見つけようとしたのですが、開けなかったり
見つかりませんでした。よろしくお願いします。

1 名前：び： 2005/06/27 20:32: HTMLはこんな感じで良いと思います。

<ul id="navigation">
<li id="navhome"><a>home</a></li>
<li id="navnews"><a>news</a></li>
<li id="navprod"><a>product</a></li>
</ul>

CSSの指定ってそれだけで足りるかな？

ul#navigation li {
width: 141px;
height: 42px;
}
これも必要な気がする。
アンカーテキストが邪魔な場合はさらに小細工が必要だ。

それから、以下の記事が参考になると思います。

XHTML1.1 + CSS で Preload いらずロールオーバー方法
・http://www.mushline.com/junky/2003/111523.shtml

2 名前：トム： 2005/06/27 20:32: びさん、ありがとうございます。
私の能力不足で、なかなか思うようにいかないのですが…、
ちょっと自分でいろいろやってみます。
上手くいかない場合は、またご助言いただけると助かります。
ともかく、ありがとうございました。