Home/ Questions/Q 4107912
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T21:34:49+00:00

I’ve asked this question before, and the responses told me what I knew I

  • 0

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”?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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!

    • 0