How to put the fish on your page
Created | Updated Oct 20, 2010
<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!