Controls
Mouse over the controls to scroll or zoom at default speed, mouse down to increase speed.
Select image to be shown.
The reduction limit of the image can be set to the images original size or to display size.
<HTML>
<HEAD>
<TITLE>Scroll n Zoom</TITLE>
<style>
.border_def{border:2px outset white;cursor:hand;cursor:pointer;background-color:#aaaaaa;margin-right:20px}
.borderover{border:2px outset white;cursor:hand;cursor:pointer;background-color:#555555;margin-right:20px}
.borderdown{border:2px inset white;cursor:hand;cursor:pointer;background-color:#000000;margin-right:20px}
</style>
<script type="text/javascript">
<!--
// Jeff
// www.huntingground.freeserve.co.uk
picList=new Array()
picList[picList.length]="pic03.jpg"
picList[picList.length]="pic12.jpg"
picList[picList.length]="pic14.jpg"
picList[picList.length]="pic16.jpg"
picList[picList.length]="pic17.jpg"
picList[picList.length]="pic18.jpg"
picList[picList.length]="pic19.jpg"
speed1=1
speed2=10
minImgSize=0 // reduction limit: 0 = default image size, 1 = display size
timer=""
rate=speed1
pic=new Array()
for(i=0;i<picList.length;i++){
pic[i]=new Image()
pic[i].src=picList[i]
}
function init(z){
if(!z){z=0}
containerWidth=parseInt(document.getElementById("container").style.width)
containerHeight=parseInt(document.getElementById("container").style.height)
obj=document.getElementById("picture")
obj.src=pic[z].src
imageWidth=pic[z].width
imageHeight=pic[z].height
obj.style.left=0+'px'
obj.style.top=0+'px'
pos_x=0
pos_y=0
nowLeft=0
nowTop=0
obj.style.width=imageWidth+'px'
obj.style.height=imageHeight+'px'
}
function horizontal(n){
nowLeft=parseInt(obj.style.left)
if(n==0){nowLeft-=rate}
if(n==1){nowLeft+=rate}
if(nowLeft> -rate){
nowLeft=0
stop()
}
if(nowLeft < containerWidth - obj.offsetWidth+rate){
nowLeft = containerWidth - obj.offsetWidth
stop()
}
obj.style.left=nowLeft + 'px'
timer=setTimeout("horizontal("+n+")",50)
}
function vertical(n){
nowTop=parseInt(obj.style.top)
if(n==0){nowTop-=rate}
if(n==1){nowTop+=rate}
if(nowTop> -rate){
nowTop=0
stop()
}
if(nowTop < containerHeight - obj.offsetHeight+rate){
nowTop = containerHeight - obj.offsetHeight
stop()
}
obj.style.top=nowTop + 'px'
timer=setTimeout("vertical("+n+")",50)
}
function stop(){
clearTimeout(timer)
}
function zoom(n){
nowLeft=parseInt(obj.style.left)
nowTop=parseInt(obj.style.top)
nowWidth=obj.offsetWidth
nowHeight=obj.offsetHeight
if(n==0){
nowWidth-=rate
nowHeight-=rate
}
if(n==1){
nowWidth+=rate
nowHeight+=rate
}
obj.style.width=nowWidth+'px'
obj.style.height=nowHeight+'px'
timer=setTimeout("zoom("+n+")",50)
if(minImgSize==0){ // minimum image size = default image size
if(nowWidth<imageWidth){obj.style.width=imageWidth+'px'}
if(nowHeight<imageHeight){obj.style.height=imageHeight+'px'}
if(nowLeft>0){
nowLeft=0
obj.style.left=nowLeft+'px'
}
if(nowTop>0){
nowTop=0
obj.style.top=nowTop+'px'
}
if(nowLeft<-obj.offsetWidth+containerWidth){
nowLeft=-obj.offsetWidth+containerWidth
obj.style.left=nowLeft+'px'
}
if(nowTop<-obj.offsetHeight+containerHeight){
nowTop=-obj.offsetHeight+containerHeight
obj.style.top=nowTop+'px'
}
}
if(minImgSize==1){ // minimum image size = display area size
if(obj.offsetWidth<containerWidth){
obj.style.width=containerWidth
obj.style.left=0+'px'
}
if(obj.offsetHeight<containerHeight){
obj.style.height=containerHeight
obj.style.top=0+'px'
}
if(nowLeft<0&&obj.offsetWidth<containerWidth+ -nowLeft){
nowLeft+=rate
obj.style.left=nowLeft+'px'
}
if(nowTop<0&&obj.offsetHeight<containerHeight+ -nowTop){
nowTop+=rate
obj.style.top=nowTop+'px'
}
}
}
function speed(s){
if(s==1){rate=speed1}
if(s==2){rate=speed2}
}
// add onload="init()" to the opening BODY tag
//-->
</script>
</HEAD>
<BODY onload="init()"><h1>Scroll n Zoom</h1>
<center>
<div id="container" style="width:400px;height:200px;overflow:hidden;border:1px solid red">
<IMG id=picture src="" style="position:relative;left:0px;top:0px;display:block">
</div>
<br><br>
<div>Controls</div>
<img src="left.gif" class="border_def" onmouseover="horizontal(1);this.className='borderover'" onmouseout="stop();this.className='border_def'" onmousedown="speed(2);this.className='borderdown'" onmouseup="speed(1);this.className='borderover'">