Un arrière-plan de couleur qui tourne. IE4+ seul

Superbe script qui fait tourner un arrière-plan dans le sens des aiguilles d'une montre.

    1 - Copiez avant entre les balises <head> et </head> où bon vous semble :

Téléchargez ici le script ( 2 Ko )

<SCRIPT>
// saved from http://dev-web.tripod.com/rotate.htm
// La vitesse de rotation (+ = +vite)
// -x égal sens inverse des aiguilles
dspeed=1;
// Autre valeur égal rotation 3D
dspin=0;
////////////////////////////////////////////////
drev="";
ddirec="up"
drun="no"
dflip="left"

function spinit() {
        spinny.rotate(0,dspin,drev + dspeed);
        window.setTimeout("spinit()", 1, "JavaScript");
}

function run() {
        if (ddirec=="up") {
                dspeed++
                if (dspeed == 10) { ddirec="down" }
        }
        else {
                dspeed--
                if (dspeed == 1) { ddirec="up" }
        }
        var runtimer = setTimeout('run()',100);
}

function chspeed(nspeed) {
        if (drun == "no") { dspeed=nspeed }
}

function spin() {
        if (dspin == "0") { dspin = "5" }
        else { dspin = "0" }
}

function reverse() {
        if (drev == "") { drev = "-" }
        else { drev = "" }
}

function runspeed() {
        if (drun == "yes") { drun = "no"; clearTimeout('runtimer'); }
        else { drun = "yes"; var runtimer = setTimeout('run()',100); }
}

function flipper() {
        if (dflip == "left") {
                layout.style.filter = 'fliph(enabled=1)';
                dflip="right";
                layouttext.style.left = "62%";
                }
        else { layout.style.filter = 'fliph(enabled=0)'; dflip="left"; layouttext.style.left = "1%";  }
}
</SCRIPT>

On peut configurer quelques variables au début du script :

    2 - Ajoutez dans le tag du <body> :

<BODY text="#FFFFFF" bgcolor="#000080" link="#FFFFFF" vlink="#FFFFFF" alink="#FF0000" leftMargin="0"  topMargin="0" marginleft="0" margintop="0" onload=spinit()>

Une fois n'est pas coutume, quelques commentaires s'imposent :

    3 - Copiez juste après les balises <body> et </body> :

<SCRIPT>
document.write("<div style='position: absolute; top: 0; left: 0; HEIGHT:100%; WIDTH:100%;'>");
</SCRIPT>
<OBJECT classid=CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6 id=spinny
style="HEIGHT: 100%; WIDTH: 100%">
<PARAM NAME="Line0001" VALUE="SetFillStyle(1)">
<PARAM NAME="Line0002" VALUE="SetLineColor(0,0,150)">
<PARAM NAME="Line0003" VALUE="SetFillColor(0,0,150)">
<PARAM NAME="Line0004" VALUE="Pie(-725,-725,1450,1450,0,30,342)">
<PARAM NAME="Line0005" VALUE="SetFillColor(0,0,150)">
<PARAM NAME="Line0006" VALUE="Pie(-725,-725,1450,1450,0,15,18)">
<PARAM NAME="Line0007" VALUE="SetFillColor(0,0,150)">
<PARAM NAME="Line0008" VALUE="Pie(-725,-725,1450,1450,0,5,54)">
<PARAM NAME="Line0009" VALUE="SetFillColor(0,0,150)">
<PARAM NAME="Line0010" VALUE="Pie(-725,-725,1450,1450,0,35,95)">
<PARAM NAME="Line0011" VALUE="SetFillColor(0,0,150)">
<PARAM NAME="Line0012" VALUE="Pie(-725,-725,1450,1450,0,20,130)">
<PARAM NAME="Line0013" VALUE="SetFillColor(0,0,150)">
<PARAM NAME="Line0014" VALUE="Pie(-725,-725,1450,1450,0,3,140)">
<PARAM NAME="Line0015" VALUE="SetFillColor(0,0,150)">
<PARAM NAME="Line0016" VALUE="Pie(-725,-725,1450,1450,0,30,180)">
<PARAM NAME="Line0017" VALUE="SetFillColor(0,0,150)">
<PARAM NAME="Line0018" VALUE="Pie(-725,-725,1450,1450,0,45,234)">
<PARAM NAME="Line0019" VALUE="SetFillColor(0,0,150)">
<PARAM NAME="Line0020" VALUE="Pie(-725,-725,1450,1450,0,20,270)">
<PARAM NAME="Line0021" VALUE="SetFillColor(0,0,150)">
<PARAM NAME="Line0022" VALUE="Pie(-725,-725,1450,1450,0,10,306)">
</OBJECT>

On peut configurer :

    4 - Votre page normale sera incluse entre des balises <div> et </div> :
Votre page normale sera incluse dans un <DIV> .... </DIV>.

<DIV id=layout style="HEIGHT: 100%; LEFT: 0px; POSITION: absolute; TOP: 0px; WIDTH: 100%">
Votre page normale
</DIV>