それなりブログ

とあるWebエンジニアのそれなりのブログ、JavaScript/Node.js/Python/PHP/ゲーム作成 など

要素の相対位置で吹き出しを表示したかったが

javascriptで吹き出しを表示するときの話です。

ココとかコレとか
大体マウスオーバーの座標を起点にして吹き出しが表示されるようです。

もっと単純にa要素とかimg要素とかからの相対位置で表示させればいいじゃん

と調べてみると

なるほど
要素の絶対位置を直接取得することは出来ないので(各要素の幅や高さを加算してゆく方法もあるが大変な上に確実じゃない)、相対位置もまた取ることができないんスね。

吹き出しを表示させたい要素をブロック要素で囲んで、ブロック要素の相対座標を使って表示する方法もやってみましたが、面倒だし、汎用性に欠けるし、あんまり面白くない。
しかしながら、マウスオーバーされた瞬間に吹き出しを表示すると、吹き出しの口があまり自然じゃない位置に来てしまうという問題がある。

うーん、仕方ないので

  • マウスオーバーから一瞬間を置いて吹き出しを表示する。
  • 吹き出し表示中にマウスを動かすと、吹き出しがマウスを追跡する。

この辺を複合させて誤魔化してみるか。

仕事だと、普通なら簡単にあきらめるところを調べざるを得ないので、勉強になりますね、と。

4 Responses to “要素の相対位置で吹き出しを表示したかったが”

  • komagata より:

    > 要素の絶対位置を直接取得することは出来ないので
    offsetTopやoffsetLeftは?

  • kjirou より:

    要素がネストしまくってるので加算しないといけないんす
    クロスブラウザ対応が面倒そうで工数も無いので、とりあえず保留にしています。

  • komagata より:

    > 要素がネストしまくってるので加算しないといけないんす
    え、おれ出来たよ。
    独自のプルダウンメニューを対象の要素の上下左右どの方向にでも出せるっつーライブラリを書いたときに。
    TABLEの中にあると値が変になったけど。

  • kjirou より:

    そういう強い口調でいいますかぁ?
    嘘です、すみません。
    暇人なので今から試して見ます。


コメントを残す

メールアドレスが公開されることはありません。

Categories

Archives