マウスホイールでポイントをスクロールすると、拡大縮小はできるようになりましたが、 拡大された画像に、ポイントをマウスオーバーすると、画面の中央もしくは、ポイントの近くで隠れないように、ツールチップで吹き出しがでてくるようにしたいです。 ツールチップはでてくるのですが、画面からはみ出してしまう状態です。 htmlとcssがやっとわかった程度ですが、jQueryのデザインツールを参考に、いろいろと試しています。 わかる方、宜しくお願いします。
ログインして回答する
回答はまだありません
これ以上回答リクエストを送信することはできません。制限について
コメント(7件)
・jQueryプラグインでツールチップを表示するものを教えて
・画面からはみ出るツールチップを画面内に納める方法を教えて
のどちらでしょうか。
「画面からはみ出るツールチップを画面内に納める方法を教えて」です。
マウスで画面を移動しても、ポイント(マーカー?)の近くから、ツールチップがでてくるようにしたいです。
ポイントは複数あり、ツールチップに表示されるコメントも全部違います。
わかりにくい質問で、すみません。
宜しくお願いします。
http://jsfiddle.net/dKCPK/
サンプルのコードをあててみまして、質問の内容どうりの事ができましたが、
マウスオーバーをするポイントが指定できなくなりました。
たぶん、他の命令が邪魔して、うまくできないのだと思います。
①.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
初めての質問で、
私もどのようにお伝えしたらよいのかわからなくて、
状況がわかりにくいと思います。
本当にすみません。
・大きな画像を配置してその上にdiv要素を配置しており、これをマウスホイールイベントでCSSを操作し擬似的に拡大縮小するようにしている。
・ツールチップはマウスカーソルに追従するのではなく、定位置に表示させようとしている。
・しかし、CSSを操作しているためにツールチップが定位置からずれて表示される。
こういうことですと、コードを示していただかないとアドバイスは難しいかもしれません。
ところで①のソースを見ましたが、これと②を組み合わせるとマウスオーバーに反応するdivの座標もずれそうな気がするのですが、その辺はどうやってクリアしてるのでしょう?
「campus.html」の中の、「rel=" - "」に座標を入れましたら、特に問題なく指定できました。
<a href="javascript:void(0)" id="kenan" class="bullet" rel="1101-672"> </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'
})
});
困った質問で、戸惑われたと思いますが、
マップボックスとツールチップに関してはなんとか解決しました。
おかげで、折れまくっていた気持ちに
少し希望がでてきました。
ありがとうございます!!!
また何かありましたらどうぞ。