Can everybody help me on how to create a tooltip that contain the x y coordinates? Here is my sample code:
<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>
What happened in this example is that the coordinates aren’t changing. Although it gets the coordinates but it doesn’t change.
*This code is actually like a tooltip of image, so just ignore the id name.
hoverdoes not fire continuously. It only fires once when you move over and once when you move out. So that is why it doesn’t move with the mouse. Try binding to mousemove instead. The jQuery docs even have an example of mousing over a square and displaying the coordinates.