Recipe 3.2 Setting Text to Blink
Problem
You want to set
text
to blink in a web page.
Solution
The first part includes the blink JavaScript
function:
function blinky(delay){
var el = document.body.getElementsByTagName('SPAN');
for (var i = 0; i < el.length; i++){
if (el[i].className == 'blink'){
el[i].style.visibility = el[i].style.visibility ==
'hidden' ? 'visible' : 'hidden';
}
}
setTimeout('blinky(' + delay + ')', delay);
}
In the body element, place the
onload event to execute the function when the
document has fully loaded:
<body onload="blinky(1000);">
Then wrap a span element with the
class attribute set to blink
around the text you want to animate:
<span class="blink">Hello, world!</span>
Discussion
The blink value for the
text-decoration property shares an unusual
distinction with other text-decoration values:
browsers don't need to support
blink to be standards-compliant in terms of
support for this CSS property. If the browser engineers want to
support it, that's OK, and if they
don't, that's OK as well.
Web developer Dan Thomas from the Babble List (http://www.babblelist.com/) created this
standards-based solution to give blink functionality without
requiring that the browser support the blink
property. Note that this workaround requires JavaScript, so the
function will not work if the user has JavaScript turned off in her
browser preferences.
See Also
The CSS 2.1 specification for the text-decoration
property at http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration;
the CSS 2.1 specification for the :link
pseudo-class at http://www.w3.org/TR/CSS21/selector.html#x27.
|