Livello di difficoltà: |
|
Dynamic Html è una tecnologia approvata dal W3C per la creazione di siti Web dinamici ed interazioni client side con l'utente. In questa sezione sono disponibili centinaia di esempi ed arretrati della mailing list "Una demo Dhtml a settimana".
|
| |
Un faro che illumina il documento
Arretrati lista "Una demo Dhtml a settimana"
CONOSCENZE CONSIGLIATE PER QUESTO ARTICOLO: Html, Css, Javascript
COMPATIBILITÀ: MsIe, Netscape
FILES ESTERNI: Nessuno
Visualizza la demo
Scarica la demo
Una delle peculiarità di Dynamic Html è la possibilità di stupire i
navigatori con effetti di indubbio valore e bellezza grafica. La demo che
commenteremo questa settimana, serve appunto per lasciare a bocca aperta i
propri visitatori con un effetto facilmente applicabile a un qualsiasi
documento ipertestuale.
Lo script, si compone di un solo file Html e di uno gif, ognuno dei quali
fondamentale.
Ma vediamo come procedere. All'interno del tag <head> vai inserito il foglio
di stile utile a posizionare e gestire gli oggetti della pagina:
<style>
TD{font-family:arial,helvetica; font-size:10pt}
BODY{background-color:black}
A{color:Navy; text-decoration:none}
A:hover{color:red}
A:visited:{color:#808080}
#divExCont{position:absolute; left:-1; top:-1; clip:rect(0,0,0,0);
layer-background-color:white; background-color:white}
#divCircle{position:absolute; z-index:500; visibility:hidden; width:200}
</style>
Tra le righe, si possono notare alcuni parametri molto importanti come le
stringhe:
BODY{background-color:black}
#divExCont{position:absolute; left:-1; top:-1; clip:rect(0,0,0,0);
layer-background-color:white; background-color:white}
Che servono a impostare il colore di sfondo (background-color:black = colore
di sfondo:nero),
il colore della parte illuminata dal "faro" e il colore dello sfondo una
volta cliccato con il mouse in qualunque parte del documento
(layer-background-color:white; background-color:white = colore della parte
illuminata:bianco; colore dello sfondo una volta cliccato sul
documento:nero)
Una volta inserito il Css, bisogna osservare lo script seguente:
<script>
/***************************************************************************
*****
This script is made by and copyrighted to Thomas Brattli at www.bratta.com
Visit www.bratta.com/dhtml for more great scripts. This may be used freely
as
long as this msg is intact! I'd appriciate any links to my page.
****************************************************************************
****/
// Easy browsercheck.
var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;
/***************************************************************************
***
Making the clipobject part
****************************************************************************
**/
function makeObj(obj,nest,x,y){
nest=(!nest) ? '':'document.'+nest+'.'
this.css=(n) ?
eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')
this.clipIt=b_clipIt; this.clip=b_clip;
this.clipTo=b_clipTo;
this.obj = obj + "Object"; eval(this.obj + "=this")
return this
}
// Clip part
function b_clipTo(t,r,b,l){
if(n){this.css.clip.top=t;this.css.clip.right=r;this.css.clip.bottom=b;this.
css.clip.left=l
}else{
this.css.clip="rect("+t+","+r+","+b+","+l+")";
}
}
function b_clipIt(tstop,rstop,bstop,lstop,step,fn){
if(!fn) fn=null
var clipval=new Array()
if(ie) {
clipval=this.css.clip
clipval=clipval.slice(5,clipval.length-1);
clipval=clipval.split(' ')
for(var i=0;i<4;i++){clipval[i]=parseInt(clipval[i])}
}else{
clipval[0]=this.css.clip.top
clipval[1]=this.css.clip.right
clipval[2]=this.css.clip.bottom
clipval[3]=this.css.clip.left
}
totantstep=Math.max(Math.max(Math.abs((tstop-clipval[0])/step),Math.abs((rst
op-clipval[1])/step)),
Math.max(Math.abs((bstop-clipval[2])/step),Math.abs((lstop-clipval[3])/step)
))
if(!this.clipactive)
this.clip(clipval[0],clipval[1],clipval[2],clipval[3],(tstop-clipval[0])/tot
antstep,
(rstop-clipval[1])/totantstep,(bstop-clipval[2])/totantstep,
(lstop-clipval[3])/totantstep,totantstep,0, fn)
}
function
b_clip(tcurr,rcurr,bcurr,lcurr,tperstep,rperstep,bperstep,lperstep,totantste
p,antstep, fn){
tcurr=tcurr+tperstep; rcurr=rcurr+rperstep
bcurr=bcurr+bperstep; lcurr=lcurr+lperstep
this.clipTo(tcurr,rcurr,bcurr,lcurr)
if(antstep<totantstep){
this.clipactive=true
antstep++
setTimeout(this.obj+".clip("+tcurr+","+rcurr+","+bcurr+","+lcurr+","+tperste
p+","
+rperstep+","+bperstep+","+lperstep+","+totantstep+","+antstep+",'"+fn+"')",
50)
}else{
this.clipactive=false
eval(fn)
}
}
/***************************************************************************
***
Initiating the page and the clip objects.
****************************************************************************
**/
function spotInit(){
pageWidth=(n)?innerWidth:document.body.offsetWidth;
pageHeight=(n)?innerHeight:document.body.offsetHeight;
oExCont=new makeObj('divExCont')
oExCont.clipTo(0,0,0,0)
if(ie){oExCont.css.width=pageWidth+10;oExCont.css.height=pageHeight+10}
oCircle=new makeObj('divCircle','divExCont')
oCircle.css.visibility="visible"
if(n)document.captureEvents(Event.MOUSEMOVE)
document.onmousemove=moveCircle;
}
function moveCircle(e){
x=(n)?e.pageX:event.x;y=(n)?e.pageY:event.y
oExCont.clipTo(y-100,x+100,y+100,x-100)
oCircle.css.left=x-100;oCircle.css.top=y-100
}
// This is being called when someone clicks the circle.
function showCont(){
document.onmousemove=null
oCircle.css.visibility="hidden"
oExCont.clipIt(-20,pageWidth+20,pageHeight+20,-20,20)
}
onload=spotInit;
</script>
Questa parte del codice, è fondamentale per il coretto funzionamento
dell'animazione e non va modificata in nessuna parte.
Ma vediamo di osservare il <body> e soprattutto dove inserire il testo e le immagini che dovranno apparire solo quando illuminate dal faro:
<BODY bgcolor="Black" marginwidth="0" scroll="NO"
onscroll="window.scroll(0,0)" marginheight="0">
<div id="divExCont">
<div id="divCircle">
<a href="#" onclick="showCont();
if(ie)this.blur()"><img
src="black_circle.gif" width=234 height=241 border="0"></a>
</div>
E' QUI CHE BISOGNA INSERIRE IL TESTO CHE DOVRA' APPARIRE SOLO QUANDO
ILLUMINATE DAL FARO
</div>
</BODY>
</HTML>
E' ormai palese la posizione in cui inserire testo e/o immagini.
|
