リモートロールオーバーを CSS だけでやってみる

リモートロールオーバー、つまり、離れた部分の画像をロールオーバーで変化させる動作は、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 の命名がどうなのかと思われるかも知れませんが、そこはぜひスルーの方向で。

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: https://www.lucky-bag.com/mt/mt-tb.cgi/103

パソコンのページ - JavaScriptを使用しないロールオーバー (2007年8月 9日 08:27)

CSSとIMGタグだけのロールオーバーの手法です JavaScriptが使えないブラウザもありますし、タグも少なくなりますので、この手法を使うといいので... 続きを読む

Comments

すずき said:

いいですねこういうの見ると何かに使ってみたくなります。

実際ウチのリニュだってことの発端は
http://www.lucky-bag.com/archives/2005/07/image_scale_css.html
↑このへんのエントリだったりするわけなので☆

e-luck said:

かなり強引な技ですが :-D
まぁ、やろうと思えばこういう事も出来ますよって感じですね。

>>このへんのエントリだったりするわけなので
お、そうなんですか。実は、自分でエントリしておきながら、そう言えばまだ em 指定を活用していないってことに気付きました ;-P