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:10;top:100;width:200;height:200">
<img src="water lilies.jpg" style="position:relative" />
</div>
</body>
<script>
var ele,sx,sy,ww,hh
function mdn(){sx=window.event.x;sy=window.event.y;ele=window.event.srcElement;
var vp=ele.parentElement;ww=vp.offsetWidth-40-ele.offsetWidth;hh=vp.offsetHeight-40-ele.offsetHeight}

function mov(){if(window.event.button !=1){return}
if(ele.tagName != 'IMG'){return}
xx=ele.offsetLeft+window.event.x-sx
yy=ele.offsetTop+window.event.y-sy
if(xx>40){xx=40};if(xx<ww){xx=ww}
if(yy>40){yy=40};if(yy<hh){yy=hh}
ele.style.left=xx;ele.style.top=yy}
</script>
</html>