Hotová řešení > Text jako odkaz překrytý obrázkem
Toto řešení je téměř shodné s tím z předchozí kapitoly.
Jako nadpis svých stránek chceme mít tento obrázek.
K definici spanu přidáme cursor: pointer, aby i Internet Explorer ukazoval při najetí na obrázek ručičku. Opět pamatujeme na velikost písma, to co by přeteklo přes okraje obrázku nebude vidět.
Řešení má velké využití při tvorbě hlavních nadpisů stránek a log, které jsou často řešeny obrázkem, který má být zároveň klikatelný a směřovat na úvodní stránku webu.
h1 {
margin: 0; padding: 0;
position: relative;
overflow: hidden;
}
h1, h1 span {
width: 376px; height: 56px;
}
h1 span {
background: url("nadpis.gif") no-repeat 0 0;
display: block;
position: absolute;
top: 0; left: 0;
cursor: pointer; /* rucicka pri najeti i v IE */
}
Obsah nadpisu i se spanem „obalíme do odkazu“.
<h1><a href="/">Nadpis mého webu <span> </span></a></h1>
Stáhnout uvedené řešení ↓ (ZIP, staženo 1469×)
Chronologický přehled novinek na tomto webu
Prohlédněte si strukturu webu pro snažší orientaci.
Stáhnout celý web (V budoucnu)
Nemáte čas nebo nechcete studovat?
Přečtěte si návod, jak vytvořit web od A do Z, aneb snadno a rychle… (V budoucnu)
Jak můžete podpořit tento web
Poslední aktualizace webu proběhla
24. 3. 2010.