Hrátky s titulkem v záhlaví okna

Skriptů a tipů, které různě cvičí se stavovým řádkem prohlížeče, máme zde na Intervalu dostatek příkladů. V tomto článku se podíváme, zda lze titulek v záhlaví okna prohlížeče využít i k něčemu jinému, než je suchý název stránky.

Nejprve si shrňme zásadní pravidla:

• Text titulku záhlaví okna se uvádí mezi párovou značku <title>.
• Element TITLE patří do hlavičky dokumentu.
• Pokud stránky obsahují rámce, je zobrazen titulek stránky s framesetem, titulky dokumentů v jednotlivých rámcích nemají na záhlaví okna vliv.
• Element TITLE je povinný, pokud však není uveden nebo je prázdný, IE a Opera zobrazí v záhlaví okna URL, Mozzilla a Netscape nechá v záhlaví pouze název prohlížeče.
• Element TITLE by měl v hlavičce následovat až za meta-tagem kódování, jinak se často stává, že titulek není zobrazen správným kódováním a hlavně to velmi často „rozhodí“ systém automatického rozpoznání kódování prohlížečem a stránka je pak zobrazena v úplně jiném kódování, než je uvedeno v meta-tagu.
• JavaScriptem můžeme k textu titulku přistupovat přes objekt document.title.

Z výše uvedeného článku je účel TITLE jasný, pokud však uvažujeme o cíleně zaměřené aplikaci, například na intranetu, kde se používají k prohlížení stránek klasické prohlížeče (ne tedy různá čtecí zařízení nebo alternativní prohlížeče), můžeme i titulek do jisté míry využít ke speciálním efektům. Je však dobré vědět, že některé zásahy, ač jsou funkční, mohou znevýhodnit pozici našich stránek ve vyhledávačích, znesnadnit procházení stránek uživatelům používajícím nevizuální prohlížeče a vytvořit tak bariéru našeho webu.

Co možné není:

• jakkoli ovlivnit vzhled (styl) záhlaví okna (font, barvu)
• vkládat HTML značky, obrázky, odkazy – obsahem může být opravdu pouze text
• není povolen například ani atribut title pro kontextovou nápovědu
• obsluhovat události (onclick, onmouseover atd.)

I přesto zbývá pár triků, kterým můžeme záhlaví řekněme okořenit:

• můžeme použít speciální znaky zadávané entitami
• můžeme pomocí obvyklých znaků složit různé grafické vzory, ornamenty nebo symboly
• můžeme vložit dostatek nedělitelných mezer, čímž se ze záhlaví okna odsune text názvu prohlížeče
• pomocí JavaScriptu můžeme přímo za běhu měnit obsah titulku stránky
• v IE můžeme do viditelné části zobrazit maximálně 96 znaků, Opera zobrazí maximálně 132 znaků, Mozilla 136, zbytek je oříznut

Pokud chcete hojně využívat speciální znaky, je nejlepší používat pro kódování stránky UTF-8. S pomocí pomůcky „Mapa znaků“ si můžete přímo vybrat požadovaný znak. Znakům, u kterých není uvedena možnost zadávání přes ALT na numerické klávesnici se vyhněte – nemusí být korektně zobrazeny ve všech prohlížečích a na všech systémech. Je možné zadávat znaky i entitami, ty si vyberete nejlépe v tabulce speciálních znaků.

Prohlédněte si ukázku stránky v kódování UTF-8. Zde jsou na jednotlivých řádcích uvedeny ukázky možné „dekorace“ titulku – poklepáním myší se text nastaví do titulku okna. Na jednu věc je však třeba upozornit. Zatímco mezi značky zapisujeme entity speciálních znaků, pokud používáme pro nastavování titulku JavaScript document.title='Nový text titulku';, pak entity není možné použít, znaky je potřeba zadat přímo v jejich podobě v kódování UTF-8. Například místo entity pro nedělitelnou mezeru   je třeba zadat znak pomocí numerické klávesnice jako ALT-0160. Tyto kódy zjistíme pomocí Mapy znaků.

Zajímavým efektem může být rolování textu v záhlaví okna (jakoby Marquee v titulku). Využijeme následující skript:

msg=top.document.title; // převzít aktuální text z titulku okna
l=msg.length; // zjistit délku
i=l-1; // počet rolovaných znaků
function movetitle()
{ 
  top.document.title=msg.substring(i,l)+msg.substring(i,0); // nastavit titulek na odříznutý počet rolovaných znaků z konce a přidat zbytek začátku
  i=(i+1) % l // posunout rolování – zvýšit o počet rolovaných znaků a vypočítat zbytek po vydělení počtem rolovaných znaků
}
setInterval(„movetitle()“,50); // nastavit opakované provádění rolování
 

Dalším efektem může být rozblikání titulku okna, které se může hodit pro upoutání pozornosti v případě, že okno naší aplikace není aktivní. Jakmile okno nebude v popředí (ztratí focus), začne titulek blikat:

var msg=top.document.title; // převzít titulek okna
var newmsg=“                                                                                                                 „; // co zobrazovat při blikání – zde nedělitelné mezery zadané pomocí ALT-0160
var tstat=true; // status pro přepínání textů v titulku (blikání)
var isblink=false; // blikat ano/ne
function BlinkTitle()
{
  if (!isblink)
  { // nemá blikat, okno má focus
    if (!tstat)
    { // v titulku není původní text
      top.document.title=msg; // vrátit původní text
      tstat=true; // přepnout status
    }
  }
  else
  { // okno nemá focus, blikat
    if (tstat)
    { // v titulku je původní text
      top.document.title=newmsg; // nastavit („přebliknout“) na nový text
      tstat=false; // prohodit status
    }
    else
    { // v titulku je alternativní text
      top.document.title=msg; // vrátit původní text
      tstat=true; // prohodit status
    }
  }
}
function StartBlink()
{
  isblink=true;
}
function StopBlink()
{
  isblink=false;
}
setInterval(„BlinkTitle()“,400); // nastavit opakování žádosti o blikání
window.onblur = StartBlink; // pokud nemá okno focus (není v popředí), zapnout blikání
window.onfocus = StopBlink; // pokud má okno focus, neblikat
 

Jistě by se našlo i elegantnější řešení vypnutí blikání, ne ovšem každý browser korektně podporuje clearInterval(), takže jsem volil raději tento postup, který je vcelku bezkolizní ve většině browserů.

Na závěr jen dodám, že pro systémy Windows existují takzvané HTA aplikace (zjednodušeně vznikne taková aplikace přejmenováním HTML stránky na soubor s příponou .hta), kde lze do titulku také přidávat vlastní ikonku. Popis HTA aplikací však vydá na samostatný článek.

Věřím, že se v článku podařilo vyvrátit některé mýty a že některé z tipů se budou hodit pro Vaše intranetové aplikace nebo zvláštní prvky na webu. Všechny zdrojové kódy ukázek si samozřejmě můžete stáhnout.

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

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