Tak tohle jsou úplně normální odkazy, jenom trochu upravené globálním stylopisem. Jak vypadá ten stylopis:
a { padding: 0.3em 1em 0.3em 1em; border: outset 0.5em;
font-weight: bold; text-decoration: none }
a:link, a:visited { background: #000080; color: #fff }
a:hover { background: #00f; color: #ff0; border: inset 0.5em }
Příklad se správně vykreslí v IE 5.5. Ve verzi 5.0 to občas (nevím proč) nefunguje. Ve verzi IE 4 (asi 20% uµivatelů v roce 2001, 0,5% v roce 2003) se aplikují pouze barvy (ne okraje ani velikost). V Netscape 4 se tlačítko nemění při přejetí my±í, protoµe Netscape 4 nepodporuje a: hover. V Mozille (která a:hover podporuje) se správně počítá padding, takµe se odkazy roz±iřují i přes ostatní text. Je tedy dobré drµet se při zemi a zadávat men±í vnitřní okraje, nebo nastavit celému odstavci margin, případně vý±ku řádku (line-height).
Pro IE 5.0 stačí nastavit výąku odkazu a {height:1 em; ....Vý±e uvedená deklarace je dost ne±ikovná, protoµe udělá tlačítkové v±echny odkazy (jak je asi vidět). Na deklarování tlačítkových odkazů je proto dobré vytvořit si třídu odstavce (třeba "tlacitko") a tlačítkové odkazy umís»ovat do tohoto odstavce. Ve stylopisu se pak pouµívá
třída a kontextová deklarace Jen ilustračně:
p.tlacitko a {padding....
Podobný příklad:
Obrázek v tlačítku se v Mozille a v Opeře vykreslí mimo tlačítko :-(
Úprava pro Firefox: < a style="display: block;width: 131px;" href="../index.html">
Úprava pro Firefox i Operu:
<a style=" display: block;_width:131px; max-width: 131px;" href="../index.html">
Problém je potom s tím, ľe se za odkazem láme řádek (má nastaveno display: block;). Pokud by se mělo dát víc obrázků vedle sebe, musel by se jim přidat float.
Příklad se vztahuje k textu zdokonalení odkazů.