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

19. února 2001

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.

Štítky: Články

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 *