Tulos

Varsin muunneltava efekti (sivun latautumisen yhteydessä), joka voidaan myös aktivoida vasta käyttäjän toimesta.

Koodi

Tämä tulee HEAD-osastoon

<style type="text/css">
#divZoom {
position:absolute;
left:0px;
top:100px;
width:100%;
text-align:center;
} 
</style>
<script type="text/javascript">
<!--
/**********************************************************************************   
ZoomFade 
*   Copyright (C) 2001 <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli<\/a>
*   This script was released at DHTMLCentral.com
*   Visit for more great scripts!
*   This may be used and changed freely as long as this msg is intact!
*   We will also appreciate any links you could give us.
*
*   Made by <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli<\/a> 
*********************************************************************************/
// Modified: Osmo Saarikumpu 2002-03-07
// Muunneltavat osuudet alkavat:

// viestisi (muunna, lisää tai poista osia tarpeen mukaan):

zText=new Array('weppi','pakki','com','weppipakki.com')
  
// värit (ensimmäinen koskee zoomia, loput fadea):

zColor=new Array('#202020','#424242','#8E8E8E','#C2C2C2','#E8E8E8')
 
var zEndSize=70   // fontin loppukoko kuvapisteinä
var zSpeed=40     // zoomin nopeus
var zAddSize=1    // lisäystä fonttikokoon
var zFadeSpeed=99 // värin vaihtumisnopeus

var zFont='arial black,arial,helvetica,sans-serif' // fonttimääritys

var zHide=true    // true = lopuksi piilotetaan, false = jätetään paikoilleen
var zHideWait=2700// odotusaika millisekuntteina ennen piilotusta
var zStartSize=10 // fontin alkukoko kuvapisteinä

// mahdollinen loppukoodi suoritettavaksi
// esim.: "location.href='uusisivu.htm'":

var zEndCode=""   // huomaa lainausmerkit

// määritetään alkamaan sivun latauduttua: 

onload=zoomInit;

// kommentoi yo. rivi pois, jos tahdot aktivoida efektin
// vaikkapa linkistä (esimerkki alempana BODY:ssa)

// muunneltavat osuudet lopuvat tähän!

function lib_bwcheck(){ //Browsercheck (needed)
  this.ver=navigator.appVersion
  this.agent=navigator.userAgent
  this.dom=document.getElementById?1:0
  this.opera5=this.agent.indexOf("Opera 5")>-1
  this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0; 
  this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
  this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
  this.ie=this.ie4||this.ie5||this.ie6
  this.mac=this.agent.indexOf("Mac")>-1
  this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0; 
  this.ns4=(document.layers && !this.dom)?1:0;
  this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
  return this
}
var bw=new lib_bwcheck()

/* You shouldn't really have to set anything below this point */

//Object functions
function makeZoomObj(obj,font,size,endsize,color,text,zspeed,fadespeed,addsize,hide,hidewait,endcode){
    this.css=bw.dom? document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?document.layers[obj]:0; 
    this.writeref=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?document.layers[obj].document:0; 
  this.zoomWrite=b_zoomWrite; this.zoomIt=b_zoomIt; this.fadeIt=b_fadeIt; this.zoomFade=b_zoomFade;
  this.font=font; this.color=new Array(); this.color=eval(color); this.text=new Array(); this.text=eval(text);
  this.zspeed=zspeed; this.fadespeed=fadespeed; this.addsize=addsize; this.endcode=endcode
  this.hide=hide; this.hidewait=hidewait; this.size=size; this.startsize=size; this.endsize=endsize
  if(size<endsize){this.way="<"; this.addsize=this.addsize
    }else{this.way=">"; this.addsize=-this.addsize}
  if(bw.dom || bw.ie4){ //Setting the style properties
    this.css.fontFamily=this.font; this.css.fontSize=this.size+"px"; this.css.color=this.color[0]
  }
  this.obj = obj + "Object";  eval(this.obj + "=this"); return this
}
function b_zoomFade(num){
  if(num<this.text.length){
    this.size=this.startsize
    this.zoomIt(num,'this.zoomFade('+(num+1)+')')
  }
  else if(num==this.text.length) this.fadeIt(0,'this.zoomFade('+(num+1)+')')
  else if(this.hide) setTimeout(this.obj+".css.visibility='hidden'; eval("+this.obj+".endcode)",this.hidewait)
}
function b_zoomWrite(num,cnum){
  if(bw.ns4){
    this.writeref.write('<span style="text-align:center; font-size:' +this.size+'px; font-family:'+this.font+'; color:'+this.color[cnum]+'">'+this.text[num]+'<\/span>')
    this.writeref.close()
  }else this.writeref.innerHTML="<center>"+this.text[num]+"<\/center>"
}
function b_zoomIt(num,fn){
  if(eval(this.size+this.way+this.endsize)){
    if(this.size==this.startsize || bw.ns4) this.zoomWrite(num,0)
    if(bw.dom || bw.ie4) this.css.fontSize=this.size+"px"
    this.size=this.size+this.addsize
    setTimeout(this.obj+".zoomIt("+num+",'"+fn+"')",this.zspeed)
  }else eval(fn)  
}
function b_fadeIt(num,fn){
  if(num<this.color.length){
    if(bw.ns4) this.zoomWrite(this.text.length-1,num)
    else this.css.color=this.color[num]
    num++
    setTimeout(this.obj+".fadeIt("+num+",'"+fn+"')",this.fadespeed)
  }else eval(fn)  
}
/*Initiates the object, shows it and starts the zoom */
function zoomInit(){
  if(bw.bw){
    oZoom=new makeZoomObj('divZoom',zFont,zStartSize,zEndSize,'zColor','zText',zSpeed,zFadeSpeed,zAddSize,zHide,zHideWait,zEndCode)
    oZoom.zoomFade(0)
    oZoom.css.visibility='visible'
  }
}
//-->
</script>

Tämä tulee BODY-osastoon


<div id="divZoom" align="center">
<!--Tämä DIV on tarpeellinen--></div>

<p>Varsin muunneltava efekti (sivun latautumisen yhteydessä),
joka voidaan myös aktivoida vasta <a href="javascript:void('0');"
 onclick="zoomInit(); return false">käyttäjän toimesta.</a></p>
Weppipakin kotisivulle