11. óra: A weblap színeinek változtatása

A weblap - mint mindannyian tudjuk - nem egy statikus dokumentum, lehetnek benne utalók (link), ûrlapok (pl. menetrend), és képes arra, hogy a felhasználó kérése szerint változtasson a megjelenésén,

Ezen az órán készítünk egy 'gomb'-ot, amelynek a megnyomására a weblepunk inverz színekben jelenik meg. (Ismételt megnyomásra visszaáll az eredeti állapot.)

Lépjen be az Import/gyongyike-11A mappájába, és nyissza meg Szövegszerkesztõben, vagy Geany-ben a gyongyike.html, és a gyongyike.css fájlt! (Ha Geany-t használ, a régebbi fájlokat zárja be, mert nagy lesz  a káosz...)

 

1. lépés: A nyomógomb elhelyezése a lapon

Egy dobozt helyezünk el a weblapjobb felsõ sarkában inverz színekkel, felirata: 'Inverz szín' lesz.

1. A) A doboz elhelyezése a gyongyike.html-ben

Vegye elõ a gyongyike.html fájlt, és keresse meg a <body> tag-et.
 
A <body> tag mögé helyezze el <div></div> kezdõ és záró tag-eket.
 
A tag id-je legyen "gomb", tartalma (amit a két tag közé gépel): "Inverz szín".
 
(Ld. jobbra a gyongyike.html egy részlete.)
 A gyongyike.html megfelelõ részlete:
...
</head>
<body>
<div id="gomb">
    Inverz szín
</div>
<div id="folap">
...
 
 

1.B) A dodoz beállításai a gyongyike.css-ben

Vegye elõ a gyöngyike.css fájlt, és valahol a fájlban hozzon létre egy elemleírót a gomb nevû (id-jû) elem számára!
 
Az egyes beállítások jelentése:
  • background-color és color a háttér és a betûszín - ebben a kis dobozban az inverz színekre van állítva;
  • positition: absolute, a doboz pozíciója abszolút (mindig a jobb felsõ sarok);
  • top és right, a doboz jobb felsõ sarkának távolsága a lep tetejétõl, ill. a jobb szélétõl.
  • line-height, függõlegesesn középre a megadott magasságon belül (30px).
  • A többit már ismerik...
 A gyongyike.css megfelelõ részlete:
...
#gomb{
    background-color: #4b0082;
    color:  #faebd7;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 100px;
    height: 30px;
    text-align: center;
    line-height: 30px;
}
...

Ha így menti el a két fájlt (gyongyike.html és gyongyike.css), utána a html-t böngészõben megnyitva tekintse meg az eredményt:

Ha a gombot jelképezõ doboz a jobb felsõ sarokban megjelenik inverz színekkel, akkor mehetünk tovább...

 

2. lépés: A gomb tényleges aktivizálása

2. A) A gomb dobozát 'feokosítjuk', hogy ha rá kattintanak, akkor induljon el valami...

Vegye elõ a gyongyike.html fájlt, és keresse meg a gombot beállító tag-et. (<div id="gomb">)
 
A tag-et egészítse ki az onClick="fordit();" szöveggel! (Mindez a tag-en belül, mert a doboz tulajdonsága ez:
  • onClick= azt jelenti, hogy ha rákattintanak erre a dobozra, most megmondjuk, mi legyen...
    onClick="itt mondjuk meg" (Ügyeljen a kis/nagybetûkre!)
  • fordit(); Egy fordit nevû függvényt kell elindítani. Ezt rendeltük a megnyomáshoz.
    (A két zárólej jelzi azt, hogy függvény, a ; azt, hogy ezzel befejeztük a mondandónkat.)
 A gyongyike.html megfelelõ részlete:
...
</head>
<body>
<div id="gomb" onClick="fordit();">
    Inverz szín
</div>
<div id="folap">
...
 
 

2.B) A tényleges feladatot végzõ valtas() függvény elkészítése

Vegye elõ a gyöngyike.html fájlt, keresse meg a </head> tag-et, és elé gépelje be az alábbi utasításokat:
(Azért a head-be tesszük, hogy ne lehessen látni. Kis/nagybetû fontos, zárójelekre, írásjelekre ügyeljen!)
 
Az egyes sorok jelentése
 A gyongyike.html megfelelõ részlete:
...
<link href="./anyagok/11Adigi-011.weblap-inverz.szinek/gyongyike-2.css" rel="stylesheet" type="text/css">
<script>
function fordit(){
    document.getElementById("gomb").style.color = '#4b0082';
    document.getElementById("gomb").style.backgroundColor = '#faebd7';
    document.body.style.color = '#faebd7';
    document.body.style.backgroundColor = '#4b0082';
    document.getElementById("valtozat").style.backgroundColor = '#240030';
}
</script>
</head>
...

Eddig jutottam...