« Klick-Fyrverkeri » NinetNet » JavaScript » Fantasiulla Finesser

Låt dina besökare sätta igång ett fyrverkeri när de klickar på sidan! Antingen med symboler, text eller till och med egna bilder! Exempel finns längre ner!

Scriptet fungerar utmärkt i: Internet Explorer och Opera.
Scriptet fungerar inte i: Netscape och Mozilla

Exempel 1 - öppnas i eget fönster. Fler exempel nedan!

Följ de tre enkla stegen nedan för att installera scriptet.

Steg 1

Lägg följande kod mellan <head> och </head> :

<SCRIPT LANGUAGE="JavaScript1.2">
<!-- Original: Matt Gabbert (mgabbert@usrtoday.com) -->
<!-- Web Site: http://www.nolag.com -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var ver = navigator.appVersion;
var dom = document.getElementById ? 1 : 0;
var ie5 = (ver.indexOf("MSIE 5") > -1 && dom) ? 1 : 0;
var n = (document.layers);
var ie = (document.all);

var sparksAflyin = 0;
var totalSparks = 0;
var sparksOn = 1;
function initMouseEvents() {
document.onmousedown = mouseDown;
if (n) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE);
}
function mouseDown(e) {
if (sparksOn) {
var mousex = (n) ? e.pageX : event.x+document.body.scrollLeft;
var mousey = (n) ? e.pageY : event.y+document.body.scrollTop;
if (!sparksAflyin) {
for (var k = 0; k <= 9; k++)
eval('SHOW("sDiv'+k+'")');
sparksAflyin = 1;
totalSparks = 0;
for(i = 0;i <= 9; i++)
eval('moveTo('+i+',0,'+mousex+','+mousey+')');
}
}
}
function moveTo(i,j, mousex, mousey){
if (j < eval('anim_'+i+'_x.length') ){
var tempx = eval('anim_'+i+'_x[j]+mousex');
var tempy = eval('anim_'+i+'_y[j]+mousey');
if (ie) {
if(tempy+30 > (document.body.offsetHeight+document.body.scrollTop))
tempy = document.body.offsetHeight+document.body.scrollTop-30;
if(tempx+30 > (document.body.offsetWidth+document.body.scrollLeft))
tempx = document.body.offsetWidth+document.body.scrollLeft-30;
eval('document.all.sDiv'+i+'.style.left = tempx;');
eval('document.all.sDiv'+i+'.style.top = tempy;');
}
if (n) {
eval('document.layers.sDiv'+i+'.left = tempx;');
eval('document.layers.sDiv'+i+'.top = tempy;');
}
j++;
// timeout: 50 = fireworks speed, larger number = slower speed
setTimeout("moveTo("+i+","+j+","+mousex+","+mousey+")",50)
}
else {
eval('HIDE("sDiv'+i+'")');
totalSparks++;
}
if (totalSparks == 10) {
sparksAflyin = 0;
totalSparks = 0;
}
}
function SHOW(divName){
if (document.all)
eval('document.all.'+divName+'.style.visibility = "visible";');
else if (document.layers)
eval('document.layers["'+divName+'"].visibility = "visible";');
}
function HIDE(divName){
if (document.all)
eval('document.all.'+divName+'.style.visibility = "hidden";');
else if (document.layers)
eval('document.layers["'+divName+'"].visibility = "hide";');
}
anim_0_x=new Array(20,20,10,0,0,0,0,0,0,0,0,0);
anim_0_y=new Array(-20,-40,-60,-80,-60,-40,-20,0,20,40,60,80);
anim_1_x=new Array(20,20,17,36,60,78,90,92,93,98,108,120,133,152,181);
anim_1_y=new Array(-20,-20,-33,-38,-38,-27,-2,25,51,84,113,141,162,212,253);
anim_2_x=new Array(20,20,2,3,4,5,6,7,8,9,10,12,13,15,18);
anim_2_y=new Array(-20,-20,-33,-38,-38,-27,-2,25,51,84,113,141,162,212,253);
anim_3_x=new Array(-20,-20,-2,-1,7,10,18,35,60,102,94,94,93,97,108,111,117,127);
anim_3_y=new Array(-20,-25,-64,-89,-104,-150,-173,-197,-213,-199,-151,-101,-66,-17,27,87,140,189);
anim_4_x=new Array(-20,-20,-10,-39,-30,-69,-64,-138,-154,-200,-181,-209,-191,-207,-203,-213,-202,-221,-211);
anim_4_y=new Array(-20,-20,-28,-51,-79,-100,-135,-154,-193,-183,-149,-134,-89,-60,8,51,107,157,201);
anim_5_x=new Array(-20,-29,-51,-72,-105,-133,-164,-189,-209,-229,-247,-270,-279,-282,-283,-283,-285,-286,-288);
anim_5_y=new Array(-20,-55,-86,-116,-154,-183,-205,-217,-217,-198,-169,-120,-44,-8,40,87,144,190,248);
anim_6_x=new Array(-20,-20,-7,14,44,79,143,186,217,226,234,244,250,259,265,274);
anim_6_y=new Array(-20,-21,-72,-113,-139,-166,-188,-181,-126,-68,-3,54,134,187,215,257);
anim_7_x=new Array(20,20,-3,-9,-13,-27,-33,-44,-54,-66,-77,-95,-107,-136,-150,-160,-164,-168,-171,-172,-172,-176,-175);
anim_7_y=new Array(-20,-26,-43,-63,-89,-116,-145,-169,-201,-222,-240,-253,-254,-245,-220,-195,-160,-124,-81,-53,-26,19,68);
anim_8_x=new Array(-20,20,-35,39,0,45,-1,24,-15,14,-20,35,-18,38,-11,16,49,64,81,93,100,103,109);
anim_8_y=new Array(-20,-20,-32,-42,-62,-76,-89,-107,-132,-147,-173,-180,-192,-209,-236,-193,-119,-73,-24,51,95,130,188);
anim_9_x=new Array(-20,-51,-89,-110,-165,-191,-228,-240,-259,-271,-277,-281,-287);
anim_9_y=new Array(-20,-20,-35,-37,-34,-16,10,47,105,150,189,227,273);
// End -->

</script>

• Markera och kopiera texten i rutan ovan. Klistra sedan in den på din sida.

Steg 2

Lägg följande kod: OnLoad="initMouseEvents()" i taggen <body>. Så här:

<body OnLoad="initMouseEvents()">

• Det går förstås bra att samtidigt ha andra attribut i body-taggen!

Steg 3

Lägg följande kod var som helst mellan <body> och </body>.


<div id="sparks">
<div id="sDiv0" style="position:absolute; visibility: hidden;"><font face="arial black" color="red">*</font></div>
<div id="sDiv1" style="position:absolute; visibility: hidden;"><font face="arial black" color="yellow">*</font></div>
<div id="sDiv2" style="position:absolute; visibility: hidden;"><font face="arial black" color="blue">*</font></div>
<div id="sDiv3" style="position:absolute; visibility: hidden;"><font face="arial black" color="red">*</font></div>
<div id="sDiv4" style="position:absolute; visibility: hidden;"><font face="arial black" color="orange">*</font></div>
<div id="sDiv5" style="position:absolute; visibility: hidden;"><font face="arial black" color="skyblue">*</font></div>
<div id="sDiv6" style="position:absolute; visibility: hidden;"><font face="arial black" color="lime">*</font></div>
<div id="sDiv7" style="position:absolute; visibility: hidden;"><font face="arial black" color="red">*</font></div>
<div id="sDiv8" style="position:absolute; visibility: hidden;"><font face="arial black" color="yellow">*</font></div>
<div id="sDiv9" style="position:absolute; visibility: hidden;"><font face="arial black" color="skyblue">*</font></div>
</div>

• Markera och kopiera texten i rutan ovan. Klistra sedan in den på din sida.
• Du kan lätt byta ut teckensnittet och färgerna om du vill.

Scriptet är skrivet av Matt Gabbert och är hämtat från: The JavaScript Source. Om du vill använda scriptet MÅSTE du låta copyright-noteringen stå kvar!

Exempel 2

Här används teckenkoden för ett hjärta i stället för: *. För att dessa hjärtan ska få olika storlekar kan man också ange "size" i font-taggen.

Exempel 2 - öppnas i eget fönster.

Så här:


<div id="sparks">
<div id="sDiv0" style="position:absolute; visibility: hidden;"><font face="arial" color="#FF6666" size="1">&hearts;</font></div>
<div id="sDiv1" style="position:absolute; visibility: hidden;"><font face="arial" color="#CC0000" size="1">&hearts;</font></div>
<div id="sDiv2" style="position:absolute; visibility: hidden;"><font face="arial" color="#FF0000" size="1">&hearts;</font></div>
<div id="sDiv3" style="position:absolute; visibility: hidden;"><font face="arial" color="#990000" size="2">&hearts;</font></div>
<div id="sDiv4" style="position:absolute; visibility: hidden;"><font face="arial" color="#CC0000" size="2">&hearts;</font></div>
<div id="sDiv5" style="position:absolute; visibility: hidden;"><font face="arial" color="#FF0000" size="2">&hearts;</font></div>
<div id="sDiv6" style="position:absolute; visibility: hidden;"><font face="arial" color="#990000" size="3">&hearts;</font></div>
<div id="sDiv7" style="position:absolute; visibility: hidden;"><font face="arial" color="#CC0000" size="3">&hearts;</font></div>
<div id="sDiv8" style="position:absolute; visibility: hidden;"><font face="arial" color="#FF0000" size="3">&hearts;</font></div>
<div id="sDiv9" style="position:absolute; visibility: hidden;"><font face="arial" color="#CC0000" size="4">&hearts;</font></div>
</div>

• Fungerar precis som i "Exempel 1". Förutom att KODEN OVAN skrivs mellan
<body> och </body>
• Markera och kopiera texten i rutan ovan. Klistra sedan in den på din sida.
• Du kan lätt byta ut färgerna om du vill.

Exempel 3

Man kan också få text att explodera över sidan...

Exempel 3 - öppnas i eget fönster.

Så här:


<div id="sparks">
<div id="sDiv0" style="position:absolute; visibility: hidden;"><font face="arial" color="#FFFF33" size="1">Grattis!</font></div>
<div id="sDiv1" style="position:absolute; visibility: hidden;"><font face="arial" color="#CC0000" size="1">Hurra!</font></div>
<div id="sDiv2" style="position:absolute; visibility: hidden;"><font face="arial" color="#66CC00" size="1">Grattis!</font></div>
<div id="sDiv3" style="position:absolute; visibility: hidden;"><font face="arial" color="#FFFF33" size="2">Hurra!</font></div>
<div id="sDiv4" style="position:absolute; visibility: hidden;"><font face="arial" color="#CC0000" size="2">Grattis!</font></div>
<div id="sDiv5" style="position:absolute; visibility: hidden;"><font face="arial" color="#66CC00" size="2">Hurra!</font></div>
<div id="sDiv6" style="position:absolute; visibility: hidden;"><font face="arial" color="#FFFF33" size="3">Grattis!</font></div>
<div id="sDiv7" style="position:absolute; visibility: hidden;"><font face="arial" color="#CC0000" size="3">Hurra!</font></div>
<div id="sDiv8" style="position:absolute; visibility: hidden;"><font face="arial" color="#66CC00" size="3">Grattis!</font></div>
<div id="sDiv9" style="position:absolute; visibility: hidden;"><font face="arial" color="#FFFF33" size="4">Hurra!</font></div>
</div>

• Fungerar precis som i "Exempel 1". Förutom att KODEN OVAN skrivs mellan
<body> och </body>
• Markera och kopiera texten i rutan ovan. Klistra sedan in den på din sida.
• Skriv in din egen text och byt ut teckensnittet och färgerna om du vill.

Exempel 4

Här används bilder. Du kan självklart byta ut bilderna mot dina egna. Det går förstås lika bra med bara en bild.

Exempel 4 - öppnas i eget fönster.

Så här:


<div id="sparks">
<div id="sDiv0" style="position:absolute; visibility: hidden;"><img src="bild1.gif"></div>
<div id="sDiv1" style="position:absolute; visibility: hidden;"><img src="bild2.gif"></div>
<div id="sDiv2" style="position:absolute; visibility: hidden;"><img src="bild3.gif"></div>
<div id="sDiv3" style="position:absolute; visibility: hidden;"><img src="bild4.gif"></div>
<div id="sDiv4" style="position:absolute; visibility: hidden;"><img src="bild1.gif"></div>
<div id="sDiv5" style="position:absolute; visibility: hidden;"><img src="bild2.gif"></div>
<div id="sDiv6" style="position:absolute; visibility: hidden;"><img src="bild3.gif"></div>
<div id="sDiv7" style="position:absolute; visibility: hidden;"><img src="bild4.gif"></div>
<div id="sDiv8" style="position:absolute; visibility: hidden;"><img src="bild1.gif"></div>
<div id="sDiv9" style="position:absolute; visibility: hidden;"><img src="bild2.gif"></div>
</div>

• Fungerar precis som i "Exempel 1". Förutom att KODEN OVAN skrivs mellan
<body> och </body>
• Markera och kopiera texten i rutan ovan. Klistra sedan in den på din sida.
• Om bilderna ligger i en annan mapp än sidan med koden måste du skriva in
hela sökvägen. Såklart!
• Bilderna i exemplet är mina original och får gärna användas! Högerklicka och spara!

• Glöm inte att ladda upp bilden i rätt mapp på din server.