Mielőtt belebonyolódnánk a részletekbe, nyomogassuk az alábbi nyomógombokat, és húzogassuk az egeret a táblázat elemei felett. Amit cselekedni fogunk az meglehetősen haszontalan, de annál látványosabb lesz. Egyike azon trükköknek, amit a JavaScript nyelv segítségével valósíthatunk meg. (A Navigator + Unix összeállításon dolgozóknak a refresh frame parancsot is használniuk kell.)
| Zöld lesz a háttér, ha elhúzod felette az egeret. | Piros lesz a háttér, ha elhúzod felette az egeret. | Visszaáll az eredeti háttér, ha elhúzod felette az egeret. |
A háttérszínek megváltoztatásához a következő három függvényt használtuk fel. (Ezek szerint a JavaScriptben lehet függvényeket definiálni.)
<script LANGUAGE="JavaScript">
function PirosHatter() {document.bgColor="#ff0000"}
function ZoldHatter() {document.bgColor="#00ff00"}
p>function EredetiHatter() {document.bgColor="#f8f4e0"}</script>
Láthatjuk, hogy a függvényeket a <script></script> utasítások közé kell helyezni, a függvény definiálásához a function kulcsszót kell használni és ne felejtsük el a kapcsos zárójelet sem. (Aki C-ben programozott már, az nem fogja.)
A document az éppen aktuális dokumentumra (jelen esetben a frame tartalmára) utal. A document.*** azt jelenti, hogy a dokumentumunk valamilyen *** tulajdonságát, jelen esetben a háttérszínét kívánjuk megváltoztatni.
A document nevű objektumnak a következő tulajdonságait változtathatjuk meg hasonlóképpen:
| alinkColor | Az aktív linkek szine (active link) |
| bgColor | Háttérszín |
| fgColor | Előtérszín |
| linkColor | A linkek szine |
| vlinkColor | A már használt linek szine (visited link) |
Nézzük meg, hogy pl. a piros nyomógomb esetén mi aktivizálja a függvényeket!
<FORM> <INPUT TYPE="button" value="Piros háttér" onclick="PirosHatter()"> </FORM>
Az onclick="PirosHatter()" azt jelenti, hogy klikkentés esetén a PirosHatter() függvény dolgozik.
Nézzük meg, hogy pl. a második esetben - az egérmozgatáskor - aktivizálja a függvényeket!
<a href="js1.htm#eleje" onmouseover="PirosHatter();return true"> Piros lesz a háttér, ha elhúzod felette az egeret.</a>
Az onmouseover="PirosHatter();return true" azt jelenti, hogy az egér átmozdítása esetén a PirosHatter() függvény dolgozik.
hasonló módon lehet a bal oldalon alul található státuszmezőben szöveget elhelyezni.
Itt az ablak nevű objektum státuszmező nevű tulajdonságát kell átírni:
onMouseOver="window.status='Ez a státuszmezo';return true"
Megváltoztatja a státuszmezőt, ha elhúzod felette az egeret.