Lo script che vi presentiamo è un piccolo classico di Javascript. Consente la creazione di un semplice slide show di immagini che vengono presentate in forma di ciclo con i tradizionali pulsanti di 'Precedentè e 'Successivo'. L'implementazione dello script è estremamante semplice. L'unica accortezza è quella di nominare le immagini secondo un criterio ben preciso. Quelle allegate all'esempio seguono questo schema: 'digital0', 'digital1', 'digital2', etc. Per ragioni di ordine mentale, insomma, è opportuno far terminare il nome del file con il numero d'ordine nello slide show.
- esempio.htm
- digital0.gif
- digital1.gif
- digital2.gif
- digital3.gif
## 1: LA SEZIONE JAVASCRIPT
Nella sezione <head</head> andremo ad inserire la parte principale dello script:
<script type="text/javascript" language="javascript">
<!--
var NumberOfImages = 4
var img = new Array(NumberOfImages)
img[0] = "digital0.gif"
img[1] = "digital1.gif"
img[2] = "digital2.gif"
img[3] = "digital3.gif"
var imgNumber = 0
function NextImage()
{
imgNumber++
if (imgNumber == NumberOfImages)
imgNumber = 0
document.images["VCRImage"].src = img[imgNumber]
}
function PreviousImage()
{
imgNumber--
if (imgNumber < 0)
imgNumber = NumberOfImages - 1
document.images["VCRImage"].src = img[imgNumber]
}
//-->
</SCRIPT>
La prima variabile da settare è 'NumberOfImages'. Fondamentale non sbagliare. Qui va inserito il numero totale di immagini che compongono lo slide show. Nell'esempio sono 4.
Subito sotto viene definito un nuovo array contenente questa volta il nome delle immagini dello slide show:
img[0] = "digital0.gif"
img[1] = "digital1.gif"
img[2] = "digital2.gif"
img[3] = "digital3.gif"
Attenzione all'ordine quindi. Il resto del codice può essere lasciato intatto. Esso definisce le 2 funzioni principali. La prima scorre il ciclo in avanti, la seconda all'indietro. Il funzionamento avviene con un'operazione di sostituzione. Lo script cerca nel corpo della pagina un'immagine con l'attributo 'namè settato su 'VCRImagè e sostituisce l'attributo 'src' con quello delle immagini definite nell'array.
## 2: RICHIAMO INTERNO ALLA PAGINA WEB
Ecco perchè nella pagina web, prima di definire i pulsanti di navigazione, dobbiamo inserire l'immagine di partenza dello slide show. Può essere anche una gif trasparente, non importa. L'importante è che il suo attributo 'namè sia quello visto in precedenza:
<img src="quellochevuoi.gif" NAME="VCRImage"/>
Subito dopo creiamo invece i link per scorrere le immagini in avanti e all'indietro:
<a href="javascript:PreviousImage()">
Precedente</a> <a href="javascript:NextImage()">
Successiva</a>
Detto che in uno scenario reale il link testuale può essere sostituito con un immagine, si osservi come per ciascun link viene definito un richiamo alle funzioni PreviousImage() e NextImage(). Niente di più facile.
