Either via using an animated GIF as the background image, or by using JavaScript to toggle the background color.
"Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
~ Terry Pratchett in Nation
"Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
~ Terry Pratchett in Nation
Use this. The table (or table cell) you want to use has to be given a unique ID though.
Code:
// Set global variables
var totalCycles = 0;
var currColor = 0;
var colors, intervalID;
// Build array of color names
function init( ) {
colors = ["#C3F","#90C"];
}
// Cycle through the two colors
function cycleColors( ) {
// reset counter to 0 when it reaches 1
currColor = (currColor == 1) ? 0 : ++currColor;
// set style color to new color from array
document.getElementById("news").style.backgroundColor = colors[currColor];
// invoke this function again until total = 12 so it ends on #C3F
if (totalCycles++ < 12) {
intervalID = setTimeout("cycleColors( )", 500);
} else {
clearTimeout(intervalID);
}
}
In your <body> tag, place the following before the closing bracket.
Code:
onload="init(); cycleColors( );"
Your <body> tag should look like this:
HTML Code:
<body onload="init(); cycleColors( );">
All you need to change are the color values (this example uses two shades of purple) and the element ID that is referenced (in this case it is "news" however it can be whatever you want it to be).
Here's an example (granted, I'm using a <div> for the container, but like I said, it could just as easily be a table cell):
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Blinking Background Test</title><style type="text/css">
body {
background-color: #fff;
color: #000;
}
#bgBlink {
background-color: #90C;
color: #eeddff;
width: 250px;
height: 100px;
border: 5px ridge #84a;
}
p {
margin-top: 15%;
margin-right: auto;
margin-bottom: 15%;
margin-left: auto;
text-align: center;
}
</style><script type="text/javascript">
// Set global variables
var totalCycles = 0;
var currColor = 0;
var colors, intervalID;
// Build array of color names
function init( ) {
colors = ["#C3F","#90C"];
}
// Cycle through the two colors
function cycleColors( ) {
// reset counter to 0 when it reaches 1
currColor = (currColor == 1) ? 0 : ++currColor;
// set style color to new color from array
document.getElementById("bgBlink").style.backgroundColor = colors[currColor];
// invoke this function again until total = 12 so it ends on #C3F
if (totalCycles++ < 12) {
intervalID = setTimeout("cycleColors( )", 500);
} else {
clearTimeout(intervalID);
}
}
</script></head><body onload="init(); cycleColors( );"><div id="bgBlink"><p>Help me, I´m blinking!</p></div></body></html>
(note: I always put my scripts into an external global.js file. I left it in here for the sake of example. Unless you use PCDATA comments, please put your script into an external file)
Last edited by Albatross; 07-23-2006 at 11:25 PM.
We are Linux, you will be assimilated, you will be liberated, you will be confused by our version numbers and installation procedures, resistance is futile...
Trying to optimize a Web page/site for a particular browser is like trying to optimize Tokyo for Godzilla. It's just not going to work.
[RESOLVED] table with a flashing background
Reply With Quote
Bookmarks