|
|
Cellák színváltozása.
Mobilváltozat!
Asztali változathoz,
kattints a képre!
| 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.
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.
Program megírása, JavaScript fájlban:
Megtekinthető asztali változatban.