beeldcontrole

JavaScripts knippen en plakken

Op deze website vind je javascripts die je door eenvoudig knippen en plakken aan jouw site kunt toevoegen.

Home CSS DHTML Forum E-mail Sitezoeker Links

BEELDCONTROLE

uitzoomen inzoomen naar rechts naar links naar onder naar boven
(muisover = snelheid x1 - muisknop ingedrukt = snelheid x 10)

1. Kopieer deze code en plaats ze in het HEAD-gedeelte van je pagina :

snelheid1=1
snelheid2=10
minBeeldafmeting=1 // 0 = tot venstergrootte, 1 = tot afbeelding grootte

timer=""
actief=snelheid1

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

function init(z){
if(!z){z=0}
containerBreedte=parseInt(document.getElementById("container").style.width)
containerHoogte=parseInt(document.getElementById("container").style.height)
obj=document.getElementById("afbeelding")
obj.src=pic[z].src
beeldBreedte=pic[z].width
beeldHoogte=pic[z].height
obj.style.left=0
obj.style.top=0
pos_x=0
pos_y=0
nu_links=0
nu_boven=0
obj.style.width=beeldBreedte
obj.style.height=beeldHoogte}

function horizontaal(n){
nu_links=parseInt(obj.style.left)
if(n==0){nu_links-=actief}
if(n==1){nu_links+=actief}
if(nu_links> -actief){
nu_links=0
stop()}
if(nu_links < containerBreedte - obj.offsetWidth+actief){
nu_links = containerBreedte - obj.offsetWidth
stop()}
obj.style.left=nu_links + 'px'
timer=setTimeout("horizontaal("+n+")",50)}

function verticaal(n){
nu_boven=parseInt(obj.style.top)
if(n==0){nu_boven-=actief}
if(n==1){nu_boven+=actief}
if(nu_boven> -actief){
nu_boven=0
stop()}
if(nu_boven < containerHoogte - obj.offsetHeight+actief){
nu_boven = containerHoogte - obj.offsetHeight
stop()}
obj.style.top=nu_boven + 'px'
timer=setTimeout("verticaal("+n+")",50)}

function stop(){
clearTimeout(timer)}

function zoom(n){
nu_links=parseInt(obj.style.left)
nu_boven=parseInt(obj.style.top)
nu_breed=obj.offsetWidth
nu_hoog=obj.offsetHeight
if(n==0){
nu_breed-=actief
nu_hoog-=actief}
if(n==1){
nu_breed+=actief
nu_hoog+=actief}
obj.style.width=nu_breed+'px'
obj.style.height=nu_hoog+'px'
timer=setTimeout("zoom("+n+")",50)
if(minBeeldafmeting==0){ 
if(nu_breed<beeldBreedte){obj.style.width=beeldBreedte}
if(nu_hoog<beeldHoogte){obj.style.height=beeldHoogte}
if(nu_links>0){
nu_links=0
obj.style.left=nu_links}
if(nu_boven>0){
nu_boven=0
obj.style.top=nu_boven}
if(nu_links<-obj.offsetWidth+containerBreedte){
nu_links=-obj.offsetWidth+containerBreedte
obj.style.left=nu_links}
if(nu_boven<-obj.offsetHeight+containerHoogte){
nu_boven=-obj.offsetHeight+containerHoogte
obj.style.top=nu_boven}}
if(minBeeldafmeting==1){ 
if(obj.offsetWidth<containerBreedte){
obj.style.width=containerBreedte
obj.style.left=0}
if(obj.offsetHeight<containerHoogte){
obj.style.height=containerHoogte
obj.style.top=0}
if(nu_links<0&&obj.offsetWidth<containerBreedte+ -nu_links){
nu_links+=actief
obj.style.left=nu_links}
if(nu_boven<0&&obj.offsetHeight<containerHoogte+ -nu_boven){
nu_boven+=actief
obj.style.top=nu_boven}}}

function snelheid(s){
if(s==1){actief=snelheid1}
if(s==2){actief=snelheid2}
}
</script>

2. Kopieer deze code en plaats ze in het BODY-gedeelte van je pagina :

<center>


<div id="container" style="width:266px;height:186px;overflow:hidden;">
<IMG id="afbeelding" src="" style="position:relative;left:0px;top:0px;display:block">
</div>
<br>
<a href="#" onmouseover="zoom(0)" onmouseout="stop()" onmousedown="snelheid(2)" onmouseup="snelheid(1)">uitzoomen</a>
  
<a href="#" onmouseover="zoom(1)" onmouseout="stop()" onmousedown="snelheid(2)" onmouseup="snelheid(1)">inzoomen</a>
  
<a href="#" onmouseover="horizontaal(0)" onmouseout="stop()" onmousedown="snelheid(2)" onmouseup="snelheid(1)">
naar rechts</a>
  
<a href="#" onmouseover="horizontaal(1)" onmouseout="stop()" onmousedown="snelheid(2)" onmouseup="snelheid(1)">naar links</a>
  
<a href="#" onmouseover="verticaal(0)" onmouseout="stop()" onmousedown="snelheid(2)" onmouseup="snelheid(1)">naar onder</a>
  
<a href="#" onmouseover="verticaal(1)" onmouseout="stop()" onmousedown="snelheid(2)" onmouseup="snelheid(1)">naar boven</a>
<br>
(muisover = snelheid x1 - muisknop ingedrukt = snelheid x 10)
<br><br>
<a href="#" onclick="init(0)"> <img src="foto1.jpg" width="60" height="40" border="0" alt=""> </a>
<a href="#" onclick="init(1)"> <img src="foto2.jpg" width="60" height="40" border="0" alt=""> </a>
<a href="#" onclick="init(2)"> <img src="foto3.jpg" width="60" height="40" border="0" alt=""> </a>
<a href="#" onclick="init(3)"> <img src="foto4.jpg" width="60" height="40" border="0" alt=""> </a>
<a href="#" onclick="init(4)"> <img src="foto5.jpg" width="60" height="40" border="0" alt=""> </a>
</center>

3. Plaats binnenin de BODY-tag: <body onload="init()">

Copyright: Het internet is van iedereen, de volledige inhoud van deze site kan door iedereen vrij gebruikt worden.