Text jako odkaz překrytý obrázkem

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.

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 */
  }