Per creare un effetto intermittenza solitamente si usava l'attributo <blink>. Questo tag, però, oltre ad essere proprietario Microsoft, non è più supportato dai browser attuali.
Lo script che presentiamo permette di risolvere il problema creando un effetto intermittenza crossbrowser valido sia per il navigatore di casa Microsoft che per Netscape 6.x.
Il codice dovrà essere associato ad una qualsiasi immagine posizionata all'interno di un DIV, dentro al quale potranno essere presenti anche altri elementi, come testo o tabelle, che beneficeranno dell'effetto.
- esempio.htm
- blink.js
- shim.gif
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Introduciamo, tra i tag <head> della pagina, il richiamo al javascript esterno denominato "blink.js":
<script language="javascript" src="blink.js" type="text/javascript"></script>Adesso inseriamo, nel punto del <body> che preferiamo, il DIV contenente l'immagine a cui associare l'effetto intermittenza:
<div id="primo" style="position: relative;">
<a href="#"><img src="img.gif" border="0" onLoad="window.primo = new blink( 'primo', 250 );"/>
TESTO</a>
</div>Vediamo come è strutturato il DIV di esempio:
<div id="primo" style="position: relative;">l'ID è l'attributo che serve a rendere univoco ogni DIV da altri elementi presenti nella pagina. personalizzate il parametro con un nome a piacere.
<img src="img.gif" border="0" onLoad="window.primo = new blink( 'primo', 250 );">all'interno del DIV deve essere presente una qualsiasi immagine a cui associare il codice attraverso questa semplice riga
onLoad="window.primo = new blink( 'primo', 250 );"dopo "window." va inserito il nome che abbiamo scelto per il DIV. tra le parentesi tonde, invece, dobbiamo impostare due parametri: il primo, anche in questo caso, è il nome del DIV; il secondo valore è la frequenza di intermittenza. più alto sarà il valore e minore la velocità dell'effetto.
A questo punto potremo introdurre anche altri elementi, come testo o tabelle, che beneficeranno dell'effetto purchè inseriti all'interno dello stesso DIV (prima o dopo il tag <img src...> è indifferente)
Per creare i link "START" e "STOP" basteranno queste due righe:
<a href="javascript://" onclick="if(window.primo)primo.start()">start</a
<a href="javascript://" onclick="if(window.primo)primo.stop()">stop</a>Anche in questo caso andranno personalizzati i link con il nome del DIV impostato precedentemente
Per far partire l'effetto al caricamento della pagina impostiamo il <body> in questa maniera:
<body onLoad="primo.start()">Prima di concludere un suggerimento: nel caso voleste utilizzare il codice solo per un testo senza far comparire l'immagine, basterà inserire una gif trasparente di un pixel per un pixel. Nel secondo esempio l'immagine trasparente è stata chiamata "shim.gif".
