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.
div.pix{position:absolute;cursor:move;overflow:hidden;border:solid 1 silver}</style>
<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" />
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}