WEBサイトの製作、管理、とかの日記ブログです。

<<   2018年09月   >>
SunMonTueWedThuFriSat
      1
2345678
9101112131415
16171819202122
23242526272829
30      
新着記事
カテゴリ
過去ログ
コメント
検索
マウスオーバーでポップアップ広告
不特定のサイト上で、マウスオーバーで広告の入った<iframe>をポップアップしようとしたんだけど結構めんどかった。

テキストにマウスカーソルが重なると広告の<iframe>をポップアップで表示するので、まず座標系がめんどいのだが、
テキストは<a>で作ってmouseenterで position:absolute の<iframe>をポップアップしてmouseleaveで閉じる。
マウスカーソルの無いタッチパネルも考慮してonclickでオン・オフできるようにした。
座標は最初、イベント対象の<a>を display:inline-block;position:relative にして、<a>からの相対座標でやった。
display:inline-block にするのは、<a>の大きさを取得して隣接位置にポップアップさせるため。

まず、ポップアップ座標に重なる要素がある場合に、重なるものによっては下に表示されちゃったので、z-indexつけた。


この状態で一回公開したのだが、
対象が不特定のサイト上で、テキストの親要素がどうなってるのかわからない状況。
一発目の確認に使用したサイトで、テキストが右サイドバーに表示されて、サイドバーが overflow:hidden になってた。
overflow:hidden だとはみ出してポップアップできないよね・・・

それで苦労したのだが、
まず、テキストのoffset座標をbodyから全部計算してbodyの子要素でabsoluteして解決しようとした。
そしたら、ポップアップ領域は手木ストの子要素じゃないからmouseenter/mouseleaveができないよね・・・
ポップアップをfixedにしてマウス座標にポップアップをするのも考えたが、mouseenter/mouseleaveほど確実に行かないよね・・・

mouseenter/mouseleaveによるイベント駆動が可能な方法を考えたが、
overflow:hiddenのサイドバーであっても、ポップアップするabsolute要素のoffsetParent要素以上の位置にoverflow:hiddenが設定されてなければはみ出し可能だった。
当初イベント対象のテキストを position:relative にしてテキストの高さ分だけ座標を調整していたが、
テキストを position:relativeにせずに子要素をabsoluteした場合、テキストのoffsetParentの表示可能範囲になら表示可能。
つまり、サイドバー上に設置が想定され、サイドバーにoverflow:hiddenが設定されている可能性は結構考えられるのだが、
サイドバーがfloatで実装されている場合はoffsetParentにはならないので、サイドバーより上の要素基本的に<body>の表示可能範囲にポップアップが可能。


サイドバー自体がfloatではなくabsoluteかfixedでレイアウトされていて、かつoverflow:hiddenになっている場合は隠れちゃうことが想定されるのだが、
それを解決する方法は思いつかないんで、そこは諦めることにした。

この記事へのコメント
名前:
URL
コメント:
この記事へのトラックバック :
whblog 1.7