I have a website that captures picture tags based on where the user clicked on the screen. When the user clicks inside of the image, it gets the exact location of where the mouse has been clicked. After that I have to do different calculations based on different screen size resolution to determine to correct location. I have tried using jquery offset, that does not work for me it just shows one location, so i am using evt.pageX. Question is, is there a better way of doing this, before i keep going down this road? The image is relative i believe, and here is the javascript I am using to determine the correct location of the tag (which works by the way). Thanks for any suggestions or help.
function ShowPictureTag(x, y, orginalResolution) {
$(document).ready(function () {
var currentresolution = screen.width + 'x' + screen.height;
var top = y;
var left = x;
if (orginalResolution != currentresolution) {
if (currentresolution == '1440x900' && orginalResolution == '1280x960') {
top = y - 232;
left = x - 110;
}
if (currentresolution == '1280x960' && orginalResolution == '1440x900') {
top = y - 232;
left = x - 179;
}
if(currentresolution == '1366x768' && orginalResolution == '1440X900') {
}
}
else {
if(orginalResolution == '1280x960') {
top = y - 232;
left = x - 107;
}
if (orginalResolution == '1440x900') {
top = y - 232;
left = x - 185;
}
if(orginalResolution == '1366x768') {
}
}
$('.pictureTagBorder').css({ top: top, left: left }).show();
});
}
You could do it server-side ImageButton OnClick Event