大家帮忙修改下3D相册的代码

把这段代码改成可以点击某个图片就执行某个函数！！！比如我点击第一张图片，就执行一个函数，函数里提示“你点击了第一张图片” 点击第二张就执行“你点击了第二张照片” 差不多这种效果！！求大家帮忙下 以下是代码 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>prometeus - Interactive DHTML art-demos</title>
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html { overflow: hidden; }
body { margin: 0px; padding: 0px; background: #111; position: absolute; width: 100%; height: 100%; cursor: crosshair; }
#canvas { position:absolute; left: 0%; top: 0%; width: 100%; height: 100%; background: #000; overflow: hidden; }
#canvas img { position: absolute; background: #666; overflow: hidden; cursor: pointer; left: 100%; border-color: #000; border-style: solid; border-width: 1px; -ms-interpolation-mode:nearest-neighbor; }
#canvas span { position: absolute; color: #9C9; font-family: 'courier new', typewriter, matrix, monospace; font-size: 0px; white-space: nowrap; left: -1000px; background: #010; filter: alpha(opacity=90); opacity: 0.9; }
</style>
<script type="text/javascript"> 
// ==================================================
// script realized by G�rard Ferrandez - June 2006
// http://www.dhteumeuleu.com
// ==================================================
 
id = function(o) { return document.getElementById(o); }
px = function (x) { return ''.concat(Math.round(x), 'px'); }
 
//////////////////////////////////////////////////////////////////////////////
function resize() { gf.resize(); }
onresize = resize;
 
document.onmousemove = function(e)
{
if(window.event) e=window.event;
gf.xm = (e.x || e.clientX) - gf.nx - gf.nw * .5;
gf.ym = (e.y || e.clientY) - gf.ny - gf.nh * .5;
}
 
//////////////////////////////////////////////////////////////////////////////
var gf = {
O    : [],
cont : 0,
N    : 0,
S    : 0,
img  : 0,
spa  : 0,
xm   : 0,
ym   : 0,
nx   : 0,
ny   : 0,
nw   : 0,
nh   : 0,
cx   : 0,
cy   : 0,
zoom : 1,
x    : 0,
y    : 0,
z    : -40000,
xt   : 0,
yt   : 0,
zt   : 0,
//////////////////////////////////////////////////////////////////////////////
resize : function ()
{
var o   = id('canvas');
gf.nx   = o.offsetLeft;
gf.ny   = o.offsetTop;
gf.nw   = o.offsetWidth;
gf.nh   = o.offsetHeight;
gf.zoom = gf.nh / 700;
},
 
CObj : function (n)
{
this.n                = n;
this.x                = gf.zoom * Math.random() * gf.nw * 2 - gf.nw;
this.y                = gf.zoom * Math.random() * gf.nh * 2 - gf.nh;
this.z                = Math.round(n * (10000 / gf.N));
this.w                = gf.img[n].width;
this.h                = gf.img[n].height;
this.oxt              = gf.spa[n];
this.oxs              = this.oxt.style;
this.txt              = gf.spa[n].innerHTML;
this.oxt.innerHTML    = "";
this.obj              = gf.img[n];
this.obs              = this.obj.style;
this.obj.parent       = this;
this.obj.onclick      = function() { this.parent.click(); }
this.obj.ondrag       = function() { return false; }
this.oxt.style.zIndex = this.obj.style.zIndex = Math.round(1000000 - this.z);
this.F                = false;
this.CF               = 100;
this.sto              = [];

this.anim = function()
{
var f = 700 + this.z - gf.z;
if (f > 0)
{
var d               = 1000 / f;
var X               = gf.nw * .5 + ((this.x - gf.x - gf.cx) * d);
var Y               = gf.nh * .5 + ((this.y - gf.y - gf.cy) * d);
var W               = d * this.w * gf.zoom;
var H               = d * this.h * gf.zoom;
this.obs.left       = px(X - W * .5);
this.obs.top        = px(Y - H * .5);
this.obs.width      = px(W);
this.obs.height     = px(H);
this.oxs.visibility = (this.CF-- > 0 && Math.random() > .9) ? "hidden" : "visible";
this.oxs.left       = px(X - W * .5);
this.oxs.top        = px(Y + H * .5);
if((gf.zt - gf.z) < 20)
{
if(!this.F)
{
this.F            = true;
this.CF           = Math.random() * 200;
this.oxs.fontSize = px(1 + d * 20 * gf.zoom);
var T             = "";
var tn            = this.txt.length;
for(var i = 0; i < tn; i++)
{
T = T.concat(this.txt.charAt(i));
this.sto[i] = setTimeout('gf.O['.concat(n, '].oxt.innerHTML = "', T.concat("_"), '";'), Math.round(f / 4) + 32 * i);
}
}
}
else
{
this.F = false;
this.oxt.innerHTML = "";
}
}
else
{
this.x  = gf.zoom * Math.random() * gf.nw * 2 - gf.nw;
this.y  = gf.zoom * Math.random() * gf.nh * 2 - gf.nh;
this.z += 10000;
this.oxs.zIndex = this.obs.zIndex = Math.round(1000000 - this.z);
}
}

this.cto = function()
{
var i = this.txt.length;
while (i--) clearTimeout(this.sto[i]);
}

this.click = function()
{
var i = gf.N;
while (i--) gf.O[i].cto();
if(gf.S != this)
{
gf.xt = this.x;
gf.yt = this.y;
gf.zt = this.z;
gf.S  = this;
}
else
{
gf.S   = 0;
gf.zt += 1600;
}
}
},

init : function ()
{
gf.cx   = gf.nw / 2;
gf.cy   = gf.nh / 2;
gf.cont = id("canvas");
gf.img  = id("canvas").getElementsByTagName("img");
gf.spa  = id("canvas").getElementsByTagName("span");
gf.N    = gf.img.length;
for (var i = 0; i < gf.N; i++) gf.O[i] = new gf.CObj(i);
gf.run();
gf.O[0].click();
},

run : function ()
{
gf.cx += (gf.xm - gf.cx) * .1;
gf.cy += (gf.ym - gf.cy) * .1;
gf.x  += (gf.xt - gf.x)  * .05;
gf.y  += (gf.yt - gf.y)  * .05;
gf.z  += (gf.zt - gf.z)  * .05;
var i = gf.N;
while (i--) gf.O[i].anim();
setTimeout(gf.run, 16);
}
}
 
onload = function() {
resize();
gf.init();
}
 
</script>
</head>
<body>
<div id="canvas"> <img src="images/slide109.jpg"><span>Little girls may have taken<br>
  ballet lessons here.</span> <img src="images/slide112.jpg"><span>Stealing fire from Gods</span> <img src="images/slide94.jpg"><span>Mussgorsky's Gopak played in my head</span> <img src="images/slide108.jpg"><span>The coffee tasted nice.<br>
  I nearly fainted, though.</span> <img src="images/slide113.jpg"><span>The plant was closed for good.</span> <img src="images/slide126.jpg"><span>They planned to direct all ressources<br>
  to public health.</span> <img src="images/slide99.jpg"><span>I can almost hear them speak.</span> <img src="images/slide121.jpg"><span>Will this be their Rosetta stone?</span> <img src="images/slide111.jpg"><span>Absenteeism was dramatically lowered.</span> <img src="images/slide120.jpg"><span>Carefully calibrated for radiation levels.</span> <img src="images/slide123.jpg"><span>The underground is open forever.</span> <img src="images/slide119.jpg"><span>The true cost of the disaster<br>
  will not be known for decades to come.</span> <img src="images/slide132.jpg"><span>My journey had lasted seven hours.</span> </div>
<!-- crossbrowser images_loading_bar - Gerard Ferrandez - www.dhteumeuleu.com - Feb 2005 -->
<span id="LB0" style="position:absolute;left:50%;top:50%;"><span style="position:absolute;font-family:arial;font-size:10px;color:#ccc;background:#000;left:-50px;top:-18px">Loading...</span><span style="position:absolute;left:-50px;top:-5px;font-size:1px;width:100px;height:10px;background:#333"><span id="LB1" style="position:absolute;font-size:1px;width:0px;height:10px;background:#ccc"></span></span></span>
<script type="text/javascript">m00=document.getElementById("canvas").getElementsByTagName("img");m01=m00.length;function images_loading_bar(){m02=0;for(i=0;i<m01;i++)m02+=(m00[i].complete)?1:0;document.getElementById("LB1").style.width=Math.round(m02/m01*100)+'px';if(m02==m01)setTimeout("document.getElementById('LB0').style.display='none'",128); else setTimeout("images_loading_bar()", 64);};images_loading_bar();</script>
<!-- end of images_loading_bar code -->
</body>
</html>