Zwevende en draaiende foto

Zwevende en draaiende foto

Dit is een hele mooie en originele manier om je foto's te laten zien! Zwevend en draaiend over je scherm !

Je kunt kiezen of je de vorm ovaal of rechthoekig wilt, je kunt een foto ook doorr laten linken naar een bepaalde website, hoe je dat moet doen kun je lezen in het script, daar heb ik de uitleg bijgeschreven.

Plaats onderstaande code tussen de <head> tags van je pagina:
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/> <style> v\:* { behavior: url(#default#VML); } </style>

Plaats onderstaande code net voor je laatste body tag, dus voor </body>
<SCRIPT> // de plaatjes die je wilt gebruiken var slideurl=new Array() slideurl[0]="plaatje.jpg" slideurl[1]="plaatje.jpg" slideurl[2]="plaatje.jpg" // de link bij het plaatje // wil je geen link openen dan vul gebruik je "#" var slidelink=new Array() slidelink[0]="http://www.noukie.nl" slidelink[1]="#" slidelink[2]="http://www.kadootje.net/forum/" // de target // hoe moet je link openen "_blank" of "_top" of "_parent" of "_self" var slidetarget=new Array() slidetarget[0]="_blank" slidetarget[1]="_self" slidetarget[2]="_blank" // de breedte van de rand (pixels) var backdepth=6 // de kleur van de rand var fillcolor="#666666" // hoelang moet ie stilstaan? var standstill=3 // de orm van het figuur // "oval" of "rect" var imageform="oval" // vanaf hier niets veranderen var slidewidth=1 var slideheight=1 var ns6=document.getElementById&&!document.all?1:0 var opera=navigator.userAgent.match(/Opera/) var ie5=document.getElementById&&document.all&&!opera?1:0 standstill*=1000 var floatingspeed=1 var tempo=20 var numberofimages=slideurl.length-1 var stepx=new Array() var stepy=new Array() for (i=0;i<=numberofimages;i++) { stepx[i]=randommakerNS(floatingspeed) stepy[i]=randommakerNS(floatingspeed) } var imgwidth=new Array() var imgheight=new Array() for (i=0;i<=numberofimages;i++) { imgwidth[i]=10 imgheight[i]=10 } var x,y var marginbottom var marginleft=0 var margintop=0 var marginright var timer var i_fadestrength=new Array() var i_fadestep=new Array() var i_fadenow=new Array() var i_fadenowmax=new Array() for (i=0;i<=slideurl.length;i++) { i_fadenowmax[i]=2 i_fadestrength[i]=randommakerNS(99) i_fadestep[i]=1 i_fadenow[i]=0 } var spancontent=new Array() var i_spancontent=0 var imgpreload=new Array() for (i=0;i<=slideurl.length;i++) { imgpreload[i]=new Image() imgpreload[i].src=slideurl[i] } for (i=0;i<=numberofimages;i++) { spancontent[i]="<a href='"+slidelink[i]+"' target='"+slidetarget[i]+"'><img src='"+slideurl[i]+"' border='0'></a>" } var i_angle1=0 var i_size=1 var i_pic=0 var posleft=0 var postop=0 var x_extrusionangle=0 var y_extrusionangle=0 var x_rotationcenter=0 var y_rotationcenter=0 var pagewidth var pageheight function initNS() { marginbottom=window.innerHeight-11 marginright=window.innerWidth-11 var thisspan=document.getElementById('span0') thisspan.innerHTML=spancontent[0] var thisspan=document.getElementById('span0') imgwidth[0]=parseInt(thisspan.offsetWidth) imgheight[0]=parseInt(thisspan.offsetHeight) var maxleftstart=marginright-imgwidth[0] var maxtopstart=marginbottom-imgheight[0] var thisspan=document.getElementById('span0').style thisspan.left=parseInt(thisspan.left)+randommakerNS(maxleftstart) thisspan.top=parseInt(thisspan.top)+randommakerNS(maxtopstart) thisspan.visibility="visible" checkmovementNS() } function randommakerNS(range) { rand=Math.floor(range*Math.random()) if (rand==0) {rand=Math.ceil(range/2)} return rand } function checkmovementNS() { checkpositionNS() movepicturesNS() timer=setTimeout("checkmovementNS()",tempo) } function movepicturesNS() { var thisspan=document.getElementById('span0').style thisspan.left=parseInt(thisspan.left)+stepx[0] thisspan.top=parseInt(thisspan.top)+stepy[0] i_fadenow[0]++ if (i_fadenow[0]>=i_fadenowmax[0]) { i_fadenow[0]=0 if (i_fadestrength[0]>=100) {i_fadestep[0]=i_fadestep[0]*-1} else if (i_fadestrength[0]<=0) { i_fadestep[0]=i_fadestep[0]*-1 i_spancontent++ if (i_spancontent>=spancontent.length) {i_spancontent=0} document.getElementById('span0').innerHTML=spancontent[i_spancontent] } } i_fadestrength[0]+=i_fadestep[0] document.getElementById('span0').style.MozOpacity=Math.round(i_fadestrength[0])/100 } function checkpositionNS() { imgwidth[0]=parseInt(document.getElementById('span0').offsetWidth) imgheight[0]=parseInt(document.getElementById('span0').offsetHeight) var thisspan=document.getElementById('span0').style var leftx=parseInt(thisspan.left) var topy=parseInt(thisspan.top) if (leftx>marginright-imgwidth[0]-floatingspeed) { thisspan.left=leftx-Math.abs(stepx[0]+1) stepx[0]=randommakerNS(floatingspeed)*-1 } if (leftx<marginleft) { thisspan.left=leftx+Math.abs(stepx[0]) stepx[0]=randommakerNS(floatingspeed) } if (topy>marginbottom-imgheight[0]-floatingspeed) { thisspan.top=topy-Math.abs(stepy[0]) stepy[0]=randommakerNS(floatingspeed)*-1 } if (topy<margintop) { thisspan.top=topy+Math.abs(stepy[0]) stepy[0]=randommakerNS(floatingspeed) } } function initIE() { var i_preload=0 for (i=0;i<=slideurl.length-1;i++) { var imgref=eval("document.n"+i) if (imgref.complete) {i_preload++} } if (i_preload>=slideurl.length-1) { slidewidth=document.getElementById('spn1').offsetWidth slideheight=document.getElementById('spn1').offsetHeight pagewidth=document.body.clientWidth pageheight=document.body.clientHeight document.getElementById('rectid').style.width=slidewidth document.getElementById('rectid').style.height=slideheight posleft=(pagewidth-slidewidth)/2 postop=(pageheight-slideheight)/2 x_rotationcenter=(posleft/slidewidth)/2 y_rotationcenter=(postop/slideheight)/2 var rotationcenter=0+","+y_rotationcenter+","+x_rotationcenter document.getElementById('rectid').style.left=posleft document.getElementById('rectid').style.top=postop document.getElementById('extrusionid').rotationcenter=rotationcenter rotateIE() } else { var timer=setTimeout("initIE()",200) } } function rotateIE() { i_angle1+=1 if (i_angle1>=360) { i_angle1=0 } if (i_angle1==127) { i_pic++ if (i_pic>=slideurl.length) {i_pic=0} document.getElementById('fillid').src=slideurl[i_pic] } document.getElementById('rectid').style.rotation=i_angle1 document.getElementById('extrusionid').rotationangle=i_angle1+","+i_angle1 var timer=setTimeout("rotateIE()",30) } function openpageIE() { if (slidetarget[i_pic]=="_blank") { window.open(slidelink[i_pic]) } else if (slidetarget[i_pic]=="_self") { document.location.href(slidelink[i_pic]) } else if (slidetarget[i_pic]=="_top" || slidetarget[i_pic]=="_parent") { top.location.href(slidelink[i_pic]) } } if (ns6) { document.write("<span id='span0' style='position:absolute;top:0px;left:0px;filter:alpha(opacity=0);-moz-opacity:0'></span>") document.close() window.onload=initNS } if (ie5) { document.write('<div id="preloadimages" style="position:absolute;left:0px;top:-5px;visibility:hidden">') for (i=0;i<=slideurl.length-1;i++) { document.write('<span id="spn'+i+'" style="position:absolute;width:2px;left:0px;top:0px;">') document.write('<img src="'+slideurl[i]+'" name="n'+i+'">') document.write('</span>') } document.write('</div>') document.write('<v:'+imageform+' id="rectid" style="position:absolute;top:0;left:0;width:'+slidewidth+';height:'+slideheight+'" onClick="openpageIE()">') document.write('<v:extrusion id="extrusionid" on="true" type="perspective" color="'+fillcolor+'" rotationcenter="0,0,0" backdepth="'+backdepth+'" diffusity="2.5" metal="true">') document.write('</v:extrusion>') document.write('<v:fill id="fillid" opacity="100%" color="'+fillcolor+'" type="frame" src="'+slideurl[0]+'"/>') document.write('</v:'+imageform+'>') window.onload=initIE } </script>