1
xy座標を含むツールチップを作成する方法について皆様のお手伝いができますか？ここにサンプルコードがあります：jqueryで.hoverイベントを使ってhtmlで座標を取得するには？
<style type="text/css">
a img {
border: 3px solid blue;
}
#largeImage {
position: absolute;
padding: .5em;
background: #e3e3e3;
border: 1px solid #bfbfbf;
}
</style>
<script type="text/javascript">
$(function() {
var offsetX = 20;
var offsetY = 10;
$('a').hover(function(e) {
var href = $(this).attr('href');
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
$('<div id="largeImage">' + 'X: ' + x + ' Y: ' + y + '</div>')
.css('top', e.pageY + offsetY)
.css('left', e.pageX + offsetX)
.appendTo('body');
}, function() {
$('#largeImage').remove();
});
$('a').mousemove(function(e) {
$('#largeImage')
.css('top', e.pageY + offsetY)
.css('left', e.pageX + offsetX);
});
});
</script>
<body>
<a href="Images/FredLarge.jpg">
<img src="Images/FredSmall.jpg" alt="squidward" />
</a>
</body>
この例では、座標が変化していないということがあります。それは座標を取得しますが、それは変更されません。
*このコードは実際には画像のツールチップのようなものなので、ID名は無視してください。
ありがとうございました！今、私はこのようなチュートリアルがWeb上にない理由を知っています。 – kimbebot