ZONER Cookies

Vážený návštěvníku, potvrzením pomocí tlačítka OK udělujete souhlas nám a našim partnerům s použitím cookies pro nezbytné, analytické a marketingové účely na tomto zařízení. Volbou Nastavení můžete sami určit, jaké skupiny cookies je možné zpracovávat, popřípadě jejich zpracování úplně zakázat. Ukládání nezbytných cookies probíhá vždy, a to v zájmu zachování funkčnosti webové prezentace.

V tomto okně můžete zvolit kategorie cookies v souladu s vlastními preferencemi.

Nezbytné

Tyto cookies zajišťují bezchybný provoz našich webových stránek. Umožňují například vložení služby do objednávky, ukládání dat s ohledem na bezpečnost webu, přihlašování k webu a podobně. Nezbytné cookies nelze deaktivovat, jelikož by došlo k narušení správného fungování webu.

Preferenční

Preferenční cookies umožňují, aby si webová stránka zapamatovala informace, které mění, jak se webová stránka chová nebo jak vypadá. Je to například preferovaný jazyk nebo region, kde se nacházíte.

Analytické

Díky nástrojům jakými jsou například Google analytics můžeme sledovat, jak stránky používáte, z jakých zdrojů a technologií. Na základě těchto dat můžeme web neustále vylepšovat, aby byl pro vás co nejpřívětivější. Veškerá data jsou anonymizována, konkrétní uživatele tedy identifikovat nemůžeme.

Marketingové

Společně s nástroji třetích stran můžeme zobrazovat vámi preferované reklamy v partnerských sítích přesně dle vašich zájmů. V případě nesouhlasu je vysoce pravděpodobné, že vaše zájmy a preference nebudou zohledněny a bude se vám reklama zobrazovat plošně. Veškeré profily vašich zájmů jsou pseudonymizované, díky tomu není možná bezprostřední identifikace vaší osoby.

Tipy a triky v JavaScriptu – efekty s tlačítky

19. února 2001
•
Miroslav Kučera

Související

Po nějaké době vám opět přináším celkem několik krátkých, ale přitom docela zajímavých a použitelných JavaScriptů, kterými můžete jednoduše vylepšit své vlastní www stránky. V tomto článku se zaměříme na JavaScripty využívající ke své funkčnosti obyčejná formulářová tlačítka.

Tlačítko jako odkaz

Formulářová tlačítka se na stránkách obvykle používají k odeslání obsahu formuláře či nastavení jeho obsahu do výchozího stavu. Formulářová tlačítka lze ovšem snadno používat i jako odkaz, který se načte po kliknutí na tlačítko:

<SCRIPT LANGUAGE=“JavaScript“>
<!–
function JdiNa() { window.location = „http://www.interval.cz“; }
// –>
</script>
<form>
<input type=button value=“Interval.cz“ onClick=“JdiNa()“>
</form>

Příklad odkazového tlačítka:

Hromadný výběr položek formuláře

Taky vás už nebaví zatrhávat na stránkách jednu položku formuláře za druhou a rádi byste toto na svých stránkách vyvarovali? Žádný problém – dejte čtenářům vašich stránek možnost zatržení a dokonce odtržení všech položek formuláře současně. Jak efektní…

<SCRIPT LANGUAGE=“JavaScript“>
<!–
var Zatrzeni = „false“;
function check(field) {
if (Zatrzeni == „false“) {
for (i = 0; i < field.length; i++) {
field[i].checked = true;}
Zatrzeni = „true“;
return „Zruš výběr“; }
else {
for (i = 0; i < field.length; i++) {
field[i].checked = false; }
Zatrzeni = „false“;
return „Vyber vše“; }
}
// End –>
</script>
<form name=form method=post>
<TABLE BORDER=“0″ CELLPADDING=“0″ CELLSPACING=“0″>
<tr><td class=“texttabulka“>
Vyber svoje oblíbené pití:<br>
<input type=checkbox name=list value=“1″>CocaCola<br>
<input type=checkbox name=list value=“2″>Pepsi<br>
<input type=checkbox name=list value=“3″>Mattoni<br>
<input type=checkbox name=list value=“4″>Whiskey<br>
<input type=checkbox name=list value=“5″>H<sub>2</sub>O<br>
<br>
<input type=button value=“Vyber vše“ onClick=“this.value=check(this.form.list)“>
</td></tr></table>
</form>

Příklad hromadného zatržení/odtržení:

Vyber svoje oblíbené pití:
CocaCola
Pepsi
Mattoni
Whiskey
H2O

Náhodný výběr stránky stiskem na tlačítko

Dejte si na stránky formulářové tlačítko, které návštěvníka po kliknutí náhodně vybere jeden z vámi definovaných webů a poté na něj uživatele ihned přesměruje. Počet adres, na které se lze stiskem tlačítka přesměrovat, lze pochopitelně libovolně měnit. V našem demonstračním příkladu jsou uvedeny čtyři odkazy:

<SCRIPT LANGUAGE=“JavaScript“>
<!–
function jdi_na(url) {
window.location=url;
}
function nahodny_odkaz() {
var a;
a = 1+Math.round(Math.random()*4); // číslo 4 značí počet odkazů
if (a==1) jdi_na(„http://www.interval.cz“);
if (a==2) jdi_na(„http://www.czechia.com“);
if (a==3) jdi_na(„http://www.zoner.cz“);
if (a==4) jdi_na(„http://aukce.czechia.com“);
}
// –>

<FORM NAME=“form“>
<INPUT TYPE=“button“ VALUE=“Náhodný odkaz“ onClick=“nahodny_odkaz()“>
</FORM>

Příklad náhodného výběru stránky:

Nová emailová zpráva stiskem tlačítka

V některém článku na Interval.cz jsem popisoval, jak otevřít novou emailovou zprávu kliknutím na odkaz a jak doplnit předmět zprávy či obsah zprávy. Dnes vám ukáži totéž pomocí formulářového tlačítka. Je to velmi jednoduché:

<FORM>
<INPUT TYPE=“button“ VALUE=“Chci poslat email“ onClick=“parent.location=’mailto:nekdo@nekde.cz?subject=Zde je predmet zpravy&body=text zpravy'“>
</FORM>

Příklad otevření nové emailové zprávy:

Nové okno bez externího souboru

Pomocí tohoto jednoduchého JavaScriptu se vám otevře nové okno o nadefinovaných rozměrech a pozici na monitoru. Není potřeba žádný externí soubor, který by se v tomto okně zobrazil, obsah je totiž definován přímo ve skriptu a vypsán pomocí document.write. Rozměry nového okna jsou 150×250 a je umístění 120 pixelů od levého okraje a 120 od horního okraje stránky.

<SCRIPT LANGUAGE=“JavaScript“>
<!–
function okno() {
msg=window.open(„“,“msg“,“height=250,width=150,left=120,top=120″);
msg.document.write(„<html><title>Nové okno</title>“);
msg.document.write(„<body bgcolor=’white‘ onblur=window.close()>“);
msg.document.write(„<center>Nějaký obsah stránky</center>“);
msg.document.write(„</body></html>“);
}
// –>
</script>
<form>
<input type=“button“ value=“Nové okno“ onclick=“okno()“>
</form>

Příklad otevření nového okna:

Navigace pomocí roletového menu

Mnoho www stránek obsahuje odkazy na různé spřátelené weby. Někdy je těchto spřátelených webů ale příliš a na stránek to nevypadá moc dobře. Ideální řešení je jejich skrytí do roletového menu, odkud si čtenář vaší stránky může pohodlně vybrat. Není to lepší? Nezabírá to tolik místa, jako textové odkazy:

<SCRIPT LANGUAGE=“JavaScript“>
<!–
function vyberFormulare(form){
var URL = document.form.web.options[document.form.web.selectedIndex].value;
window.location.href = URL;
}
// –>
</SCRIPT>
<form name=“form“>
<select name=“web“ size=1>
<option value=““>Spřátelené weby
<option value=“http://www.interval.cz“>Interval.cz
<option value=“http://svet.namodro.cz“>Svět namodro
<option value=“http://www.mobil.cz“>Mobil.cz
</select>
<input type=button value=“OK“ onClick=“javascript:vyberFormulare(this)“>
</form>

Příklad roletové navigace:

Efektní tlačítko s odkazem

V tomto posledním JavaScriptu vám ukáži, jak udělat efektní tlačítko, které při najetí kurzorem myši změní v několika krocích svoji barvu. Kliknutím na něj budete poté přesměrováni na zadaný web. Pokud po kliknutí máte stále kurzor nad tlačítkem, text tlačítka se změní z Klikni na text Přesměrovávám. Skript je funkční – respektive změna barvy – pouze v Internet Exploreru 5 a vyšším a v Netscape 6. V Opeře 5 a Netscape 4.xx změna barvy tlačítka nefunguje.

<SCRIPT LANGUAGE=“JavaScript“>
<!–
hexColor = [„0″,“1″,“2″,“3″,“4″,“5″,“6″,“7″,“8″,“9″,“a“,“b“,“c“,“d“,“e“,“f“];
function ZmenaIn() {
for (i = 0; i < 13; i++) {
setTimeout(‚document.formular.button.style.background = „#’+hexColor[12-i]+’0’+hexColor[12-i]+’0c0“;‘, i * 50);
}
}
function ZmenaOut() {
document.formular.button.value = „Klikni“;
for (i = 0; i < 12; i++) {
setTimeout(‚document.formular.button.style.background = „#’+hexColor[i]+’0’+hexColor[i]+’0c0“;‘, i * 50);
}
}
// –>
</script>
<form name=formular>
<input type=button name=button value=“Klikni“ onMouseOver=’ZmenaIn()“ onMouseDown=’document.formular.button.value=“Přesměrovávám“‚ onClick=’window.location=“http://www.interval.cz“‚ onMouseOut=’ZmenaOut()’>
</form>

Příklad tlačítka měnící barvu:

A to je pro dnešek vše, přátelé. Přeji vám hezký den.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.

Předchozí článek Zaměřeno na webdesign - Netpedia.com
Další článek Kostkovaný text ve Photoshopu 6
Štítky: Články
Miroslav Kučera

Mohlo by vás také zajímat

Nejnovější

1 komentář

  1. peto

    Srp 28, 2013 v 14:14

    geniálne rady, okamžite si pridávam tvoj web do záložiek a idem sa hrať s javascriptom :) http://www.extracounterstrike.com/

    Odpovědět

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *