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.
Articoli correlati:
August 27th, 2007 at 10:29 am
[...] abbiamo importato correttamente i files di Scriptaculous, tutto dovrebbe funzionare correttamente. Tags del post: Javascript, Script.aculo.us, Web, Web [...]
February 20th, 2008 at 7:13 pm
ciao,
ma nn c’è modo di far dunzionare il fade evitando di mettere le foto in div posizionati con position absolute? cosi è inutilizzabile
Grazie