Odskoky na stránky pomocí radio button

15. listopadu 1999

Odkazy na nové stránky lze vytvořit různými způsoby. Hypertextové odkazy, obrázky, drop-and-down menu a další. Dnes vám ukážeme jeden z těch méně tradičních a spíše vyjímečných – odkazy pomocí prvku radio button.

Radio button je klasické výběrové tlačítko v HTML formulářích a většinou se používá pro zaškrtnutí jedné z více možností. V tomto článku uvidíte, že je lze použít i pro jiné účely. Vyzkoušejte si prosím nejprve tento příklad:


odskok na Zoner.cz
odskok na inShop.cz
odskok na Czechia.com
odskok na Interval.cz

Jak sami vidíte, po kliknutí na vybraný radio button se vám načte vybraná stránka. Je to samozřejmě provedeno pomocí JavaScriptu, který je definován na začátku HTML dokumentu. Zdrojový kód je v následující tabulce:

<script language=“JavaScript“>
<!–
function Odskok (adresa)
{
  var nova_adresa=adresa;
  if ( (nova_adresa != "") && (nova_adresa != null) )
  {
    window.location=adresa;
  }
}
–>
</script>


Poté do HTML dokumentu umístníme samotné radio buttony s definovanými odskoky:

<form>
<input TYPE=“radio“ NAME=“r1″ onClick=“Odskok(‚http://www.zoner.cz‘)“>Odskok na Zoner.cz<BR>
<input TYPE=“radio“ NAME=“r1″ onClick=“Odskok(‚http://www.czechia.com‘)“>Odskok na Czechia.com<BR>
<input TYPE=“radio“ NAME=“r1″ onClick=“Odskok(‚http://www.inshop.cz‘)“>Odskok na Inshop.cz<BR>
<input TYPE=“radio“ NAME=“r1″ onClick=“Odskok(‚http://www.interval.cz‘)“>Odskok na Interval.cz<BR>
</form>


Při kliknutí na tlačítko bude pomocí události onClick zavolána funkce „Odskok“ s parametrem adresy nové stránky. Funkce „Odskok“ parametr přijme a otestuje, jestli je adresa vůbec uvedena. Pokud ano, je uživatel přesměrován na adresu uvedenou v parametru funkce. Skript můžete samozřejmě použít pro libovolné množství odkazů na stránce.

Skript by měl bez problémů fungovat v prohlížečích třetí generace (IE 3.0, NN 3.0) a vyšších. Pokud své stránky vytváříte i pro nižší verze prohlížečů či myslíte na ty, co mají vypnuto aktivní skriptování, měli byste na stránce samozřejmě definovat i normální textové odkazy.

Další článek Prohlížečka obrázků
Štítky: Články

Mohlo by vás také zajímat

Nejnovější

1 komentář

  1. jimben

    Kvě 31, 2010 v 20:34

    super – víc takových návodů !!
    http://php-pohadky.unas.cz

    Odpovědět

Napsat komentář

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