多くの地域に分割され、地図の座標を使用してホバーエリアを作成するjQueryを使用して地図を作成しました。ホバーすると、すべてのリージョンにツールチップが表示されます。すべてがうまく機能しますが、1つの問題があります。ツールチップはマウスカーソルの後に続く必要があります。これは、mousemoveで実行しましたが、マップがdiv内にあり、ページの中央にfxがある場合、ツールチップはカーソルの位置ではなく、おそらく左側にあります。画面が大きくなるほど、問題は悪化します。
コードを変更するにはどうすればよいですか？ツールチップは常にカーソルがある場所にありますか？
$(function() {
$("#map-container AREA").mouseover(function() {
var regionMap = "." + $(this).attr("id") + "-map";
$(regionMap).css("display", "inline");
}).mouseout(function() {
var regionMap = "." + $(this).attr("id") + "-map";
// Check if a click event has occured and only change the Region hover state accodringly
if (!$(regionMap).hasClass("selected")) {
$(regionMap).css("display", "none");
}
});
$("#map-container AREA").click(function() {
$("#map-container img.region").removeClass("selected").css("display", "none");
var regionMap = "." + $(this).attr("id") + "-map";
$(regionMap).addClass("selected").css("display", "inline");
});
});
$(document).ready(function() {
$(".tooltip").hide();
$("#map-container area").mousemove(function(e) {
var regionList = '.' + $(this).attr('id') + '-list';
var topheight = $(regionList).height() + 55;
$(regionList).show();
$(regionList).css({
top: (e.pageY - topheight) + "px",
left: (e.pageX - 45) + "px"
});
});
$("#map-container area").mouseout(function(e) {
$(".tooltip").hide();
});
});