/* 
SPRITE STYLE IMAGE ROLLOVER
One very wide gif image displayed as a background image which contains all 
map rollover variations is dynamically repositioned onmouseover. The viewport
is the width of one map image, meaning the remainder are off-screen.
The positionID is multiplied with the mapImageWidth to scroll the background image by 
the required amount to position it within the viewport.

    default:         [#]######
    widthMultiple=2: ##[#]####
    widthMultiple=4: ####[#]##
    etc..

Note that the background is attached to the <img> with id=mapImage
and src= to a transparent GIF image. The width attribute specifies
the viewport width.

Producing one large gif of 39kb loads quicker over one http txn 
rather than 7 smaller gifs with a sum of 45kb.

Dominic Winsor
*/

// scroll element background image x position by required amount
function mapHighlight(mapRef, widthMultiple)
{
    mapImg = document.getElementById(mapRef);
    mapImageWidth = mapImg.width;
    mapImg.style.backgroundPosition = (widthMultiple!=undefined) ? "-"+(mapImageWidth*widthMultiple)+"px 0px" : "0px 0px"; 
}