You also want an ePaper? Increase the reach of your titles
YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.
• Témata • Uživatel • Digitál • Profi • Magazín • Internet<br />
• www.?????.<strong>cz</strong> •<br />
Změna vzhledu stránky<br />
<strong>20</strong>/04<br />
Jan Polzer<br />
Javascript: zachycení a využití události po najetí ukazatele myši<br />
Jistě jste si při procházení internetem všimli stránek, kde text, na který najedete ukazatelem myši, změní barvu, případně velikost.<br />
Totéž se děje u některých obrázků, zejména u těch, které slouží jako tlačítka. Toto všechno si můžete naprogramovat<br />
i na svých stránkách, postačí vám k tomu troška jednoduchého Javascriptu.<br />
Pozdrav při načtení stránky<br />
Většina internetových prohlížečů zobrazuje na spodním<br />
okraji stavový řádek. Chcete-li na něj vypsat vlastní text,<br />
použijte window.status. • V naší ukázce vypíšeme text<br />
hned při načtení stránky. Můžeme k tomu použít událost<br />
onload, • kterou umístíme do značky .<br />
Základ dokumentu<br />
Použijeme HTML dokument, který musí mít správně nadefinovanou<br />
hlavičku. • Chcete-li, aby znaky s diakritikou<br />
byly čitelné, zvolte správné kódování. • Pokud stránku vytváříte<br />
v operačním systému Windows, bude zřejmě správným<br />
řešením charset=windows-1250.<br />
Správnost zápisu<br />
Jestliže provedenou akci u události zapisujete do uvozovek,<br />
pak vlastnosti, které v události upravujete, musí být<br />
uvozeny apostrofy. • To platí nejen pro nastavení barevného<br />
pozadí nebo jiné vlastnosti pro vzhled prvku, • ale<br />
také pro řetězce, které chcete někde vypsat. •<br />
Funkce, či spíše reakce na události,<br />
které jsou v této ukázce<br />
použity, vpisujeme jako parametr<br />
k nějaké HTML značce.<br />
Vždy platí tvar název_události=“provedené_akce“.<br />
•<br />
Značka • uvozuje<br />
hlavní tělo HTML<br />
dokumentu. Podobně<br />
jej musí uzavírat pomocí<br />
.<br />
Namísto background • můžete<br />
samozřejmě použít jakoukoli jinou<br />
vlastnost z CSS stylů.<br />
Dvě události<br />
Nezapomínejte, že musíte ošetřit jak událost při obdržení<br />
kurzoru, tak při jeho ztrátě. Pokud byste u prvku <br />
vynechali ošetření události onblur, • políčko by od doby,<br />
kdy do něj uživatel klepne, zůstalo už pořád ve stavu vytvořeném<br />
pomocí události onfocus. •<br />
Oživení formuláře<br />
Pro ukázku použijeme zjednodušený formulář z minulé vystřihovánky.<br />
Ponecháme pouze jeden prvek input, • který<br />
nás bude zajímat, a tlačítka pro odeslání • a vymazání •<br />
formuláře. Uživatelé ocení, pokud je políčko, ve kterém se<br />
právě nachází kurzor, barevně odlišeno od ostatních. •<br />
Pomocí události onfocus • nastavíte vzhled políčka, jakmile<br />
se do něj kurzor dostane. Opuštění kurzoru • pak<br />
ošetříte událostí onblur. •<br />
Kombinace událostí a stylů<br />
V událostech onfocus a onblur nastavujete<br />
barvu pozadí • editačního políčka .<br />
Slůvkem this • prohlížeči naznačujete, že<br />
budete pracovat s HTML elementem, ve kterém<br />
se událost nachází. Slůvkem style • pak<br />
naznačíte, že budete upravovat vzhled, a konečně<br />
pomocí background • a nastavení<br />
hodnoty upravíte pozadí políčka.<br />
"<br />
• Získat předplatné je snadné, veškeré informace naleznete na straně 121<br />
• Computer <strong>20</strong>/04 97
Change language