CSSでポップアップネタ・改正版
以前に書いた「CSSでポップアップネタ」という記事のサンプルの件。SafariやmacIEでは表示が変なんです、とLe Archeの冥さんからこちらの記事で教えて頂いた。
冥さんが撮ってくださったキャプチャによるとこんな感じ。
背景色を指定したボックスのみのパターンはOKみたい。ただ、背景を画像にした場合、Safariでは位置はあってるけど、テキストと背景画像が出てこない、テキストがズレている。macIEでは位置が変ってな感じ。あ。今Operaで見たらこっちも変やった(汗)ちょうど今日macをゲットしたのでさっそく検証してみる。
つーことでもう一度サンプルを新たに作ってみた
>>RedlineMagazine::CSSでポップアップ・改正版サンプルはこちら
検証したブラウザはIE6、IE7(Standalone版)、Firefox、Netscape7、8、Opera、Safariです。(Netscape7では一部使えないネタあり)
とりあえず前回と同じパターンのサンプル3つを作りました。
パターン1:背景色とテキストバージョン
.popup01 a{position:relative;}
.popup01 a span{
position:absolute;
top:-62px;
left:0px;
width:200px;
padding:5px;
visibility:hidden;
background:#f5f5f5;
border:2px solid #999;
color:#333;
}
.popup01 a:hover,
.popup01 a:hover span{visibility:visible;}こちらは元ネタのCSS examples - centred pageさんと同じパターン。Netscape7ではポップアップが表示されない。Netscape8ならOKでした。
パターン２:背景画像とテキストバージョン
.popup02 a{position:relative;}
.popup02 a span{
position:absolute;
top:-100px;
left:0px;
width:192px;
height:99px;
padding:5px;
visibility:hidden;
background:url(xxx.gif) no-repeat;
color:#333;
}
.popup02 a:hover,
.popup02 a:hover span{visibility:visible;}前回指定したz-indexを消したら(なぜ指定してたのかもよく覚えてない)うまくいった。あとは画像幅とpaddingの値が合ってなかったので修正。こちらのパターンは検証したブラウザ全部でうまくいった。
パターン３:背景画像とimg画像バージョン
.popup03 a{
position:relative;
display:block;
}
.popup03 a span{
position:absolute;
top:-87px;
left:0px;
width:192px;
height:99px;
padding:5px;
visibility:hidden;
background:url(http://redline.hippy.jp/images/070119_01.gif) no-repeat;
color:#333;
}
.popup03 a:hover,.popup03 a:hover span{visibility:visible;} こちらはaタグにdisplay:blockを指定する事で解決。前回ハックとか使ってたけど、結局私の頭がボケてただけみたい。ブックマークしてくださった皆さんすいません(汗)
その他気づいた事(Opera)
Operaではspanで括ってvisibility:hidden;にしてある部分の上をマウスが通過する時にaタグのhover範囲として認識するらしい。他ブラウザはaタグの範囲のみ感知。
あ。ちなみに上でOperaと書いているのはwinのOperaです。なにぶん先ほどmacが届いたところなので、macにはSafariしか入っておりませぬ･･･。
元ネタはこちら CSS examples - centred page
<< 検索フォーム続編：Safari だと酷すぎる | Thanks! CSS Mania. >>
トラックバック
このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/134
コメント (14)
エントリありがとうございます。
MacIEで見ても全然問題が無かったです（あの妙な高さは一体なんだったのでしょう）。
これでゆっくり眠れますｗ
投稿者: 冥 | 2007年04月09日 09:41
>冥さん、こんにちわー。
あーほんとですかー。解決してよかったです。
機会があれば是非どっかで使ってくださいませ(w
あの変な高さは私の頭のボケ加減だと思います。
ほんと･･･お手数おかけしました(汗
投稿者: Red | 2007年04月09日 11:53
Operaで隠しているところにポイントしても表示されるのはまあ良いとして、ページをスクロールすると変なところに表示されるのは何とか回避する方法はないですかね。
投稿者: いっつ | 2007年11月02日 22:49
>いっつさん
コメントありがとうございます。
今Operaで確認してみたんですが、変なところっていうのはスクロールしたらポップアップの一部欠けたりするってやつですか?(そうなる事、今知りました。すみません)実は実務でこれ使ってるサイトもあるんですが、そのサイトではスクロールしても挙動が変になったりすることはなかったんですが、何だろう…。何か特定のタイミングでそういう現象が起こるのかも。回避方法見つかったらまたブログでご報告しますー。今の所分からず…です。すみません＞＜
投稿者: Red | 2007年11月03日 11:50
返信どうもです。そうです、表示が欠けるヤツです。
この例を参考に実装したら、利用者からOperaで動作がおかしいとの報告をもらって、私も表示がおかしくなることを確認たのです。うまくいく場合もあるようですので、何かわかりましたらお願いします。
ほかの情報も探してみたのですが、ここ以外、思った動作をさせるサンプルがなかったもので。
投稿者: いっつ | 2007年11月04日 00:40
>いっつさん
いろいろ試してみたんですが、なかなかうまくいかなくて、似たような動作をするjsライブラリを探してみました。
jQuery plugin: Tooltip
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
サンプル
http://jquery.bassistance.de/tooltip/
あと、こんなのもありました。
Bubble Tooltips
http://web-graphics.com/mtarchive/001717.php
サンプルページ
http://web-graphics.com/mtarchive/BubbleTooltips.html
リンク用っぽいのでリンク先も表示されてしまうんですが、表示したい内容をtitle属性に記述するだけなのでソースもキレイかと思います。(ただリンク先の表示が必要ない場合は使いづらい…ですかね)
javascriptが無効の場合はアレなんですが、一応上記のサンプルページで試した感じではOperaでスクロールしても大丈夫そうでした。
なんか…お手数おかけしてすみません。。
投稿者: Red | 2007年11月04日 14:59
>いっつさん(続き)
jsが使えないケースであれば、CSSソースのspanの部分にdisplay:block;を追加してみてください。
ちょっと怪しいんですが、少しはマシになるかも、です。
投稿者: Red | 2007年11月04日 15:18
いろいろ調べてもらって、ありがとうございます。
JavaScriptはすでに使用しているので、それについては問題ありません。
スクロールの場合も問題ないようですが、Operaだとリンクの途中で改行されて表示されますね。
リンクではなく、詳細表示としてポップアップを使用しているのですが、JavaScriptでリンクは無効にしています。
ポップアップの内容にはタグもきちんと反映されたので、かなり思ったものに近いです。
ただ、ポップアップのリンクは1行の中の一部分で複数あり、それそれ別の内容のポップアップにしたいのです。
サンプルを見ると、BRタグがないのにリンクとリンクの間で改行されているので、この改行を何とかうまく抑制できれば思ったものができそうです。
投稿者: いっつ | 2007年11月04日 22:25
>いっつさん
なるほど。結構複雑な感じなんですね。うまくいくといいんですが…。
お力になれず申し訳ないです＞＜
投稿者: Red | 2007年11月05日 09:42
もうちょっと情報を集めてみて、とてもシンプルな実装にすることにしました。
IE7,Firefox2,Opera9で思い通りにできるようになりました。
ソースは以下のようにしました。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-jp">
<style type="text/css">
.popup {
visibility: hidden;
width: 100px;
position: absolute;
padding: 3px;
border: 1px solid;
background-color: #d8f8f0;
}
</style>
<script type="text/javascript">
<!--
function show_popup(tobj,text)
{
var pobj = document.getElementById("popup");
pobj.innerHTML = text;
pobj.style.top = tobj.offsetTop + 20;
pobj.style.left = tobj.offsetLeft;
pobj.style.visibility = "visible";
return false;
}
function hide_popup()
{
var pobj = document.getElementById("popup");
pobj.style.visibility = "hidden";
return false;
}
//-->
</script>
<title>test</title>
</head>
<body>
<div id=popup class=popup></div>
ダミー<span onMouseOver="show_popup(this,'a<b>b</b>c<br>de')" onMouseOut="hide_popup()">ポップアップ</span><a href="hoge.html" onMouseOver="show_popup(this,'<b>テスト</b>です')" onMouseOut="hide_popup()">リンク</a>おわり
</body>
</html>
投稿者: いっつ | 2007年11月07日 23:35
先ほどの方法では、TABLEタグの中で使用する場合などに対応できないので、別の方法を考える必要がありました。対応策が見つかりましたら、また報告させてもらいます。
投稿者: いっつ | 2007年11月08日 08:45
>いっつさん
おおおおお。情報ありがとうございました！
テーブルの中で使うとかいろいろ条件があるとアレなのかもしれないけど、これはこれで素敵な方法ですねー。
ポップアップする部分のソースがやや複雑になるのと、js無効の時に問題なく使えるかを検討すればかなり実用的っすねー(n'∀')η
自分はjs脳がないのでCSSとjsをうまく組み合わせできる人って尊敬しちゃいますですー。
続報楽しみにお待ちしてます！
投稿者: Red | 2007年11月08日 10:29
なんとか、TABLEタグの中で使用した場合などでも正しい位置に表示できるようになりました。
どんどん親をたどっていって、すべてのずれを計算しようと思ったのですが、単にすべてのオブジェクトを加算するだけだと計算がおかしくなるので、計算対象外のオブジェクトを省く処理も入れました。
手元の動作させたいページではうまく動いていますが、ここで計算対象外としているタグ以外にも計算してはいけないタグがあると思うので、そういうタグを使用するページではさらに修正が必要だと思われます。
こちらでは、JavaScript必須という制限が可能なので、つかえない場合はpopupが表示されなくても問題ありません。JavaScriptが動作できない場合でもそれなりに表示するには、onloadイベントと組み合わせればできそうです。
今回の修正は、以下の関数の変更のみで対応できます。
function show_popup(tobj,text)
{
var x = 0;
var y = 0;
var lx = 0;
var ly = 0;
var tmp = tobj;
while(tmp.nodeName != 'BODY'){
if(tmp.nodeName != 'TR'
&& tmp.nodeName != 'TBODY'
&& tmp.nodeName != 'DD'
&& tmp.nodeName != 'DL'
&& tmp.nodeName != 'CENTER'
&& tmp.nodeName != 'FORM'){
var tx = tmp.offsetLeft;
var ty = tmp.offsetTop;
if(tx != lx || ty != ly){
x += tx;
y += ty;
lx = tx;
ly = ty;
}
}
tmp = tmp.parentNode;
}
var pobj = document.getElementById("popup");
pobj.innerHTML = text;
pobj.style.top = y + 20;
pobj.style.left = x;
pobj.style.visibility = "visible";
return false;
}
投稿者: いっつ | 2007年11月08日 23:44
>いっつさん
こんにちわー。
ふむふむ。除外するタグを決めて動作させるんですね。なるほろー。勉強になります。ひとまずこれでいっつさんのケースでは解決ってことですよね。よかったー（←何もしてない人）
しかしOperaのためにすごい遠回りになっちゃいましたね。ホントすみませんでした。
投稿者: Red | 2007年11月10日 14:12