On Page Load, Set Focus of Browser to specific point in a Large image

[ke6rwj]

I am developing a kiosk application, this will not have a keyboard or
mouse for use.

The system rotates through a series of images - no problem

One image is very large, like this one...

http://radar.weather.gov/Conus/Loop/NatLoop.gif

I want to browser focus to be on Georgia (bottom Right) when the image
loads instead of the default Washington State (Top Left)

I have tried image maps and other onMouse events, but this needs to
occur automatically not when someone touches the mouse or keyboard,
since the system will not have any interaction from a human...

any ideas?

 

[nutso fasst]

I want to browser focus to be on Georgia (bottom Right) when the image
loads instead of the default Washington State (Top Left)

You can use CSS to set the image as a background-image with a negative
position, e.g.:

body {
margin: 0; padding: 0; border: none; overflow: hidden;
position: relative; width: 100%; height: 100%;
background: white url(natloop.gif) -[x_offset]px -[y_offset]px no-repeat;
}

If you don't know window dimensions, you can set the background-position
property in a window.onload function. I believe the following will do it in
most browsers:
----------------------
var x = [x offset in image to center of Georgia] - (window.innerWidth ?
window.innerWidth : (document.documentElement.clientWidth ?
document.documentElement.clientWidth : document.body.clientWidth))/2;

var y = [y offset in image to center of Georgia] - (window.innerHeight ?
window.innerHeight : (document.documentElement.clientHeight ?
document.documentElement.clientHeight : document.body.clientHeight))/2;

document.getElementsByTagName('body')[0].style.backgroundPosition='-' + x +
' -' + y
----------------------

You can also put the image in a relatively-positioned DIV and
negatively-offset the top and left of the DIV.

nf