Scroll n Zoom

COPY - Insert Between Head Tags: <HEAD></HEAD>

pic_list=new Array()
pic_list[pic_list.length]="pic03.jpg"
pic_list[pic_list.length]="pic12.jpg"
pic_list[pic_list.length]="pic14.jpg"
pic_list[pic_list.length]="pic16.jpg"
pic_list[pic_list.length]="pic17.jpg"
pic_list[pic_list.length]="pic18.jpg"
pic_list[pic_list.length]="pic19.jpg"

speed1=1
speed2=10
min_img_size=0 // reduction limit: 0 = default image size, 1 = display size

timer=""
rate=speed1

pic=new Array()
for(i=0;i<pic_list.length;i++){
pic[i]=new Image()
pic[i].src=pic_list[i]
}

function init(z){
if(!z){z=0}

container_width=parseInt(document.getElementById("container").style.width)
container_height=parseInt(document.getElementById("container").style.height)

obj=document.getElementById("picture")
obj.src=pic[z].src
image_width=pic[z].width
image_height=pic[z].height
obj.style.left=0
obj.style.top=0
pos_x=0
pos_y=0
now_left=0
now_top=0

obj.style.width=image_width
obj.style.height=image_height

}

function horizontal(n){
now_left=parseInt(obj.style.left)

if(n==0){now_left-=rate}
if(n==1){now_left+=rate}

if(now_left> -rate){
now_left=0
stop()
}

if(now_left < container_width - obj.offsetWidth+rate){
now_left = container_width - obj.offsetWidth
stop()
}

obj.style.left=now_left + 'px'
timer=setTimeout("horizontal("+n+")",50)
}

function vertical(n){
now_top=parseInt(obj.style.top)
if(n==0){now_top-=rate}
if(n==1){now_top+=rate}

if(now_top> -rate){
now_top=0
stop()
}

if(now_top < container_height - obj.offsetHeight+rate){
now_top = container_height - obj.offsetHeight
stop()
}

obj.style.top=now_top + 'px'
timer=setTimeout("vertical("+n+")",50)

}

function stop(){
clearTimeout(timer)
}

function zoom(n){
now_left=parseInt(obj.style.left)
now_top=parseInt(obj.style.top)
now_width=obj.offsetWidth
now_height=obj.offsetHeight
if(n==0){
now_width-=rate
now_height-=rate
}
if(n==1){
now_width+=rate
now_height+=rate
}

obj.style.width=now_width+'px'
obj.style.height=now_height+'px'

timer=setTimeout("zoom("+n+")",50)

if(min_img_size==0){ // minimum image size = default image size

if(now_width<image_width){obj.style.width=image_width}
if(now_height<image_height){obj.style.height=image_height}

if(now_left>0){
now_left=0
obj.style.left=now_left
}
if(now_top>0){
now_top=0
obj.style.top=now_top
}
if(now_left<-obj.offsetWidth+container_width){
now_left=-obj.offsetWidth+container_width
obj.style.left=now_left
}
if(now_top<-obj.offsetHeight+container_height){
now_top=-obj.offsetHeight+container_height
obj.style.top=now_top
}

}

if(min_img_size==1){ // minimum image size = display area size

if(obj.offsetWidth<container_width){
obj.style.width=container_width
obj.style.left=0
}
if(obj.offsetHeight<container_height){
obj.style.height=container_height
obj.style.top=0
}
if(now_left<0&&obj.offsetWidth<container_width+ -now_left){
now_left+=rate
obj.style.left=now_left
}
if(now_top<0&&obj.offsetHeight<container_height+ -now_top){
now_top+=rate
obj.style.top=now_top
}

}

function speed(s){
if(s==1){rate=speed1}
if(s==2){rate=speed2}
}
</script>

COPY - Insert Inside Body: <BODY></BODY>

<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="arrow_g_l.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'">
<img src="arrow_g_r.gif" class="border_def" onmouseover="horizontal(0);this.className='borderover'" onmouseout="stop();this.className='border_def'" onmousedown="speed(2);this.className='borderdown'" onmouseup="speed(1);this.className='borderover'">
<img src="arrow_g_u.gif" class="border_def" onmouseover="vertical(1);this.className='borderover'" onmouseout="stop();this.className='border_def'" onmousedown="speed(2);this.className='borderdown'" onmouseup="speed(1);this.className='borderover'">
<img src="arrow_g_d.gif" class="border_def" onmouseover="vertical(0);this.className='borderover'" onmouseout="stop();this.className='border_def'" onmousedown="speed(2);this.className='borderdown'" onmouseup="speed(1);this.className='borderover'">
<img src="arrow_g_in.gif" class="border_def" onmouseover="zoom(0);this.className='borderover'" onmouseout="stop();this.className='border_def'" onmousedown="speed(2);this.className='borderdown'" onmouseup="speed(1);this.className='borderover'">
<img src="arrow_g_out.gif" class="border_def" onmouseover="zoom(1);this.className='borderover'" onmouseout="stop();this.className='border_def'" onmousedown="speed(2);this.className='borderdown'" onmouseup="speed(1);this.className='borderover'"><br><br>

COPY - Insert into Body Tag: <BODY 'CODE HERE'>

Uncle Jim's Javascript Examples: Scroll and Zoom