Sono un neofita e sto studiando le basi e contemporaneamente cerco di fare anche pratica.
Mi sono imbattuto in un obiettivo che non riesco a raggiungere,
chiedo il vostro aiuto.

Ho delle immagini miniature in cui cliccandoci sopra si apre un immagine piu' grande in un determinato spazio vicino.

E poi ho delle immagine statiche in cui inserisco un effetto didascalia.

Separate funzionano bene in modo indipendente, ora come potrei fare per unire le due funzioni?
Ossia, portare l'effetto didascalia delle immagini statiche all'interno delle miniature che si aprono in una immagine piu' grande.

Uso questo semplice codice per le miniature con zoom:


< body>
< div>
<p><img src="http://immagine4.jpg" name="view1" width="540" height="540" id="image1" /></p>
<p><br /> </p>
<img width="68" height="68" onClick="document.images['view1'].src='http://immagine1.jpg';" src="http://immagine1.jpg" />
<img width="68" height="68" onClick="document.images['view1'].src='http://immagine2.jpg';" src="http://immagine2.jpg" />
<img width="68" height="68" onClick="document.images['view1'].src='http://immagine3.jpg';" src="http://immagine3.jpg" />
<img width="68" height="68" onClick="document.images['view1'].src='http://immagine4.jpg';"
src="http://immagine4.jpg" /></div>
< /body>
< /html>


E questo sotto invece è il codice preso da questo sito per l'effetto didascalia:


body{font: 76%/1.5 Arial,sans-serif;background:#FFF;color:#333;padding:10px}ul.c aptionbox{float:left;width:100%} /*serve per contenere i float*/
ul.captionbox, ul.captionbox li{margin:0;padding:0;list-style: none}
ul.captionbox li{float: left;margin: 0 15px 15px 0;border: 1px solid #999}
ul.captionbox img{border: 0;display: block}
ul.captionbox a{position:relative;display: block;color: #FFF;
text-decoration: none}
ul.captionbox span{position: absolute;bottom: 0;width: 100%;
padding: 3px 0;background: url(opacity.png) repeat-x 0 -150px;
cursor: pointer;text-align: center}
ul.captionbox a:hover span{background-position: 0 -100px}
</STYLE>
</HEAD>
<BODY>
<UL class="captionbox">
<LI><A href="http://www.html.it/articoli/3064/did...o2.html#"><IMG
style="width: 256px; height: 192px;" alt="immagine" src="Immagine%20con%20didascalia%20semitrasparenti %20-%20esempio%201_file/mulino.png"><SPAN>Mulino
olandese</SPAN></A></LI>
<LI><A href="http://www.html.it/articoli/3064/did...o2.html#"><IMG
style="width: 256px; height: 192px;" alt="immagine" src="Immagine%20con%20didascalia%20semitrasparenti %20-%20esempio%201_file/lussemburgo.png"><SPAN>Lussemburgo,
un palazzo nel centro città</SPAN></A></LI>
<LI><A href="http://www.html.it/articoli/3064/did...o2.html#"><IMG
style="width: 256px; height: 192px;" alt="immagine" src="Immagine%20con%20didascalia%20semitrasparenti %20-%20esempio%201_file/brussels.png"><SPAN>Brussels</SPAN></A></LI>
<LI><A href="http://www.html.it/articoli/3064/did...o2.html#"><IMG
style="width: 256px; height: 192px;" alt="immagine" src="Immagine%20con%20didascalia%20semitrasparenti %20-%20esempio%201_file/tulipani.png"><SPAN>Tulipani</SPAN></A></LI></UL></BODY></HTML>



L'obiettivo a cui non riesco ad arrivare è portare l'effetto didascalia del secondo esempio,
all'interno delle miniature del primo esempio.

Please, help me