Detecting position of mouse click within an image on varied screen sizes - JS/Jquery

Question

I've asked this question before, and the responses told me what I knew I needed to do but didn't provide an example, so I haven't figured out a solution yet.

I've got an initial div called "container" which is a height:100% width:100% image of an Oklahoma map. The idea is that when the user clicks a certain section of the map (for this example, the panhandle), the div is toggled to a div which is the panhandle image. I determine where the user clicks by knowing the pixel location of the mouse when it clicks.

The problem is, pixel values are different for different size screens. I've been told that in order to scale my calculations for where the user clicks based on their screen size, I need to:

scale every value before you compare it. Multiply every x by your canonical width and divide by the actual width and do the same with y and height.

I'm confused by "multiply every x by your canonical width and divide by the actual width." I went ahead and tried scaling anyways. I found that the first edge of the panhandle is 3.1% away from the left side of the screen and the farthest edge is 35.7% away from the left side of the screen. I have the following code:


$("#container").click(function(e)
    {
        var x = event.pageX;
        var y = event.pageY;

        // Variables for area of pan handle
        /* These variables do not seem to work yet */
        var xScale1 = 0.031*x;
        var xScale2 = 0.357*x;

        if(x >= xScale1 && x "less-than"= xScale2) 
        {
        alert("You clicked the panhandle!");
        }   
     }

This should pop-up an alert when I click within the horizontal confinements of the panhandle, but nothing is happening. I do notice that I am not dividing any of my values by "actual width". Could someone please provide an example of how to "multiply every x by your canonical width and divide by the actual width"?

The map size will always be the same size as the screen. The problem is that screen sizes can be different, so using constant pixel values is not an option, as 200 pixels to the right of the left edge of the screen will be a different location for different sized screens. — Briz, Mar 21 '11 at 13:45
There is a lot wrong here..... you have e passed as a parameter then you are calling event. There's no closing ); on your function and.... What is x "less-than" supposed to be? you've checked to see if a text string is the same as a numerical value You'll never get an alert! — James South, Mar 21 '11 at 13:55
I have the closing ); in my actual code. I put "less-than" in quotes because I couldn't put a < in the code block without it messing up the code block. In my actual code I have an <, not "less-than" — Briz, Mar 21 '11 at 13:57

score 2 · Accepted Answer · answered Mar 21 '11 at 14:04

What they mean by Canonical width, is the 'normal' width - which in your case is the native size of the image.

Let's say that the image you are using for the map is normally 1280 x 1600 px (just for arguments sake), then your canonical height is 1600 px and your canonical width is 1280 px.

So, if I'm viewing the image on a screen sized 800 x 600 px - that is 800 px tall and 600 px high - then I need to scale the image to be 800 /1600 = 0.5 times smaller in height, and 600 / 1250 = 0.48 times smaller in width.

Similarly, if I click on the 400th pixel from the left side of the screen, and 200th from the top on my actual screen, then I can get my 'canonical' position by dividing by the previously established ratios. so (400, 200) => (800, 416.7).

Then you can use these canonicalized values to look up what part of your image they clicked.

having said all of that, I wouldn't really recommend that! This is a perfect case for using html imagemaps: http://htmldog.com/reference/htmltags/map/ . Check it out!

Hope this helps!

It does help a lot. I'll get started on this. I've looked at html imagemaps, but I'll look at it again. ;) Thanks! — Briz, Mar 21 '11 at 14:06

score 1 · Answer 2 · answered Mar 21 '11 at 14:50

I don't know about this conical thing but mathematically I see your problem in a very simple way. I guess your map is an image and an image has a constant size. Let's say your map is 100x100. If the size of the screen is 200x200, the screen is 2 times larger than your map.

xScreen = 2*xMap;
yScreen = 2*yMap;

So all the values used for the screen are 2 times larger than the values used for the actual map. If the user clicks the 50,50 pixel in your 200x200 screen, you have to divide this for 2 (the proportion) getting 25,25 in your 100x100 map. The key is to find the proportion by dividing the total size of the screen and the total size of your map. In this case:

xScreen/xMap = 2;//200/100 = 2;
yScreen/yMap = 2;//200/100 = 2;

Here's the code to find the proportion:

var xScreen = screen.width;
var yScreen = screen.height;
var xProportion = xScreen/xSizeOfYourMap;
var yProportion = yScreen/ySizeOfYourMap;
$("#container").click(function(e)
{
    var x1 = event.pageX;
    var y1 = event.pageY;

    var x2 = x1/xProportion;
    var y2 = y1/yProportion;

    alert("x of screen:"+x1+" - x of map:"+x2);
 });

Now you have the values of the click on the map you can calculate if the user has clicked the area you wanted. For all your calculations the numbers need to pass through the proportion.

Detecting position of mouse click within an image on varied screen sizes - JS/Jquery

2 Answers2