Skočit na obsah

Odlišení odkazů na externí soubory pomocí Javascriptu a CSS

Stalo se dobrou praxí vyznačovat odkazy na externí soubory od běžných odkazů. Vyžadují to koneckonců i pravidla přístupnosti. Pojďme se podívat, jak je možné tuto činnost zautomatizovat pomocí Javascriptu a CSS.

Jedním ze základních prvků dobré použitelnosti přístupnosti je důsledné označování odkazů, které vedou na jiný obsah než je WWW stránka. Typicky na nějaký soubor zobrazitelný v externí aplikaci. Jde například o soubory PDF, DOC, ZIP atp.

Myslím, že nejsem sám, koho rozčiluje, když klikne na odkaz a místo nové stránky se mu zobrazí pomalu se načítající externí aplikace typu Adobe Acrobata nebo WinZIPu. Jsem vždycky rád, pokud mi autor webu prozradí, co mě po kliknutí čeká, ještě než sám na odkaz kliknu.

Hledal jsem možnosti, jak elegantně vyřešit označování takových odkazů a jelikož nejsem mistr světa ani na kaskádové styly, ani na javascript, nechal jsem se poučit jinde.

Přestavme si situaci, kdy máme odstavec textu, ve kterém jsou tři odkazy. Jeden na PDF, druhý na DOC, třetí na ZIP. Pomocí malé ikonky za odkazem, kterou umístíme pomocí kaskádových stylů (vlastnost background), pak odlišme jednotlivé odkazy. Jenže jak poznat, který odkaz kam vede?

Kaskádové styly

V kaskádových stylech existuje syntaxe a[href$="pdf"], která aplikuje vlastnost v CSS pouze na takový odkaz, který vede jen na PDF. Stačí do stylů dát toto:

a[href$="pdf"] {
   padding-right:17px;
   background: transparent url('pdf.gif') no-repeat top right;
}

Většinu z vás pravděpodobně hned napadla otázka, jaké prohlížeče tuto syntaxi podporují. Z mnou testovaných bohužel jen Mozilla/Firefox.

Zkusme to tedy jinak.

Javascript

Na weblogu Maratz.com jsem našel šikovný návod. Nejprve si připravme kaskádové styly:

.pdfLink {
   padding-right:17px;
   background: transparent url('pdf.gif') no-repeat top right;
}
.zipLink {
   padding-right:17px;
   background: transparent url('zip.gif') no-repeat top right;
}
.docLink {
   padding-right:17px;
   background: transparent url('doc.gif') no-repeat top right;
}

Poté vložíme do stránky javascriptový kód, kterým dokážeme poznat a určit, kdy kterou CSS třídu použijeme.

function fileLinks() {
   var fileLink;
   if (document.getElementsByTagName('a')) {
     for (var i = 0; (fileLink = document.getElementsByTagName('a')[i]); i++) {
       if (fileLink.href.indexOf('.pdf') != -1) {
         fileLink.className = 'pdfLink';
       }
       if (fileLink.href.indexOf('.doc') != -1) {
         fileLink.className = 'docLink';
       }
       if (fileLink.href.indexOf('.zip') != -1) {
         fileLink.className = 'zipLink';
       }
     }
   }
}
window.onload = function() {
   fileLinks();
}

O tom, jak tento způsob funguje, se můžete přesvědčit na názorném příkladu. Tato metoda je použitelná jak pro MSIE (od 5.5 výše), tak pro Mozillu či Operu.

Osobně se mi takové automatizované vyznačování druhů odkazů líbí. Ušetří to mnoho práce. Je to právě jedna ze situací, kdy je Javascript šikovným pomocníkem, avšak není na něm závislá funkčnost webu.

Škoda jen, že tento způsob neřeší ještě druhou podstatnou věc, a sice vyznačení velikosti externího souboru. Ale to bych zřejmě řešil pomocí serverových scriptů nebo možností CMS. I když i tady možná někdo přijde na elegantnější možnost.

Přidejte svůj komentář

David Špinar | 25. února 2005 | 23 komentářů | Trvalý odkaz

Hledání


Nové komentáře

Tip pro vás

Kurz přístupného webu

Chcete-li ušetřit za drahé konzultace a audity přístupnosti, doporučuji navštívit jednodenní Kurz tvorby přístupného webu.

Doporučuji

H1.cz: Odborné poradenství pro podnikání na Internetu

H1.cz: Odborné poradenství pro podnikání na Internetu

Kniha Tvoříme přístupné webové stránky

Více informací o mé knize

Reklama

Kvalitní hosting

Jednotná cena, individuální přístup. 500 MB, PHP, MySQL, antispam.

www.Cesky-Hosting.cz

 

Přístupnost - web a weblog věnovaný přístupnosti webových stránek, který píše David Špinar

Prohlášení o přístupnosti | RSS weblogu | RSS komentářů weblogu | Vypnout CSS | Hostováno u Český hosting | Doména u IInfo