Slideshow con immagini e testi

[Gecko]

Salve a tutti,

Ho una slideshow già realizzata , composta da tre "box" (in pratica tre div). Ciascuna delle box permette di far ruotare 3 immagini in sequenza, cliccando su delle frecce (destra o sinistra):

<div id="picbar" >
<div id="arr-left">
<img src="images/arr_left-2.gif" onclick="indietro()"/>
</div>
<div id="box1" class="picbox" "/>
<img id="box1image" name="sld1" src="slideshow/img1.jpg" /></div>
<div id="box2" class="picbox">
<img id="box2image" name="sld2" src="slideshow/img2.jpg"/></div>
<div id="box3" class="picbox">
<img id="box3image" name="sld3" src="slideshow/img3.jpg"/></div>
<div id="arr-right">

la slideshow carica di base tre delle immagini, all'interno di tre diversi array ci sono poi inserite le restanti immagini:

var slide1 = new Array("slideshow/img1.jpg","slideshow/img2.jpg","slideshow/img3.jpg");
var slide2 = new Array("slideshow/img4.jpg","slideshow/img5.jpg","slideshow/img6.jpg");
var slide3 = new Array("slideshow/img7.jpg","slideshow/img8.jpg","slideshow/img9.jpg");

Con il seguente javascript faccio andare avanti o indietro le tre box:

var i = 0;
var j = 0;
var k = 0;

function indietro()
{
if (i == 0 && j == 0 && k == 0)
{
i = slide1.length - 1;
j = slide2.length - 1;
k = slide3.length - 1;
}
else
{
i--;
j--;
k--;
}
document.sld1.src = slide1;
document.sld2.src = slide2[j];
document.sld3.src = slide3[k];
}


function avanti()
{
if (i < slide1.length - 1 && j < slide2.length - 1 && k < slide3.length - 1)
{
i++;
j++;
k++;
}
else
{
i=0;
j=0;
k=0;
}
document.sld1.src = slide1;
document.sld2.src = slide2[j];
document.sld3.src = slide3[k];

}

Fin qui funziona tutto. Adesso dovrei fare in modo che per ciascuna delle immagini, cliccando sopra di essa compaia in un altro div ('highlights') un testo ( praticamente ad ogni immagine caricata corrisponde un testo che appare cliccando sulla stessa immagine). Mi è stato suggerito di fare un array associativo, ho provato a farlo:

slide1[0][0] = 'Primo testo di prova per testo con onclick su immagine slideshow'
slide1[1][0] = 'Seconda prova che effettuiamo per verificare il corretto funzionamento'
slide1[2][0] = 'Terza prova'
slide2[0][0] = 'Quarto testo'
slide2[1][0] = 'Prova numero 5'
slide2[2][0] = 'sesto tentativo'
slide3[0][0] = 'settima prova'
slide3[1][0] = 'ottavo testo'
slide3[2][0] = 'fine dei tentativi'

Adesso però non ho idea di cosa scrivere per ottenere l'effetto desiderato. Come potrei procedere in questo senso? Come potrei creare un textNode sempre diverso ad ogni immagine cliccata (e caricata ovviamente?

Grazie in anticipo per ogni eventuale risposta!! 0

 

[Gecko]

Up. Nessuna idea?