Hotová řešení > Text jako odkaz překrytý obrázkem

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.

Nadpis mého webu

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.

CSS

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“.

HTML

<h1><a href="/">Nadpis mého webu <span> </span></a></h1>

Výsledek v prohlížeči

Stáhnout uvedené řešení ↓ (ZIP, staženo 1193×)

 

Rovnou k použití

Novinky na webu

Chronologický přehled novinek na tomto webu

Důležité a užitečné

Vstup do diskusního fóra

Diskusní fórum

Mapa webu

Prohlédněte si strukturu webu pro snažší orientaci.

Stažení tohoto webu

Stáhnout celý web (V budoucnu)

Vytvoření webu od A do Z

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)

Ódy na tento web

Zapějte taky nějakou…

Podpora webu

Jak můžete podpořit tento web

Aktualizace webu

Poslední aktualizace webu proběhla
24. 3. 2010.

 

 TOPlist