Pubblicato il 13/10/11 - aggiornato il  | 5 commenti :

Come inserire testo o immagini lampeggianti.

Esiste un tag specifico per rendere lampeggiante una porzione di testo. Si tratta di blink, ha però il grosso problema di non funzionare con Internet Explorer e con Chrome. Solo Opera e Firefox lo supportano. Vediamo come si possano creare oggetti lampeggianti con un semplice javascript. Passo a presentare due possibili opzioni tra cui si potrà scegliere quella più conveniente.
Prima soluzione per inserire oggetti lampeggianti
Basta incollare nel post in Modalità HTML un codice di questo tipo
<div id="blink" style="text-align: center;"> <a href="http://feeds.feedburner.com/ideepercomputeredinternet/zUQN" target="_blank"><span style="color: #003366; font-size: 18px;">Sottoscrivi i feed di</span> <span style="color: #940f04; font-size: 24px;">Idee per Computer ed Internet</span></a> </div>
<script language="JavaScript">
function blink_one() {
document.getElementById('blink').style.visibility='visible';
setTimeout('blink_two()',1000);
}
function blink_two() {
document.getElementById('blink').style.visibility='hidden';
setTimeout('blink_one()',1000);
}
blink_one();
</script>
dove la prima parte può essere personalizzata come si vuole. L'importante è inserire un contenitore div con id="blink". Il numero 1000 regola la velocità di lampeggiamento. Il valore è in millisecondi, se si aumenta il lampeggiamento sarà più lento. Ecco cosa mostra il codice


Secondo metodo di inserimento con una immagine
In questo caso creiamo una immagine lampeggiante. Questo può essere fatto anche con lo script precedente. Basta cambiare la prima parte del codice.
<div id="blink2" style="text-align: center;">
<a href="
http://feeds.feedburner.com/ideepercomputeredinternet/zUQN" target="_blank"><img src="https://lh5.googleusercontent.com/-GTnWMP0dzfo/ThsSsyrKqqI/AAAAAAAATzs/O3amW2MnLNE/s100/colibr%2525C3%2525AC.gif" /></a></div> <script language="javascript">
function lampeggiamento(){
if(document.getElementById('blink2').style.visibility=="hidden")
{document.getElementById('blink2').style.visibility= "visible"}
else
{document.getElementById('blink2').style.visibility= "hidden"}
}
setInterval('lampeggiamento()',1500);
</script>
Anche in questo caso 1500 rappresenta la velocità.Dopo aver modificato la prima parte, se incollato in Modalità HTML, produce questo effetto


Questa funzionalità credo che sarà molto apprezzata da chi è attento a creare un design originale per il proprio sito. Nel caso si volessero inserire più oggetti lampeggianti in una stessa pagina dobbiamo modificare l'ID blink e utilizzare per esempio blink2, blink3, ecc. Cosa che del resto ho fatto anch'io.




5 commenti :

  1. fantastico inserito nel mio forum
    http://lottorinaldogratis.forumfree.it/

    RispondiElimina
  2. beh però non mi piace pompare il codice con il js, cercavo una cosa breve tipo css o html che ho trovato (text-decoration:blink;) ma purtroppo non funziona... boh

    RispondiElimina
  3. ciao Ernesto, vorrei chiederti se è possibile inserire questo codice anche all'interno di un post. Mi speigo meglio Vorrei che comparisse in tutti i post che pubblicherò da oggi in poi. E' possibile? Grazie. Io ho preso solo il primo codice.

    RispondiElimina
  4. Non si può automatizzare. Bisogna che lo incolli nei post tutte le volte che li pubblichi
    @#

    RispondiElimina
    Risposte
    1. Grazie della risposta. Lo metterò ogni volta. ^_^

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.