Quindi avrai già nel BODY un Tag IMG con un NAME, al quale invii l' URL dell' immagine tramite un' istruzione JS.
Nell' esempio qui sotto, sono rappresentati dal Tag img name="viewer" e dalla function view()

Le dissolvenze (chiamate: fade-in fade-out) vengono ottenute lavorando sulla proprietà OPACITY.
Il fatto è che l' opacità viene gestita da istruzioni diverse a seconda dei navigatori; diverse sia per codificarla nello STYLE (CSS) che in JavaScript.
Quindi verifica questo primo esempio su Browser che non sia IExplorer (che vuole altra sintassi).

Le parti in rosso aggiunte riguardano quello che vuoi ottenere.

<html>
<head><title>faded appearence</title>

<script type="text/javascript">

 function view(){
    document.images["viewer"].src = "http://forum.html.it/forum/avatar.php?userid=124300";

 }


 var oplevel = 0;

 function fade(){
    document.images["viewer"].style.opacity = oplevel;
    oplevel = oplevel+0.1;
   
 }

</script>

</head>
<body>

<div align="center">
<br>
   <a href="javascript: view();">Visualizza Immagine</a> |
   <a href="javascript: fade();">Avvia Dissolvenza</a> (clicca ripetutamente)<br>
<br>
<img name="viewer" src="">
</div>


</body>
</html>

La function fade() (che fa crescere il livello di opacità), diventa automatica se la modifichi nella:

 function fade(){
    document.images["viewer"].style.opacity = oplevel;
    oplevel = oplevel+0.1;
    setTimeout('fade();', 100);
 }

dove compare un timer,
setTimeout() che richiama la funzione fade() stessa dopo 100 milli-secondi: è quello che si chiama ricorsione.


Si esegue tutto in un click se facciamo:

 function fade(){
    document.images["viewer"].style.opacity = oplevel;
    document.images["viewer"].src = "http://forum.html.it/forum/avatar.php?userid=124300";
    oplevel = oplevel+0.1;
    setTimeout('fade();', 100);
 }

Ma è ancora una soluzione approssimativa.


Alla prossima, ciao
Enzo