画像ロールオーバーについて
-
0 名前： ひな ： 2006/03/06 23:23
- スタイルシートを利用して擬似的に画像のロールオーバーをさせたいです。
マウスオーバー時に画像に影を落とすような形で
ロールオーバーしようと思い、
方法として二通り考えたのですが、
１）hover時に画像にボーダーを表示させる
＜サンプル＞
a.foot:hover {
border-size : 2px;
border-color : #cccccc;
}
これだと、角が丸い画像には対応できませんでした。
２）hover時に画像の背景にあたる部分に色を付ける
＜サンプル＞
a:link {
padding : 2px;
}
a.foot:hover {
padding : 2px;
background-color : #cccccc;
}
こちらもうまくいきませんでした。
Aタグにスタイルを指定すると、上下のパディングが認識されなかったり
必要以上のサイズでパディング領域がとられてしまったりと、
ブラウザによってまったく挙動が異なり、思ったようなレイアウトになりません。
どなたかいい案をお持ちの方はいませんでしょうか。
よろしくお願いします。
-
1 名前： S ： 2006/03/06 23:23
- >>ブラウザによってまったく挙動が異なり、思ったようなレイアウトになりません。
それはたとえば下記の資料などにあるように、プロパティの解釈がブラウザによって違ったりするから。
http://cssbug.at.infoseek.co.jp/index.html
どうしてもというのであれば、ブラウザ判別による振り分けをするとかの手段もある。
まあ、そもそも「同一のレイアウト」をしようとするのがお門違いなんだけど。
閲覧者がユーザースタイルシートのimportant指定でプロパティを上書きしていればいくら製作者がCSSを提供しても無視されるしね。
http://members.jcom.home.ne.jp/pctips/www/faq/Mibae.html
http://members.jcom.home.ne.jp/jintrick/Personal/usrstyle.html
-
2 名前： ひな ： 2006/03/06 23:23
- 回答ありがとうございます。
私の書き方に問題があったかもしれません。
まったく同一のレイアウトを希望しているわけではなく、
スタイルシートで擬似的に画像のロールオーバー（背景色操作で
シャドウがつくようにみせる等）ができないかな？
と思い、投稿させていただきました。
ブラウザ判定も一つの手段ですね。
すこし試してみたいと思います。
-
3 名前： S ： 2006/03/06 23:23
- >>1の資料に示されているように、Windows版インターネットエクスプローラに限定してさえ、確認済みのもので
[2-175][2-662]アンカーを:hover状態にすると%値指定のマージンやパディングの量が変化する(6.0)
[3-57]アンカーを:hover状態にすると親ブロックの高さが変化する(5.5/6.0)
[3-59][3-60]アンカーを:hover状態にすると後続するフロートの一部が消える(6.0)
[3-178]アンカーを:hover状態にするとbody要素のサイズが縮む(6.0)
[3-604]アンカーを:hover状態にするとiframe要素のサイズが変化する(5.5/6.0)
[4-99]visibility:hidden;を指定した要素に:hoverが効かない(5.x/6.0)
があったりする（単に単語検索かけてひっかかったタイトルだけ抜き出したので他にもあるかも）。
まあ、それらをいちいち気にしていたのではきりがないが、「なぜうまくいかないか」の一つの答えにはなると思った次第。
参考）
http://members.jcom.home.ne.jp/pctips/www/cssmerit.html
あと、色の使い方には注意が必要。
http://lan.rgr.jp/essay/eye
http://lan.rgr.jp/essay/invisible
p.s.上記二つの親ディレクトリ。参考となるリソースが多いかと。
http://lan.rgr.jp/essay/
-
4 名前： 神崎 ： 2006/03/06 23:23
- <span style="padding:2px;"><a>マウスオーバー</a></span>
というのをしてみると、どうなります？
（うまく<span>のpaddingの部分にa:hoverのborderが引かれるといいんですが、、、）
ブラウザ依存は
<!--[if IE]>
<style>
.ie_only_style {}
</style>
<![endif]-->
などでブラウザを判断するしかないと思います。
角丸にするなら、画像を用意しないと行けないと思います。
http://www.tagindex.com/cgi-lib/q2bbs/patio.cgi?mode=view&no=480
