個別記事

前後の記事

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

この記事が属するカテゴリー
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 の命名がどうなのかと思われるかも知れませんが、そこはぜひスルーの方向で。

どうやら、マック IE で背景画像がうまくロールオーバーしていなかったみたいなんで、background 関連の指定を修正しました。

2005-08-25T20:01:40+09:00 | コメント (2) | トラックバック (1) |はてなブックマーク

関連性が高いエントリー 5 件

トラックバック

このエントリーのトラックバックURL:
http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/296

このリストは、次のエントリーを参照しています: リモートロールオーバーを CSS だけでやってみる:

パソコンのページ さんからのトラックバック
JavaScriptを使用しないロールオーバー
CSSとIMGタグだけのロールオーバーの手法です JavaScriptが使えないブラウザもありますし、タグも少なくなりますので、この手法を使うといいので... [続きを読む]
2007年08月09日 08:27

コメント

すずき さんからのコメント

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

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

2005年08月25日 23:00
e-luck さんからのコメント [TypeKey Profile Page]

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

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

2005年08月26日 12:43

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を &lt; 、> を &gt; とそれぞれ置き換えてください。




保存しますか?


(V) (P)