Getting mouse click position on image in javascript?

Question

I wrote below code to get co-ordinate of x/y in JAVASCRIPT , it's not working .

I want to create a color picker using this image when ever some one click on button pick color then it prompts a window with color and button cancel , When user clicked on image than i need to find x/y co-ordinate so that i can specify which color it is .

Problem is that these alerts are not working

alert(e.clientX - offsetl);
alert(e.clientY - offsett);

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#dialogoverlay{
    display: none;
    opacity: .8;
    position: fixed;
    top: 0px;
    left: 0px;
    background: #FFF;
    width: 100%;
    z-index: 10;
}
#dialogbox{
    display:none;
    position: fixed;
    background: #f2f2f2;
    border-radius:5px; 
    z-index: 10;
}
#dialogboxhead{background:white;height:40px;margin:10px;}
#text {float:left; text-align:center;margin:10px; font-size:19px;}
#cancel{float:left;margin:9px;}
#image{
    margin-top:0px;
    padding:10px;
}
</style>

<script type="text/javascript">
function CustomAlert(){
    this.render = function(dialog){
        var winW = window.innerWidth;
        var winH = window.innerHeight;
        var dialogoverlay = document.getElementById('dialogoverlay');
        var dialogbox = document.getElementById('dialogbox');
        dialogoverlay.style.display = "block";
        dialogoverlay.style.height = winH+"px";
        dialogbox.style.left = (winW/2) - (550 * .5)+"px";
        dialogbox.style.top = "100px";
        dialogbox.style.display = "block";
    }
    this.cancel = function(){
        document.getElementById('dialogbox').style.display = "none";
        document.getElementById('dialogoverlay').style.display = "none";
    }
}
var Alert = new CustomAlert();
function position(e){
    var offsetl = document.getElementById('image').offsetLeft;
    var offsett = document.getElementById('image').offsetTop; 
    alert(offsetl);
    alert(offsett);
    alert(e.clientX - offsetl);
    alert(e.clientY - offsett);
}
</script>
</head>
<body>
<div id="dialogoverlay"></div>
<div id="dialogbox">
    <div id="dialogboxhead">
     <p id="text">Select color</p>
     <input type="button" onClick="Alert.cancel()" id="cancel" name="Cancel" value="Cancel"/>
    </div>
    <div>
    <img id="image" src="color.png" onClick="position()"/>
    </div>
</div>
<button onclick="Alert.render('Hello World');" >pick color </button>
</body>
</html>

Thanks . I forgot adding event as argument in function call . — user3610792
– user3610792, Commented May 15, 2014 at 13:29

Carlos Guzman · Accepted Answer · 2014-05-15 13:40:31Z

1

I recommend use jQuery and attach click event handler in you image. The event object return in jQuery include two properties, pageX and pageY. This properties contains mouse position relative to the top edge of the document (jQuery Event Object). The code look like this:

$(document).ready(function () {
    $('img#image').click(position);
});

function position(e) {
    var offsetX = e.pageX,
        offsetY = e.page;
}

The sample is in JSFiddle http://jsfiddle.net/zV3dH/.

I hope this help you.

answered May 15, 2014 at 13:40

Carlos Guzman

3635 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3610792 Over a year ago

But the problem is still there , in finding color according to co-ordinate .So I am creating small button 25*25 px and this is much easier than using image to pick a color .

Carlos Guzman Over a year ago

Mmm, You're using HTML5. If so, you can draw the image in a canvas, and use canvas.getContext("2d").getImageData to get information <w3schools.com/html/html5_canvas.asp>

Sayan J. Das · Accepted Answer · 2016-11-25 16:34:51Z

0

Try this code buddy.. Sure it works

 function getClickPos(e) {
     return {x:e.clientX,y:e.clientY};
 }

Now u can use it like this:

document.querySelector("#img").onclick = function(e) {
 var pos= getClickPos(e);
 alert(pos.x);
 };

answered Nov 25, 2016 at 16:34

Sayan J. Das

92210 silver badges20 bronze badges

Collectives™ on Stack Overflow

Getting mouse click position on image in javascript?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related