Visszalép Cellák, keret vagy háttérszín változása

A1-es cella
<td id="cella_a001">
Változó háttérszín
B1-es cella
<td id="cella_b001">
Változó háttérszín
A2-es cella
<td id="cella_a002">
Változó háttérszín
B2-es cella
<td id="cella_b002">
Változó háttérszín
A3-as cella
<td id="cella_a003">
Változó keretszín
B3-as cella
<td id="cella_b003">
Változó, keret és háttérszín

Program megírása, xhtml - fájlban:

Azon kezdő címkékhez, melyeknél színváltoztatást alkalmazunk, egyedi "id" azonosítót kell beírni.

<body>
<script language="JavaScript"  type="text/javascript"  src="java_fájl_neve.js"> </script>

<table id="tabla_001">
<tr>
<td id="cella_a001"> A1-es cella <br /> Változó háttérszín </td> 
<td id="cella_b001"> B1-es cella <br /> Változó háttérszín</td>
</tr>
<tr>
<td id="cella_a002"> A2-es cella <br /> Változó háttérszín</td>
<td id="cella_b002"> B2-es cella <br /> Változó háttérszín</td>
</tr>
<tr>
<td id="cella_a003"> A3-as cella <br /> Változó keretszín</td>
<td id="cella_b003"> B3-as cella <br /> Változó, keret és háttérszín</td>
</tr>
</table>
</body>

Program megírása, CSS - fájlban:

#tabla_001 {width: 580px; margin-top: 25px; margin-left: 125px;}
#tabla_001 {background-color: #ccc;  border: 20px ridge #3fc;}
#tabla_001 td {text-align: center; border: 5px solid #fff;}

Program megírása, js - fájlban:

A kezdő alapszín meghatározását, például: #fff = white
- Mozilla böngésző esetében , angolszóval írjuk be
- Explorer böngészőbe, tetszőleges színkód meghatározást írhatunk

//konfiguráció intervalluma, váltózás sebessége (ideje): (1000=1 másodperc)

//Táblázat_001, változó keretszíne

var sebesseg=600 function tablazat_001() { var keretszin=document.getElementById? document.getElementById("tabla_001") : document.all? document.all.tabla_001 : "" if (keretszin) { if ({keretszin.style.borderColor.indexOf("lime")!=-1) keretszin.style.borderColor="#cf9" else keretszin.style.borderColor="lime" } } setInterval("tablazat_001()", sebesseg)

//Cella A1-es háttérszín

var sebesseg=1200 function hatterszin_A1() { var hatterszin=document.getElementById? document.getElementById("cella_a001") : document.all? document.all.cella_a001 : "" if (hatterszin) { if (hatterszin.style.backgroundColor.indexOf("aqua")!=-1) hatterszin.style.backgroundColor="yellow" else hatterszin.style.backgroundColor="aqua" } } setInterval("hatterszin_A1()", sebesseg)

// Cella B1-es háttérszín

var sebesseg=1000 function hatterszin_B1() { var hatterszin=document.getElementById? document.getElementById("cella_b001") : document.all? document.all.cella_b001 : "" if (hatterszin) { if (hatterszin.style.backgroundColor.indexOf("aqua")!=-1) hatterszin.style.backgroundColor="#69f" else hatterszin.style.backgroundColor="aqua" } } setInterval("hatterszin_B1()", sebesseg)

// Cella A2-es háttérszín

var sebesseg=1400 function hatterszin_A2() { var hatterszin=document.getElementById? document.getElementById("cella_a002") : document.all? document.all.cella_a002 : "" if (hatterszin) { if (hatterszin.style.backgroundColor.indexOf("lime")!=-1) hatterszin.style.backgroundColor="#f36" else hatterszin.style.backgroundColor="lime" } } setInterval("hatterszin_A2()", sebesseg)

// Cella B2-es háttérszín

var sebesseg=1300 function hatterszin_B2() { var hatterszin=document.getElementById? document.getElementById("cella_b002") : document.all? document.all.cella_b002 : "" if (hatterszin) { if (hatterszin.style.backgroundColor.indexOf("yellow")!=-1) hatterszin.style.backgroundColor="#cf3" else hatterszin.style.backgroundColor="#yellow" } } setInterval("hatterszin_B2()", sebesseg)

// Cella A3-as keretszín

var sebesseg=800 function keretszin_A3() { var keretszin=document.getElementById? document.getElementById("cella_a003") : document.all? document.all.cella_a003 : "" if (keretszin) { if (keretszin.style.borderColor.indexOf("blue")!=-1) keretszin.style.borderColor="#f00" else keretszin.style.borderColor="blue" } } setInterval("keretszin_A3()", sebesseg)

// Cella B3 keretszín és háttérszín

var sebesseg=700 function keret_hatter_B3() { { var keretszin=document.getElementById? document.getElementById("cella_b003") : document.all? document.all.cella_b003 : "" if (keretszin) { if (keretszin.style.borderColor.indexOf("black")!=-1) keretszin.style.borderColor="#fff" else keretszin.style.borderColor="black" } } { var hatterszin=document.getElementById? document.getElementById("cella_b003") : document.all? document.all.cella_b003 : "" if (hatterszin) { if (hatterszin.style.backgroundColor.indexOf("white")!=-1) hatterszin.style.backgroundColor="#cfc" else hatterszin.style.backgroundColor="white" } } } setInterval("keret_hatter_B3()", sebesseg)