javascript:showimage(0); with crossfade effect?

Hi People,
I’m a js newb that basically copy and pastes code and tries to figure stuff out. I could use some help. I have this working script that takes pics from a directory and makes an array then outputs them to html. The pics are then displayed as a gallery. The CMS system Im using is TYPO3. This script is called from a TYPO3 extention.
So what I need is a crossfade effect to change between pics

What I have so far some things are in german ? :

[CODE]// Starts active
var navaktiv = “bild1”;
var logoaktiv = “logo1”;

function showimage (number) {
var newbild = “”;
var newlogo = “”;

// turns off the active Icon
if (navaktiv != “”) {
if (document.getElementById(navaktiv)) {
document.getElementById(navaktiv).className = “normal”;
}
}

//alert (logos[number]);

/* builds the url for the new images*/
newbild = ‘<img src=”‘ + bilder[number] + ‘” alt=”Bild Wohnwelten” />’;
if (logos[number]) {
newlogo = ‘<img src=”‘ + logos[number] + ‘” alt=”Logo Wohnwelten” />’;
document.getElementById(‘text-wohnwelten’).style.height = ‘190px’;
}
else {
document.getElementById(‘text-wohnwelten’).style.height = ‘270px’;
}

// Writes the new image to the Index
if (document.getElementById(‘bild-wohnwelten’)) {
document.getElementById(‘bild-wohnwelten’).innerHTML = newbild;
}
// Writes the new logo to the Index
if (document.getElementById(‘logo-wohnwelten’)) {
document.getElementById(‘logo-wohnwelten’).innerHTML = newlogo;
}

// Changes the image caption
if (document.getElementById(‘text-wohnwelten’)) {
document.getElementById(‘text-wohnwelten’).innerHTML = texte[number];
}

// defines the new active icon
navaktiv = “bild” + (number + 1);

// changes the active icon color
if (document.getElementById(navaktiv)) {
document.getElementById(navaktiv).className = “aktiv”;
}
}

function init() {
// shows the initial content
showimage (0);
}

window.onload = init;
[/CODE]

dynamically called in the html:

[CODE]<a id=”bild1″ class=”normal” href=”javascript:showimage(0);”/>[/CODE]

So I searched around for some crossfade scripts and found this

[CODE]
/*****

Image Cross Fade Redux
Version 1.0
Last revision: 02.15.2006
[email protected]

Please leave this notice intact.

Rewrite of old code found here: http://slayeroffice.com/code/imageCrossFade/index.html

*****/

window.addEventListener?window.addEventListener(“load”,so_init,false):window.attachEvent(“onload”,so_init);

var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;

function so_init() {
if(!d.getElementById || !d.createElement)return;

// DON’T FORGET TO GRAB THIS FILE AND PLACE IT ON YOUR SERVER IN THE SAME DIRECTORY AS THE JAVASCRIPT!
// http://slayeroffice.com/code/imageCrossFade/xfade2.css
css = d.createElement(“link”);
css.setAttribute(“href”,”xfade2.css”);
css.setAttribute(“rel”,”stylesheet”);
css.setAttribute(“type”,”text/css”);
d.getElementsByTagName(“head”)[0].appendChild(css);

imgs = d.getElementById(“imageContainer”).getElementsByTagName(“img”);
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = “block”;
imgs[0].xOpacity = .99;

setTimeout(so_xfade,1000);
}

function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;

nOpacity = imgs[nIndex].xOpacity;

cOpacity-=.05;
nOpacity+=.05;

imgs[nIndex].style.display = “block”;
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;

setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);

if(cOpacity<=0) {
imgs[current].style.display = “none”;
current = nIndex;
setTimeout(so_xfade,1000);
} else {
setTimeout(so_xfade,50);
}

function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = “alpha(opacity=” + (obj.xOpacity*100) + “)”;
}

}
[/CODE]

But I have no clue as how to put these together. Where would I start?
Impoertant is that the function call remains “showimage” otherwise i have to rewrite the TYPO3 extention.
Thanks for looking

Also in #JavaScript _↴