IE does not scale clicks on a scaled desktop when submitting web form using input images

Question

I have run into a bit of a serious problem with a web application.

I have a submit image (input type=image) on a web form. I deliberately chose this because its been around forever and all browsers understand it

Of course our favourite browser does not! If you scale your desktop, say if you have vision problems. IE does not scale the clicks properly

So we have an image, when a user clicks the image the form is submitted and the x and y co-ordinates of the click are also submitted. In IE these co-ordinates are not scaled correctly. IE submits bad co-ordinates. Firefox ( I haven't tested others ) submits the correct scaled co-ordinates.

As an example if the image is 100*100 pixels in size and the desktop is scaled by 150% when someone clicks the bottom right corner of the image Firefox returns [100,100] but IE returns [150,150] which is off the image!

This is bit of a show stopper for me and I need a way to work around it. If anyone has any ideas it would be appreciated. perhaps the scale factor can somehow be returned and I can calculate the scaling myself and do the adjustment in the application?

DC

In case you want to try the zoom factor solution (browser dependent): http://stackoverflow.com/a/5078596/1012381 — JScoobyCed, Mar 04 '13 at 02:27
thanks. I am part way to a solution. IE is the problem because it does not scale the clicks. I am partway to the solution but have got stuck as it seems IE doesnt allow you to change the value f an input element when you are submitting. I want to set the scalefactor at the last possible moment. — DeveloperChris, Mar 04 '13 at 04:55

score 1 · Answer 1 · answered Mar 05 '13 at 01:01

I have resolved the issue

As explained when an input image is zoomed Internet Exploder fails to send the correct click co-ordinates. instead it sends the actual click coordinates in pixels which is often outside of the real unzoomed images region.

You cannot (as far as I am aware) get access to the click coordinates from javascript it is automatically assigned and sent during the submit process.

The solution is to wait to the very last moment and calculate the 'zoom factor' send that to the server and then adjust the co-ordinates on the server.

To the form add the following javascript (assumes jquery)

Note: deviceXDPI has been around since ie 6

<script>
// return the screens scale factor used for IE
function getScaleFactorX(elem_id) {
    var nscalefactor = 1;
    try {
        if (screen.deviceXDPI){
            nscalefactor = screen.deviceXDPI / screen.logicalXDPI;
            $("#" + elem_id).val( nscalefactor );
        } else {
            $("#" + elem_id).val( 1 );
        }
    } catch (e) {
     // fail silently
    }
    return nscalefactor;
}
</script>

Add a suitable hidden field to carry the scaling back to the server

<input type="hidden" id="scalefactor" name="scalefactor" value="1">

add an operation so that the scalefactor is calculated when the image is clicked

<input name="img"  type="image" src="image.png" width="400" height="200" alt="Please click" onclick="getScaleFactorX('scalefactor'); return true;" />

Doing this on the images onclick handler allows the user to zoom the screen after the form is loaded and before it is submitted. if you populate this field too early the the user may zoom the image later and the scale factor would be wrong.

on the server

// scale the click points
                if ($scalefactor) {
                    $x = (int)($x / $scalefactor);
                    $y = (int)($y / $scalefactor);
                }

This assumes the scaling is the same in both the x and y directions which is an ok assumption for zoomed web pages. there will also be rounding errors so if you need pixel perfect you will need to account for that

DC

IE does not scale clicks on a scaled desktop when submitting web form using input images

1 Answers1