Lo script che presentiamo permette di illuminare solo un piccolo cerchio (corrispondente alla posizione del mouse) nella pagina scura, creando un effetto molto simile a quello dei proiettori da scena di tipo spot. Con un click sarà poi possibile illuminare l'intera pagina.
Il codice è molto semplice da configurare e non richiede perticolari modifiche. È compatibile con tutti i principali browser in circolazione.
- esempio.htm
- spotlight_circle.gif
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Inseriamo il seguente foglio di stile tra i tag <head> della pagina:
<style type="text/css">
#divExCont {position:absolute; left:0px; top:0px; clip:rect(0px 0px 0px 0px);
layer-background-color:#ffffff; background-color:#ffffff;}
#divCircle {position:absolute; z-index:500; visibility:hidden; width:170px;}
body {background-color:#000000; overflow:hidden;}
</style>
Per la corretta riuscita dell'effetto grafico, si consiglia di non modificare lo stile di questi elementi.
Sempre tra i tag <head> della pagina, subito sotto il foglio di stile, inseriamo il seguente codice JavaScript:
<script language="javascript" type="text/javascript">
/*********************************
Spotlight
* Copyright (C) 2001 Thomas Brattli
* 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 Thomas Brattli
*
* Script date: 09/04/2001 (keep this date to check versions)
*********************************/
function lib_bwcheck(){ // Controllo browser (necessario)
this.ver = navigator.appVersion;
this.agent = navigator.userAgent;
this.dom = document.getElementById? 1: 0;
this.opera5 = (navigator.userAgent.indexOf("Opera")> -1 &&
document.getElementById)? 1: 0;
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=lib_bwcheck()
/*** Variabili da impostare ***/
sCirclewidth = 168; // Larghezza della clip
sCircleheight = 168; // Altezza della clip
sStarty = 200; // Coordinata y iniziale
sStartx = 200; // Coordinata x iniziale
clipSpeed = 20; // Numero di pixel per ogni passo dell'animazione
/*********************************
Parte che crea l'oggetto clip
*********************************/
function makeObj(obj, nest, x, y){
nest = (!nest) ? "": 'document.' + nest + '.';
this.css = bw.dom? document.getElementById(obj).style: bw.ie4?
document.all[obj].style: bw.ns4? eval(nest + "document.layers." + obj): 0;
this.evnt = bw.dom? document.getElementById(obj): bw.ie4? document.all[obj]:
bw.ns4? eval(nest+ "document.layers." + obj): 0;
this.clip = b_clip;
this.clipIt = b_clipIt;
this.clipTo = b_clipTo;
this.obj = obj + "Object";
eval(this.obj + "=this");
return this;
}
// Unità di misura che viene aggiunta quando viene impostata la posizione o la
dimensione di un layer.
var px = bw.ns4 || window.opera? "": "px";
// parte clip
function b_clipTo(t, r, b, l){
if (bw.ns4){
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 + "px " + r + "px " + b + "px " + l + "px)";
}
}
function b_clipIt(tstop, rstop, bstop, lstop, step, fn){
if (!fn) fn = null;
var clipval = new Array();
if (bw.dom || bw.ie4) {
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((rstop - 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]) / totantstep,
(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, totantstep, 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 + "," + tperstep + ","
+ rperstep + "," + bperstep + "," + lperstep + "," + totantstep + "," +
antstep + ",'" + fn + "')", 40);
}else{
this.clipactive = false;
eval(fn);
}
}
/*****************************
Inizializzazione della pagina e dell'oggetto clip.
****************************/
function spotInit(){
pagewidth = (bw.ns4 || bw.ns6)? innerwidth: document.body.clientwidth;
pageheight = (bw.ns4 || bw.ns6)? innerheight: document.body.clientheight;
oExCont = new makeObj('divExCont');
if (bw.dom || bw.ie4){
oExCont.css.width = pagewidth + px;
oExCont.css.height = pageheight + px;
}
oCircle = new makeObj('divCirclè, 'divExCont');
oExCont.clipTo(sStarty, sStartx + sCirclewidth, sStarty + sCircleheight,
sStartx);
oCircle.css.left = sStartx + px;
oCircle.css.top = sStarty + px;
oCircle.css.visibility = "visible";
if (bw.ns4) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = moveCircle;
}
function moveCircle(e){
x = (bw.ns4 || bw.ns6)? e.pageX: event.x;
y = (bw.ns4 || bw.ns6)? e.pageY: event.y;
oExCont.clipTo(y - sCircleheight / 2, x + sCirclewidth / 2, y + sCircleheight
/ 2, x - sCirclewidth / 2);
oCircle.css.left = x - sCirclewidth / 2 + px;
oCircle.css.top = y - sCircleheight / 2 + px;
}
// Questo viene chiamato quando qualcuno clicca sul cerchio.
function showCont(){
document.onmousemove = null;
oCircle.css.visibility = "hidden";
oCircle.css.left = 0 + px;
oCircle.css.top = 0 + px;
oExCont.clipIt(-clipSpeed, pagewidth + clipSpeed, pageheight + clipSpeed, -
clipSpeed, clipSpeed, 'oExCont.css.overflow="auto"');
}
if (bw.bw) onload = spotInit;
</script>
Vediamo quali sono le variabili che possono essere personalizzate:
sCirclewidth = 168;
imposta la larghezza del cerchio luminoso. Corrisponde alla larghezza dell'immagine.
sCircleheight = 168;
imposta l'altezza del cerchio luminoso. Corrisponde all'altezza dell'immagine.
sStarty = 200;
sStartx = 200;
impostano le coordinate (rispettivamente y e x) in cui il cerchio deve comparire al caricamento della pagina.
clipSpeed = 20;
indica la velocità dell'animazione
Le restanti parti del suddetto codice JavaScript non necessitano di personalizzazione e possono essere lasciate invariate.
A questo punto inseriamo il seguente codice HTML all'interno dei tag <body> della pagina:
<div id="divExCont">
<div id="divCircle">
<a href="#" onclick="showCont(); return false"
onfocus="if(this.blur)this.blur()">
<img src="spotlight_circle.gif" width="170" height="170" alt=""
border="0"/>
</a>
</div>
[Corpo della pagina]
</div>
Tutto il codice HTML della nostra pagina dovrà essere inserito in corrispondenza di "[corpo della pagina]", dovrà cioè essere compreso all'interno dei tag <div> dell'elemento "divExCont", che rappresenta il contenitore esterno.
L'elemento "divCircle" rappresenta, invece, il riquadro del cerchio. Possiamo lasciare il suo codice invariato. Se però vogliamo impedire che l'utente cliccando col mouse illumini completamente la pagina, ci basta eliminare la stringa onclick="showCont(); return false".
Altre modifiche non sono necessarie.
