Ciao ragazzi, vorrei creare un effetto javascript grazie al quale mi trovo ad avere più link (visibili) e una sola immagine: quando clicko su un link l'immagine cambia, con effetto fade.

Ho provato a fare così, ma non mi funziona, ditemi cosa sbaglio.

Questo è il codice che inserisco nella pagina per visualizzare la foto con effetto "fade" quando si passa da un immagine all'altra:

codice:
<div style="background-image: url(/media/1.jpg); background-repeat: no-repeat; width: 200px; height: 150px;" id="blenddiv">

    [img]/media/1.jpg[/img]

</div>
In pratica è un immagine dentro l'altra, di cui una completamente trasparente (per fare il "fade").

E questo è il link da cliccare per "cambiare" foto

codice:
Image 1
All'interno dell'head ho inserito questo:
codice:
<script type="text/javascript" src="/media/blendimage.js"></script>
Che richiama il seguente .js
codice:
function blendimage(divid, imageid, imagefile, millisec) {
    var speed = Math.round(millisec / 100);
    var timer = 0;
    
    //set the current image as background
    document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
    
    //make image transparent
    changeOpac(0, imageid);
    
    //make new image
    document.getElementById(imageid).src = imagefile;

    //fade in image
    for(i = 0; i <= 100; i++) {
        setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
        timer++;
    }
}
Purtroppo non mi funziona

Sapete dirmi dove sta l'errore?

O consigliami un altro modo per fare la stessa cosa??

Grazie!