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:

A CSS, azaz stílusfájlban megírt meghatározásokkal:

Igény szerint formázhatjuk: táblázat, cellák, szöveg, megjelenését. (Méretben és színben)
A stílusfájl meghatározásai, nem befolyásolják a Javascript által megvalósított színváltozatokat.
Jelentősége akkor van, ha a Javascript fájl, valamilyen okból nem működik, vagy nem kapcsolódik az xhtml dokumentumunkhoz, ebben az esetben a CSS, azaz stílusfájlban megírt színmeghatározások lépnek érvénybe.

#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

Jelölések:

Szürke szín, egy adott funkcióra vonatkozó meghatározásokat foglalja magába.
Azonosítónak, tetszőleges elnevezést adhatunk, de minden funkciónak más és más elnevezést kell adni.
Kék színnel kiemelt részek, táblázat vagy cellák azonosítójára vonatkoznak
Piros színnel kiemelt részek, keret vagy háttérszín meghatározására vonatkoznak

//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)