Featured post
javascript - jquery co-ordinate problems on an image with in a absolute positioned div -
i have problem recording x , y co-ordinates using jquery/javascript, on image in 'position: absolute div' container.
basically supposed happen somewhere in image clicked, , div containing information placed on co-ordinates.
however when image's div container has position absolute, x , y co-ordinates off, needs there overlay image on divs, unless can think of better way?
below code, appreciated
<style> #image_container {position: absolute} #test_img {} .image_dot { height: 5px; width: 5px; background-color: red; position: absolute; } </style> <div id="image_container"> <img src="mrt.jpg" id="test_img" /> </div> <script type="text/javascript"> $("#test_img").click(function(event) { var x = event.pagex - this.offsetleft; var y = event.pagey - this.offsettop; $("#image_container").append('<div class="image_dot" id="uniqueid" style="display: none;">some text</div>'); $("#unqiueid").css("top",x+"px").css("left",y+"px").show(); }); </script>
i'm not sure if work since don't have time set test-case, think if possible should let click() event bubble body
element. example:
$(body).click(function(e) { var x = event.pagex; var y = event.pagey; $("body").append('<div class="image_dot" id="uniqueid" style="display: none;">some text</div>'); $("#unqiueid").css("top",x+"px").css("left",y+"px").show(); }
if being positioned absolute anyway (and not relative), shouldn't matter, , believe should better pagex , pagey values using body
(or maybe window
?) element.
as said, though, haven't had chance test this. let me know if works!
- Get link
- X
- Other Apps
Comments
Post a Comment