Gdesign.it :: Come progettare siti web accessibili ed efficaci ::


Home » How To » Come realizzare un rollover slideshow di immagini

Rollover slideshow

di GDesign, 27 Gennaio 2003

Versione StampabileDownload in pdf


Abbiamo già visto e spiegato come realizzare un rollover di immagini nella sua forma più comune. In questo articolo vedremo un altro tipo di rollover chiamato "slideshow" che è sicuramente meno inflazionato di quello già visto, ma ugualmente efficace e utile. Vediamo subito cos'e il rollover slideshow:si tratta semplicemente dell'associazione di un link (testuale o grafico) ad un'immagine posizionata in una parte qualunque della pagina web. In pratica passando sopra il link con il puntatore del mouse vedremo cambiare l'immagine a riposo con l'immagine ad esso associata nella parte della pagina web da noi assegnata. Per capire meglio, diamo un'occhiata all'esempio sotto, che poi è quello che realizzeremo passo dopo passo:


Link 1
Link 2
Link 3

RollSlide

Questo tipo di rollover può essere utile per creare un menù di navigazione particolare oppure per fare un vero è proprio slideshow di immagini utilizzando il solo linguaggio HTML con l'ausilio di un semplice javascript. Ma cominciamo subito a vedere i singoli passi che ci permetteranno di realizzare il nostro rollover slideshow.

Passo 1

Prepariamo le immagini da associare ai link che sono una per ogni collegamento oltre a un'immagine predefinita che non deve essere necessariamente vuota. Nel nostro esempio le immagini sono quattro:


Immagine di default Immagine associata al link 1 Immagine associata al link 2 Immagine associata al link 3
def.gif rs1.gif rs2.gif rs3.gif

Le nostre immagini hanno tutte le stesse dimensioni, ma nessuno vi vieta di utilizzare immagini con dimensioni diverse.

Passo 2

Abbiamo bisogno del javascript che ci permetterà di ottenere l'effetto slideshow. Il file javascript proviene da Jsdir.com ed è stato adattato alle nostre esigenze. Prelevate il file.js, apritelo e cercate la riga:

nome = new Array ("percorso/immagini")

In questa riga inseriremo il nome ed il percorso delle immagini da associare ai link; le immagini si trovano nella cartella "images" quindi la riga sarà:

nome = new Array ("images/rs1","images/rs2","images/rs3")

Avrete sicuramente notato che abbiamo omesso l'estensione delle immagini, perché questa deve essere dichiarata nella riga:

source[conta].src = nome[conta]+".gif";

Non abbiamo bisogno di cambiare nulla in questa riga, visto che stiamo utilizzando immagini gif, ma nel caso in cui volessimo utilizzare altri formati (jpe o png) sappiamo su quale riga dello script agire.

Fatto questo prendiamo la riga che ci permette di definire quale deve essere l'immagine predefinita o a riposo; la riga è:

vuoto.src="percorso/immagineariposo.estensione";

che nel nostro esempio diventa:

vuoto.src="images/default.gif";

Prestiamo attenzione perché a differenza della riga in cui abbiamo specificato le immagini associate ai link, in questa riga bisogna inserire anche l'estensione dell'immagine predefinita.

Non abbiamo altre modifiche da fare al nostro script, dobbiamo semplicemente inserirlo nella nostra pagina web tra i tag <HEAD> e </HEAD> in questo modo:

<SCRIPT language="JavaScript" src="percorso/file.js"></SCRIPT>

oppure in questo:

<SCRIPT language="JavaScript">contentuto file.js</SCRIPT>

Passo 3

Vediamo adesso qual è il codice da utilizzare per creare i link testuali associati alle immagini:

<A HREF="#" onMouseOver="swp(0)" onMouseOut="UNswp(0)">LINK1</A>
<A HREF="#" onMouseOver="swp(1)" onMouseOut="UNswp(1)">LINK2</A>
<A HREF="#" onMouseOver="swp(2)" onMouseOut="UNswp(2)">LINK3</A>

In HREF si specifica l'url a cui punta ogni link; noi lo abbiamo lasciato vuoto per semplicità.

Nell'esempio abbiamo utilizzato 3 link, ma evidentemente se ne posso usare di più o di meno. Se ci servono quattro link, basta aggiungere nome e percorso dell'ulteriore immagine nel file .js e poi aumentare di 1 la numerazione di swp( ) e UNswp( ) nel codice html. Quindi per il quarto link il codice Html da aggiungere sarà:

<A HREF="#" onMouseOver="swp(3)" onMouseOut="UNswp(3)">LINK4</A>

e via dicendo per tutti i link che desideriamo.

Per semplificare l'esempio abbiamo utilizzato link testuali, ma naturalmente il funzionamento è assicurato anche con link grafici.

Passo 4

L'ultima cosa da fare è inserire l'immagine a riposo o di default nella pagina web nel posto da noi desiderato, secondo la sintassi:

<IMG SRC="percorso/immagine" NAME="roller">

che nel nostro esempio è:

<IMG SRC="images/def.gif" NAME="roller">

Volendo, siamo liberi di specificare tutti gli attributi del tag <IMG> che ci interessano (BORDER, WEIGHT, HEIGHT, ALT, ecc.) , l'unica cosa importante è che sia presente l'attributo NAME="roller".

Fatto questo, il lavoro è terminato e adesso abbiamo anche il materiale e le conoscenze per realizzare i nostri rollover slideshow personalizzati.

Il rollover slideshow creato con questo procedimento si è rivelato molto versatile, infatti abbiamo testato il suo funzionamento con i principali browser (Internet Explorer, Netscape e Opera) e con le relative versioni più o meno recenti e tutto è andato per il meglio. Basta dire che il rollover slideshow ha funzionato correttamente anche con Netscape Navigator 4.72, che come molti sviluppatori web sapranno, è uno dei browser più ostili.

Scarica adesso l'esempio di rollover slideshow che abbiamo realizzato con tutti i file necessari.

^Top

Dai un voto a questo articolo:   HITS: 148 | VOTI: | MEDIA VOTI:     

Home:: Html:: Principi:: How To:: Download:: Tips:: Link:: Collabora:: Partners:: News&Updates:: Contatto:: Info

© 2001 - 2006 Giuseppe Di Carlo :: Riproduzione vietata ::

Utenti on line: 1