jayakodiu@yahoo.com Image Viewports with panning A DIV tag based viewport, that can be of any size and placed anywhere in the page, with panning capability to peek any part of a large image is demonstrated in the script below; please change the image source with your image.
Setting a DIV's overflow to scroll gives standard scroll bars for horizontal and vertical scrolling only and these bars are ugly. Panning enables scrolling in any direction - diagonally or even in rounds; the image gets a soft border and the obtrusive and bulky scroll-bars are done away.
The viewport is just a DIV element of 'pix' class that contains the image; any number of such viewports may be added to a page; the script code block is the same for a single or multiple viewports.
<html><head><style>
div.pix{position:absolute;cursor:move;overflow:hidden;border:solid 1 silver}
</style></head>
<body onmousedown=mdn() onmousemove="window.event.returnValue=false;mov()">
<div class="pix" style="left:50;top:100;width:200;height:200">
<img src="water lilies.jpg" style="position:relative" />
</div>
</body>
<script language=vbs>
dim ele,sx,sy,ww,hh
sub mdn()
sx=window.event.x:sy=window.event.y
set ele=window.event.srcelement
set vp=ele.parentElement
ww=vp.offsetWidth-40-ele.offsetWidth
hh=vp.offsetHeight-40-ele.offsetHeight
end sub
sub mov()
if window.event.button <> 1 then exit sub
if ele.tagName <> "IMG" then exit sub
xx=ele.offsetLeft+window.event.x-sx
yy=ele.offsetTop+window.event.y-sy
if xx>40 then xx=40
if xx<ww then xx=ww
if yy>40 then yy=40
if yy<hh then yy=hh
ele.style.left=xx
ele.style.top=yy
end sub
</script>
</html>