Vyšperkujte svoje webovské stránky V. - Grafika.cz - vše o počítačové grafice

4. srpna 2000, 00.00 | Opět další tipy, fígly a postupy kterak vylepšit své stránky po funkční i technické stránce...

Po jisté odmlce je tu pro vás další díl užitečných tipů, postupů či vylepšení pro vaše webovské stránky. Dnes se po celou dobu zdržíme u několika jednoduchých, ale účinných javascriptů.

14) Nenechte se vtáhnout do cizích rámů

Někdo z vás asi již při přečtení nadpisu ví o jakém problému nebo spíše nešvaru nejen českého internetu se bude v následujících řádcích jednat. Pro ty kdo netuší vše vysvětlím. Občas se stává, že vytvoříte stránky natolik zajímavé či užitečné, že to někomu jinému nedá a vytvoří "vlastní" stránku realizovanou rámy. Do horního rámu dá například svůj nadpis a do hlavního rámu načte bezostyšně vaše stránky. Je to nepříjemná věc. Jednak se bezúčelně zmenší plocha pro vaši stránku, zkazí se design a především je možné, že nevšímavý návštěvník připíše v duchu tento váš výtvor osobě, která je uvedena např. v horním rámu s nadpisem. 

Jak se bránit? Pokud o tom budete vůbec vědět, můžete upozornit autora (pokud vůbec seženete jeho e-mail), že se to nedělá. Mnohem lepší je obrana ryze technická jednoznačně zamezující načtení do rámu, i když se o to kdokoli pokusí. Do každé stránky, kterou chcete takto chránit je třeba vložit krátký javascript.

<SCRIPT language=javascript>
if (self!=top) top.location=self.location; 
</SCRIPT>

Tento skript říká: pokud tato stránka není top (nejvyšší rám, resp. bez rámu) nechť se tato stránka načte do nejvyššího rámu (a zruší jeho předcházející obsah)

15) Posun v historii odkazem

Možná jste již narazili na otázku, jak zařídit aby se návštěvník vaší stránky vrátil odkazem "ZPĚT" vždy na stránku ze které přišel, i když se na danou stránku mohl dostat ze tří různých míst. Vytvářet tři téměř totožné stránky jen s jiným odkazem "ZPĚT" by bylo dosti neprofesionální. Přitom je zde velmi jednoduché univerzální řešení. Pomocí javascriptu se totiž můžete odkazovat na stránky v Historii vašeho prohlížeče zcela stejně jako tlačítky "Zpět" a "Vpřed" v prohlížeči. 

Takto vytvořený odkaz může mít samozřejmě formu textu či obrázku. Pokud Vám vyhovuje textový odkaz je kód následující:

pro zpět: <a href="javascript:history.go(-1);">Zpět</a><br>

pro vpřed: <a href="javascript:history.go(1);">Vpřed</a><br>

pro : <a href="javascript:history.go(-1);"> 
<img border="0" src="vswsprev.gif"></a>

Z uvedeného zdrojového kódu je vám nejspíše jasné, že v historii se můžeme vpřed i vzad přemístit o více pozic, vždy relativně vůči aktuální stránce. A co se stane když nezadáme kladné ani záporné číslo, když zadáme nulu? Pod nulou nalezneme aktuální stránku, dojde tedy vlastně k znovunačtení (reloadu) aktuální stránky. 

16) Odkazy pomocí javascriptu

Ve většině případů dostačí běžný způsob vytváření odkazů pomocí čistého HTML, tedy pomocí <a href="...">odkaz</a>. Javascriptový "odkaz" má tu výhodu, že na něj nemusíte kliknout. Aktivovat odkaz můžete (jako jinou akci javascriptu) najetím na daný objekt (text, tlačítko, obrázek) nebo pouhým vstupem na stránku či jejím opuštěním. Druhou výhodou oproti klasickému odkazu je možnost jednou akcí (kliknutí, najetí ap.) vyvolat několik změn (např. v různých rámech) současně. Srozumitelně řečeno: jedním klinutím se změní obsah dvou a více rámů zároveň.

Nejdříve si ukážeme odkaz, který se aktivuje po najetí myší nad odkaz a změní obsah této stránky (poté použijte tlačítko ZPĚT). 

<a onmouseover="window.location='https://www.grafika.cz';" 
href="#">odkaz</a>

odkaz

Stručný komentář: 

• onmouseover je název události, kterou musí uživatel vyvolat ke spuštění akce (zde změně obsahu okna) - onmouseover událost je vyvolána najetím myší nad objekt.
• Častou chybou bývá záměna uvozovek a apostrofů. Dobré je mít na paměti, že používají-li se v zápisu javascriptu uvozovky i apostrofy, jsou uvozovky vždy vně. 
• Zápis má na svědomí to, že odkaz realizovaný javascriptem se stále jeví jako odkaz, tj. má barvu odkazu i se nad ním zobrazí ručička. Pozn.: není možno použít při onClick akci.

Skutečnost, že javascriptový odkaz vůbec nemusí být k poznání dokazuje grafický odkaz (kulička) níže. U tohoto odkazu je použita událost onclick - k aktivaci akce (odkazu) je třeba tedy na objekt (odkaz) kliknout.

Zdrojový kód je následující:

<img onclick="window.location='https://www.grafika.cz';" 
border="0" src="vswsbod.gif">

Vzhledem k rozsáhlosti použití a množství modifikací souvisejících s javasciptovým příkazem location se k němu vrátíme v příštím pokračování seriálu, kdy se již podíváme na použití v souvislosti s rámy. 

Předcházející díly seriálu: 1. díl, 2. díl, 3. díl, 4. díl