Toutela - Le site des Internautes

Menu

Espace membres

Livre d'Or

Interactif

Sonneries et Logos

Karaoké Mp3

Programmes Télés

Webmaster

Hébérgement Web

Nom de domaine

Référencement

Créations graphique

Downloads

Kits graphiques

Fonds d'écrans

Ressources

Générateurs Métas

Contact

Devenir Annonceur

Partenaire

Votre logo ici ?

Coup de projecteur sur vos pages !!

Script posté par :

Webmaster - (Site : Toutela)
Vous aussi, postez vos scripts en cliquant ici.

Description

Faire découvrir la page petit à petit par le visiteur, noire au départ, avec un simple cercle visible, le clic de l'utilisateur aggrandit la visibilité jusqu'à ce que toute la page soit visible.

Exemple :

Le code :

Entre <HEAD> et </HEAD> :

<script language="JavaScript">
ns4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;

function makeObj(obj,nest,x,y) {
nest = (!nest) ? '' : 'document.' + nest + '.';
this.css = (ns4) ? 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;
}

function b_clipTo(t,r,b,l) {
if (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 + "," + r + "," + b + "," + l + ")";
}
}

function b_clipIt(tstop,rstop,bstop,lstop,step,fn) {
if (!fn) fn = null;
var clipval = new Array();
if (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 + "')",50);
}
else {
this.clipactive = false;
eval(fn);
}
}

function spotInit() {
pageWidth = (ns4) ? innerWidth : document.body.offsetWidth;
pageHeight = (ns4) ? innerHeight : document.body.offsetHeight;
oExCont = new makeObj('page');
oExCont.clipTo(0,0,0,0);
if (ie4) {
oExCont.css.width = pageWidth + 10;
oExCont.css.height = pageHeight + 10;
}
oCircle = new makeObj('cercle','page');
oCircle.css.visibility = "visible";
if (ns4) {
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = moveCircle;
}

function moveCircle(e) {
x = (ns4) ? e.pageX : event.x;
y = (ns4) ? e.pageY : event.y;
oExCont.clipTo(y - 100,x + 100,y + 100,x - 100);
oCircle.css.left = x - 100;
oCircle.css.top = y - 100;
}

function showCont() {
document.onmousemove = null;
oCircle.css.visibility = "hidden";
oExCont.clipIt(-20,pageWidth + 20,pageHeight + 20,-20,20);
}

onload = spotInit;
&:t;/script>

<style>
#cercle { position: absolute; z-index: 500; visibility: hidden; }
#page { background-color: #FFFFFF; position: absolute; top: -1px; left: -1px; visibility: visible; clip: rect(0 auto auto auto); layer-background-color: #FFFFFF; }
</style>

Entre <BODY> et </BODY> :

Newsletter

Publicité

Toutela