リモートロールオーバー、つまり、離れた部分の画像をロールオーバーで変化させる動作は、JavaScript を使わずに CSS だけででも可能。今は無くなってるっぽいんだけど、一時、adaptive path でも使われていてたやつを参考に、サンプルを作ってみた。
サンプルの (X)HTML コードは下記の通り。
<div id="rollover">
<ul>
<li id="food"><a href="#"><em>焼き肉</em></a></li>
<li id="sneaker"><a href="#"><em>オニツカタイガー ファブレ74/0123</em></a></li>
<li id="beer"><a href="#"><em>仕事の後のビール</em></a></li>
<li id="coffee"><a href="#"><em>缶コーヒー</em></a></li>
<li id="cat"><a href="#"><em>寒がりなネコ</em></a></li>
</ul>
</div>簡単に解説すると、li 要素を横に並べ、a 要素をブロック化させて背景画像を指定し、em 要素のテキストを position: absolute; で無理矢理移動させている（はしょりすぎ）。一応、コメントも付けてるんで、実際にサンプルのソースを見て頂ければ大体分かると思う。とりあえず id の命名がどうなのかと思われるかも知れませんが、そこはぜひスルーの方向で。
Comments
いいですねこういうの見ると何かに使ってみたくなります。
実際ウチのリニュだってことの発端は
http://www.lucky-bag.com/archives/2005/07/image_scale_css.html
↑このへんのエントリだったりするわけなので☆
かなり強引な技ですが :-D
まぁ、やろうと思えばこういう事も出来ますよって感じですね。
>>このへんのエントリだったりするわけなので
お、そうなんですか。実は、自分でエントリしておきながら、そう言えばまだ em 指定を活用していないってことに気付きました ;-P