11. óra: A weblap színeinek változtatásaA 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:
|
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:
|
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> ... |
- Az egész definíciót a <script> </scrip>
Eddig jutottam...