Sono elementi molto efficaci per rendere più viva una pagina web. In rete se ne
trovano di svariati modelli, il più delle volte a pagamento. In questa
pagina ci sono 5 esempi facilmente incorporabili in un file html, seguendo le istruzioni.
Vertical Text Scroller |
|||
Slide Scroller
Slide 1Descrizione immagine 1. Testo e linkil passaggio del mouse sulla finestra ferma lo scorrimento 
Slide 2Questa immagine contiene un link a inizio pagina. il passaggio del mouse sulla finestra ferma lo scorrimento 
Slide 3Esempio di cosa può essere visualizzato in questa finestra.il passaggio del mouse sulla finestra ferma lo scorrimento Horizontal Text ScrollerVertical Slide Show
|
|||
Slide Showby JavascriptKit.com |
|||
Ajscroller è una finestra di scorrimento verticale ridimensionabile per testo e tag html della
navsurf.com, che dispone di pulsanti per rallentare, accellerare,
fermare e riprendere lo scorrimento, inglobati in una tabella ed eventualmente rimovibili. Due sono gli scripts
forniti da navsurf.com: ajlib.js e
ajscroller.js. Un terzo script
deve contenere i dati dell'oggetto e può essere generato tramite
questa
utility.
Prima del tag </head> inserire queste istruzioni:
QScroller della latenight-coding.com, è uno script sofisticato in grado di generare diversi tipi di finestre a scorrimento verticale e orizzontale. I files richiesti sono qscroller.js , mootools.js e qscroll2.js, oltre al foglio di stile qscroller.css. Lo script qscroll2.js deve essere scaricato e copiato nella stessa directory della pagina html dalla quale viene chiamato.
Slide Scroller supporta testo ed immagini, entrambi con possibilità di collegamenti. Come per gli altri, lo scorrimento viene interrotto dal passaggio del mouse e riprende quando il puntatore lascia la finestra. Nello script qscroll2.js è possibile variare il tempo di permanenza (duration, attualmente 1500 mS).
Per incorporare le finestre QScroller, inserire prima del tag </head>:
Quindi preparare le immagini che andranno visualizzate, tutte del formato 130 x 173, ed inserirle nella sotto-directory img (per generarle facilmente si può usare ImgMicroWiz).
Per generare il codice HTML da inserire nella pagina web, utilizzare quest'altra utility.
Una seconda versione di QScroller è una finestra orizzontale di scorrimento per hyper-testo, le cui dimensioni possono essere variate nel foglio di stile qscroller.css, ( #qscroller1 - width:320; height:21). Lo script qscroll1.js deve essere scaricato e copiato nella stessa directory della pagina html dalla quale viene chiamato.
Per incorporare questa finestra occorre inserire prima del tag </head> le stesse istruzioni dell'esempio precedente. Mentre il codice html da inserire dopo il tag <body> può essere generato automaticamente per mezzo di quest'ulteriore utility.
Il terzo tipo di finestra generabile con QScroller è una Slide Show a scorrimento verticale, molto elegante. La dimensione delle immagini utilizzate è di 205 x 137 (per generarle facilmente si può usare ImgMicroWiz).
Anche per l'incorporazione di questo oggetto vanno inserite prima del tag </head> le stesse istruzioni dei due esempi precedenti, e deve essere scaricato e copiato nella stessa directory della pagina html, lo script qscroll3.js.
Il codice html da inserire dopo il tag <body> può essere generato automaticamente per mezzo di quest'ennesima utility.
Nello script qscroll3.js è possibile variare i parametri: durata(mS), pausa(mS) e autostart(true/false).
L'ultimo esempio è realizzato con lo script Flashyslideshow di javascriptkit.com - una slide-show classica con immagini e brevi testi in una cornice colorata.
Per incorporare la finestra Flashyslideshow, inserire prima del tag </head>:
Un secondo script, myflashydat.js, contiene i dati dell'oggetto e va incorporato nella pagina html, dopo il tag <body>, nel punto in cui deve essere visualizzata la slide-show. myflashydat.js può essere generato con quest'ultima utility.
Prima del tag </head> inserire queste istruzioni:
<script type="text/javascript" src="http://navsurf.com/dhtml/ajscroller/ajlib.js"></script>
<script type="text/javascript" src="http://navsurf.com/dhtml/ajscroller/ajscroller.js"></script>
Nel tag <body> inserire queste chiamate:
<script type="text/javascript" src="http://navsurf.com/dhtml/ajscroller/ajscroller.js"></script>
<body onload="LoadAJScroller()" onresize="LoadAJScroller()">
Questa è la tabella che va inserita dove si vuole visualizzare la finestra:
<table align="center" border="0">
<tr>
<td>
<form>
<input type="button" value="<<" onclick="AJDecreaseSpeed(20)">
<br>
<input type="button" value=">>" onclick="AJIncreaseSpeed(20)">
</form>
</td>
<td>
<script type="text/javascript" src="myscroll.js"></script>
</td>
<td>
<form>
<input type="button" value=" > " onclick="AJResume()">
<br>
<input type="button" value=" [] " onclick="AJStop()">
</form>
</td>
</tr>
</table>
<tr>
<td>
<form>
<input type="button" value="<<" onclick="AJDecreaseSpeed(20)">
<br>
<input type="button" value=">>" onclick="AJIncreaseSpeed(20)">
</form>
</td>
<td>
<script type="text/javascript" src="myscroll.js"></script>
</td>
<td>
<form>
<input type="button" value=" > " onclick="AJResume()">
<br>
<input type="button" value=" [] " onclick="AJStop()">
</form>
</td>
</tr>
</table>
QScroller della latenight-coding.com, è uno script sofisticato in grado di generare diversi tipi di finestre a scorrimento verticale e orizzontale. I files richiesti sono qscroller.js , mootools.js e qscroll2.js, oltre al foglio di stile qscroller.css. Lo script qscroll2.js deve essere scaricato e copiato nella stessa directory della pagina html dalla quale viene chiamato.
Slide Scroller supporta testo ed immagini, entrambi con possibilità di collegamenti. Come per gli altri, lo scorrimento viene interrotto dal passaggio del mouse e riprende quando il puntatore lascia la finestra. Nello script qscroll2.js è possibile variare il tempo di permanenza (duration, attualmente 1500 mS).
Per incorporare le finestre QScroller, inserire prima del tag </head>:
<link href="qscrollers.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.latenight-coding.com/media/system/js/mootools.js"></script>
<script type="text/javascript" src="http://www.latenight-coding.com/jincludes/qscroller//qscroller.js"></script>
<script type="text/javascript" src="http://www.latenight-coding.com/media/system/js/mootools.js"></script>
<script type="text/javascript" src="http://www.latenight-coding.com/jincludes/qscroller//qscroller.js"></script>
Quindi preparare le immagini che andranno visualizzate, tutte del formato 130 x 173, ed inserirle nella sotto-directory img (per generarle facilmente si può usare ImgMicroWiz).
Per generare il codice HTML da inserire nella pagina web, utilizzare quest'altra utility.
Una seconda versione di QScroller è una finestra orizzontale di scorrimento per hyper-testo, le cui dimensioni possono essere variate nel foglio di stile qscroller.css, ( #qscroller1 - width:320; height:21). Lo script qscroll1.js deve essere scaricato e copiato nella stessa directory della pagina html dalla quale viene chiamato.
Per incorporare questa finestra occorre inserire prima del tag </head> le stesse istruzioni dell'esempio precedente. Mentre il codice html da inserire dopo il tag <body> può essere generato automaticamente per mezzo di quest'ulteriore utility.
Il terzo tipo di finestra generabile con QScroller è una Slide Show a scorrimento verticale, molto elegante. La dimensione delle immagini utilizzate è di 205 x 137 (per generarle facilmente si può usare ImgMicroWiz).
Anche per l'incorporazione di questo oggetto vanno inserite prima del tag </head> le stesse istruzioni dei due esempi precedenti, e deve essere scaricato e copiato nella stessa directory della pagina html, lo script qscroll3.js.
Il codice html da inserire dopo il tag <body> può essere generato automaticamente per mezzo di quest'ennesima utility.
Nello script qscroll3.js è possibile variare i parametri: durata(mS), pausa(mS) e autostart(true/false).
L'ultimo esempio è realizzato con lo script Flashyslideshow di javascriptkit.com - una slide-show classica con immagini e brevi testi in una cornice colorata.
Per incorporare la finestra Flashyslideshow, inserire prima del tag </head>:
<style type="text/css">
#myslideshow{width: 200px; border: 5px solid orange; padding: 5px;}
#myslideshow img{border-width: 0;}
</style>
<script type="text/javascript" src="http://www.javascriptkit.com/howto/flashyslideshow.js"></script>
#myslideshow{width: 200px; border: 5px solid orange; padding: 5px;}
#myslideshow img{border-width: 0;}
</style>
<script type="text/javascript" src="http://www.javascriptkit.com/howto/flashyslideshow.js"></script>
Un secondo script, myflashydat.js, contiene i dati dell'oggetto e va incorporato nella pagina html, dopo il tag <body>, nel punto in cui deve essere visualizzata la slide-show. myflashydat.js può essere generato con quest'ultima utility.
best view with
|
Page Rating:
(3.83 su 5)
Voti 12
|