How to put the fish on your page

0 Conversations

<table background="http://www.homestead.com/sparestuff/files/image641.gif">
<tr><td>
<font face="comic sans ms" color=navy>
Due to loads of people asking how to put the little fish that jump out of your cursor on your page, I've made this entry. Just follow
the steps to fishy heaven!<BR/><BR/>

<ol>
<li>Select the code below, and click "Ctrl; C" on your keyboard
<li>Go to "My Space"
<li>Click "Edit Page"
<li>Click "HTML" below the box you can type in
<li>Click "Change Style"
<li>Paste the code in anywhere
<li>Click "Save"
<li>That's it
</ol><BR/><BR/>

Now, here's the code<BR/>

<center>
<textarea rows=10 cols=80>
<!-- Begin the code -->
<HEAD>

<SCRIPT LANGUAGE="JavaScript1.2">
<!-- Original: Matt Gabbert ([email protected]) -->
<!-- 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>
</HEAD>

<!-- STEP TWO: Insert the onLoad event handler into your BODY tag -->

<BODY OnLoad="initMouseEvents()">

<!-- STEP THREE: Copy this code into the BODY of your HTML document -->

<!-- To use your own images, just put the necessary image -->
<!-- tags (<img src="...">) inside each DIV tag in this code -->

<div id="sparks">
<div id="sDiv0" style="position:absolute; visibility: hidden;"><img src="http://www2.h2g2.com/images/f_fish.gif"></div>
<div id="sDiv1" style="position:absolute; visibility: hidden;"><img src="http://www2.h2g2.com/images/f_fish.gif"></div>
<div id="sDiv2" style="position:absolute; visibility: hidden;"><img src="http://www2.h2g2.com/images/f_fish.gif"></div>
<div id="sDiv3" style="position:absolute; visibility: hidden;"><img src="http://www2.h2g2.com/images/f_fish.gif"></div>
<div id="sDiv4" style="position:absolute; visibility: hidden;"><img src="http://www2.h2g2.com/images/f_fish.gif"></div>
<div id="sDiv5" style="position:absolute; visibility: hidden;"><img src="http://www2.h2g2.com/images/f_fish.gif"></div>
<div id="sDiv6" style="position:absolute; visibility: hidden;"><img src="http://www2.h2g2.com/images/f_fish.gif"></div>
<div id="sDiv7" style="position:absolute; visibility: hidden;"><img src="http://www2.h2g2.com/images/f_fish.gif"></div>
<div id="sDiv8" style="position:absolute; visibility: hidden;"><img src="http://www2.h2g2.com/images/f_fish.gif"></div>
<div id="sDiv9" style="position:absolute; visibility: hidden;"><img src="http://www2.h2g2.com/images/f_fish.gif"></div>
</div>

<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<BR/>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

<!-- Script Size: 5.96 KB --></font>

<!-- End the code -->
</textarea>
</center>
<BR/><BR/><BR/>
Now some notes on how to change the images.<BR/>
When you've pasted the code you should see a
<center><textarea rows=5 cols=80>
<div id="sparks">
<div id="sDiv0" style="position:absolute; visibility: hidden;"><img src="http://www2.h2g2.com/images/f_fish.gif"></div>
<div id="sDiv1" style="position:absolute; visibility: hidden;"><img src="http://www2.h2g2.com/images/f_fish.gif"></div>
<div id="sDiv2" style="position:absolute; visibility: hidden;"><img src="http://www2.h2g2.com/images/f_fish.gif"></div>
<div id="sDiv3" style="position:absolute; visibility: hidden;"><img src="http://www2.h2g2.com/images/f_fish.gif"></div>
<div id="sDiv4" style="position:absolute; visibility: hidden;"><img src="http://www2.h2g2.com/images/f_fish.gif"></div>
<div id="sDiv5" style="position:absolute; visibility: hidden;"><img src="http://www2.h2g2.com/images/f_fish.gif"></div>
<div id="sDiv6" style="position:absolute; visibility: hidden;"><img src="http://www2.h2g2.com/images/f_fish.gif"></div>
<div id="sDiv7" style="position:absolute; visibility: hidden;"><img src="http://www2.h2g2.com/images/f_fish.gif"></div>
<div id="sDiv8" style="position:absolute; visibility: hidden;"><img src="http://www2.h2g2.com/images/f_fish.gif"></div>
<div id="sDiv9" style="position:absolute; visibility: hidden;"><img src="http://www2.h2g2.com/images/f_fish.gif"></div>
</div>
</textarea>
</center>
<BR/>
Where it says "http://www2.h2g2.com/images/f_fish.gif", you can change the image to anything. Some ideas are -<BR/>
<ul>
<li>An image on your own server (reasonably small
<li>"http://www2.h2g2.com/images/f_smiley.gif", which is <img src="http://www2.h2g2.com/images/f_smiley.gif" alt="Smiley">
<li>"http://www2.h2g2.com/images/f_winkeye.gif", which is <img src="http://www2.h2g2.com/images/f_winkeye.gif" alt="Winkeye">
<li>"http://www2.h2g2.com/images/f_tongueout.gif", which is <img src="http://www2.h2g2.com/images/f_tongueout.gif" alt="Tongueout">
<li>"http://www2.h2g2.com/images/f_bigeyes.gif", which is <img src="http://www2.h2g2.com/images/f_bigeyes.gif" alt="Bigeyes">
<li>"http://www2.h2g2.com/images/f_fish.gif ", which is <img src="http://www2.h2g2.com/images/f_fish.gif" alt="Fish!!!!!">
<li>"http://www2.h2g2.com/images/f_sadface.gif ", which is <img src="http://www2.h2g2.com/images/f_sadface.gif" alt="Sadface">
<li>"http://www.geocities.com/aurora_cats/aurorarussians/aabfly6.gif" is <img src="http://www.geocities.com/aurora_cats/aurorarussians/aabfly6.gif" alt="butterfly">
<li>"http://www.geocities.com/aurora_cats/aurorarussians/bfly6.gif" is <img src="http://www.geocities.com/aurora_cats/aurorarussians/bfly6.gif" alt="butterfly">
</ul>
<BR/>
Remember you can mix 'n' match images!<BR/>
If I find any more images I'll let you know!
</font>
</td></tr>
</table>
<!-- Begin the code -->
<HEAD>

<SCRIPT LANGUAGE="JavaScript1.2">
<!-- Original: Matt Gabbert ([email protected]) -->
<!-- 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>
</HEAD>

<!-- STEP TWO: Insert the onLoad event handler into your BODY tag -->

<BODY OnLoad="initMouseEvents()">

<!-- STEP THREE: Copy this code into the BODY of your HTML document -->

<!-- To use your own images, just put the necessary image -->
<!-- tags (<img src="...">) inside each DIV tag in this code -->

<div id="sparks">
<div id="sDiv0" style="position:absolute; visibility: hidden;"><img src="http://www.geocities.com/aurora_cats/aurorarussians/bfly6.gif"></div>
<div id="sDiv1" style="position:absolute; visibility: hidden;"><img src="http://www.geocities.com/aurora_cats/aurorarussians/bfly6.gif"></div>
<div id="sDiv2" style="position:absolute; visibility: hidden;"><img src="http://www.geocities.com/aurora_cats/aurorarussians/bfly6.gif"></div>
<div id="sDiv3" style="position:absolute; visibility: hidden;"><img src="http://www.geocities.com/aurora_cats/aurorarussians/bfly6.gif"></div>
<div id="sDiv4" style="position:absolute; visibility: hidden;"><img src="http://www.geocities.com/aurora_cats/aurorarussians/bfly6.gif"></div>
<div id="sDiv5" style="position:absolute; visibility: hidden;"><img src="http://www.geocities.com/aurora_cats/aurorarussians/bfly6.gif"></div>
<div id="sDiv6" style="position:absolute; visibility: hidden;"><img src="http://www.geocities.com/aurora_cats/aurorarussians/bfly6.gif"></div>
<div id="sDiv7" style="position:absolute; visibility: hidden;"><img src="http://www.geocities.com/aurora_cats/aurorarussians/bfly6.gif"></div>
<div id="sDiv8" style="position:absolute; visibility: hidden;"><img src="http://www.geocities.com/aurora_cats/aurorarussians/bfly6.gif"></div>
<div id="sDiv9" style="position:absolute; visibility: hidden;"><img src="http://www.geocities.com/aurora_cats/aurorarussians/bfly6.gif"></div>
</div>

<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<BR/>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

<!-- Script Size: 5.96 KB --></font>

<!-- End the code -->
<BR/><BR/>
By the way, I get my graphics from <a href="http://hop.to/frith" target="_blank">here</a> which is my Graphics Page.

<BR/><BR/><BR/>
<font face="comic sans ms" size=4>This page is part of my <a href="A474518">Spice up your H2G2 page</a> site!

Bookmark on your Personal Space


Conversations About This Entry

There are no Conversations for this Entry

Entry

A424261

Infinite Improbability Drive

Infinite Improbability Drive

Read a random Edited Entry


Written and Edited by

References

External Links

Not Panicking Ltd is not responsible for the content of external internet sites

Disclaimer

h2g2 is created by h2g2's users, who are members of the public. The views expressed are theirs and unless specifically stated are not those of the Not Panicking Ltd. Unlike Edited Entries, Entries have not been checked by an Editor. If you consider any Entry to be in breach of the site's House Rules, please register a complaint. For any other comments, please visit the Feedback page.

Write an Entry

"The Hitchhiker's Guide to the Galaxy is a wholly remarkable book. It has been compiled and recompiled many times and under many different editorships. It contains contributions from countless numbers of travellers and researchers."

Write an entry
Read more