Zvýraznění externích odkazů
Na několika webech se mi líbilo zvýrazňování externích odkazů takovýmito malými obrázky.
Našel jsem řešení pomocí CSS (od Pixiho ) a další pomocí JS ( Softnov )
Pixiho CSS řešení není nejšťastnější.(Zkráceno a upraveno)
a[href^=‚http:‘] { background:url(‚/images/mail.gif‘)
}
a[href^=‚mailto:‘] { background:url(‚/images/odkaz_ven.gif‘) }
Nefunguje v IE, to by nebylo nejhorší (pro IE by se dal JS a ostatní jen CSS), ale ono to nefunguje ani v Opeře. Můj nejoblíbenější prohlížeč totiž relativní odkazy přepíše na absolutní a pak jsou všechny odkazy zvýrazněny jako externí :-(
Pro maily to sice v Opeře funguje, IE je ale stále imunní.
Moje řešení (vyhází ze skriptu v menu Opery) používá jen JavaScript.
var i,odkaz;
for (i=0;odkaz=document.links[i];++i){
if ((odkaz.hostname!=location.hostname)&& (odkaz.getAttribute('id') != 'nadpis') && (odkaz.getElementsByTagName('img')[0] == null)){
odkaz.style.background="top right no-repeat url('/images/odkaz_ven.gif')";
odkaz.style.padding="2px 7px 0 0";
vzor = /^mailto:/i;
if (vzor.test(odkaz)){
odkaz.style.background="top right no-repeat url('/images/mail.gif')";
odkaz.style.padding="0px 7px 0 0";
}
}
}odkaz.hostnameVrací doménu stránky, na kterou odkaz
míří. location.hostnameVrací doménu vašeho webu.
(odkaz.getElementsByTagName ('img')[0] == null)Když odkaz obsahuje místo textu obrázek, nebude se
zvýrazňovat. (odkaz.getAttribute('id') != 'nadpis')Když má odkaz id 'nadpis', nebude se
zvýrazňovat – kvůli nadpisu řešeného obrázkem.(Upravte podle svého
nebo smažte)
Dalo by se sice použít přidávání obrázků pomocí class, která by byla definovaná v CSS, to by se pak ale zrušila případná class, kterou odkaz už obsahoval.
Doufám že můj třetí JS skript v životě někomu pomůže.
Rubrika: 27. ledna 2006, 17.32 • Přidej do Linkuj.cz
Komentáře:
Tento článek ještě nebyl komentován, užijte si prvenství.
- Na ostatní komentáře odkazujete např. [2]
- e-mail je nepovinný, pokud ho napíšete bude zobrazen zkomoleně, doufám nečitelně pro roboty.
- Formátování pomocí Texy!
'text odkazu':odkaz, **tučně**, *kurzíva* - Využívá se služby Gravatar.com
Blog
Překlady
Fotografie
Menu
Měnič stylů
