グーグルマップのような地図を作っています。

マウスホイールでポイントをスクロールすると、拡大縮小はできるようになりましたが、
拡大された画像に、ポイントをマウスオーバーすると、画面の中央もしくは、ポイントの近くで隠れないように、ツールチップで吹き出しがでてくるようにしたいです。
ツールチップはでてくるのですが、画面からはみ出してしまう状態です。
htmlとcssがやっとわかった程度ですが、jQueryのデザインツールを参考に、いろいろと試しています。
わかる方、宜しくお願いします。

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2013/03/11 20:15:03
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答0件)

回答はまだありません

  • id:Lhankor_Mhy
    このご質問は、
    ・jQueryプラグインでツールチップを表示するものを教えて
    ・画面からはみ出るツールチップを画面内に納める方法を教えて
    のどちらでしょうか。
  • id:fujinohana512
    コメントありがとうございます。
    「画面からはみ出るツールチップを画面内に納める方法を教えて」です。
    マウスで画面を移動しても、ポイント(マーカー?)の近くから、ツールチップがでてくるようにしたいです。

    ポイントは複数あり、ツールチップに表示されるコメントも全部違います。
    わかりにくい質問で、すみません。
    宜しくお願いします。
  • id:Lhankor_Mhy
    モノがないと話にならないのでとりあえず簡単なサンプルを書いてみましたが、「画面からはみ出る」というのは、これが文字数が多くて見えなくなっちゃう、とかですか?
    http://jsfiddle.net/dKCPK/
  • id:fujinohana512
    サンプルありがとうございます。
    サンプルのコードをあててみまして、質問の内容どうりの事ができましたが、
    マウスオーバーをするポイントが指定できなくなりました。
    たぶん、他の命令が邪魔して、うまくできないのだと思います。

    ①.http://wayfarerweb.com/jquery/plugins/mapbox/と
    ②.http://ncmarinescience.com/

    に、
    私が扱っている地図画像は同じものですが、サイズの違う大きな画像を貼りつけています。

    1枚目-width707px/height1000px(初期画面時)
    2枚目-width2122px/height3000px
    3枚目-width3057px/height5000px

    マウスホイールでくるくるしながら、地図の画像を拡大縮小移動し
    拡大された画像(3枚目)がでてきたら、ポイントをマウスオーバーするとツールチップが表示されるようにしたいわけですが、

    ②を見ますと背景の画像自体が小さいので、ポイントをクリックすると、違和感なくツールチップが中央に表示されています。

    私のは、ポイントの位置は指定できても、大きいサイズの画像に影響されているためか、とんでもないところにツールチップがでてくるのだと思います。

    ②のここのソースをあたっています↓

    http://code.google.com/p/supermaps/source/browse/trunk/popups/campus.html


    初めての質問で、
    私もどのようにお伝えしたらよいのかわからなくて、
    状況がわかりにくいと思います。
    本当にすみません。


  • id:Lhankor_Mhy
    まとめると、こういうことでしょうか。
    ・大きな画像を配置してその上にdiv要素を配置しており、これをマウスホイールイベントでCSSを操作し擬似的に拡大縮小するようにしている。
    ・ツールチップはマウスカーソルに追従するのではなく、定位置に表示させようとしている。
    ・しかし、CSSを操作しているためにツールチップが定位置からずれて表示される。
     
    こういうことですと、コードを示していただかないとアドバイスは難しいかもしれません。
     
     
     
    ところで①のソースを見ましたが、これと②を組み合わせるとマウスオーバーに反応するdivの座標もずれそうな気がするのですが、その辺はどうやってクリアしてるのでしょう?
  • id:fujinohana512
    ファイアーワークスで座標をとって
    「campus.html」の中の、「rel=" - "」に座標を入れましたら、特に問題なく指定できました。


    <a href="javascript:void(0)" id="kenan" class="bullet" rel="1101-672">&nbsp;</a>
    <div class="popup" id="kenan-box">
    <h3>あいうえお</h3>
    <div class="popupcontent">
    <p>かきくけこ</p>
    </div>
    <a class="close" href="javascript:void(0)">Close</a>
    </div>

    この方法でしばらくやっていましたが、結局ツールチップに関しては解決できなかったのでやめました。


    外部htmlから読み込まず、
    すべてhtml内に、拡大された3枚目の画像にクリッカブルマップでエリアを指定し、
    先日、作って頂いたツールマップのコードをあててみたら、
    ツールチップも邪魔にならず、表示できました。

    var tooltip = $(document.createElement('div')).attr('id', 'tooltip')
    $('.tooltip').mousemove(function (e) {
    tooltip.css({
    left: e.pageX + 20 + 'px',
    top: e.pageY + 20 + 'px'
    })
    });



    困った質問で、戸惑われたと思いますが、
    マップボックスとツールチップに関してはなんとか解決しました。

    おかげで、折れまくっていた気持ちに
    少し希望がでてきました。

    ありがとうございます!!!







  • id:Lhankor_Mhy
    大してお役に立てずにすみません。
    また何かありましたらどうぞ。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません