Script.aculo.us, esempio di Effect.Appear ed Effect.Fade

13
Jul
2007

La libreria Javascript Script.aculo.us permette di realizzare in modo estremamente semplice effetti grafici accattivanti. Vediamo ad esempio l'uso di Effect.Appear ed Effect.Fade per creare un sempice roll-over di immagini.

Creiamo un file XHTML contenente una lista ed alcune immagini. Il codice usato nell'esempio è

<html>
<head>
    <title>Esempio scripaculous</title>
    <script src="scriptaculous/lib/prototype.js" type="text/javascript"></script>
    <script src="scriptaculous/src/scriptaculous.js" type="text/javascript"></script>
    <script src="scriptaculous/src/effects.js" type="text/javascript"></script>
</head>
<body>
    <ul>
        <a href="#" onclick="new Effect.Fade ( 'img2' ) ; new Effect.Fade ( 'img3' ) ;  new Effect.Appear ( 'img1' ) ;"><li>Immagine 1</li></a>
        <a href="#" onclick="new Effect.Fade ( 'img1' ) ; new Effect.Fade ( 'img3' ) ;  new Effect.Appear ( 'img2' ) ;"><li>Immagine 2</li></a>
        <a href="#" onclick="new Effect.Fade ( 'img1' ) ; new Effect.Fade ( 'img2' ) ;  new Effect.Appear ( 'img3' ) ;"><li>Immagine 3</li></a>
    </ul>
    
    <img id="img1" style="display: none;" src="images/img1.jpg"></img>
    <img id="img2" style="display: none;" src="images/img2.jpg"></img>
    <img id="img3" style="display: none;" src="images/img3.jpg"></img>
</body>
</html>

Veniamo alla descrizione del codice: innanzitutto sono importate le librerie Script.aculo.us, così come vengono scaricate dal sito ufficiale http://script.aculo.us e scompattate nella directory scriptaculous. A questo punto vengono dichiarati dei collegamenti fittizi, che attivano funzioni della libreria: cliccando il link relativo ad una immagine, ci assicuriamo che non sia visualizzata una delle altre due, chiamando Effect.Fade() per ambedue le altre immagini. Quindi procediamo a far comparire l'immagine prescelta.

Aggiungendo un file CSS e dando un po di posizionamento, sarà possibile creare un effetto di swap tra l'immagine che scompare e quella che appare, come mostrato in questo esempio.

Importante: è necessario dichiarare display:none all'interno del tag html e non nel file CSS, altrimenti non viene visto, come documentato nel sito ufficiale di Script.aculo.us.