xom`s pinion - Tom Hnatovsky Blog

K hlavnímu menu ↓
K obsahu ↓
K patičce ↓

CSS záměna obrázku při najetí myši

9. dubna 2008 Web design nekomentováno

CSS záměna obrázku při najetí myši Různých metod na efekty po najetí myši na obrázek je mnoho. Dlouhou dobu byly oblíbené JavaScripty využívající onmouse akce. S širší podporou CSS v prohlížečích začali kódéři používat k záměnám obrázků kaskádové styly. Dnes se zmíním o metodě, kterou jsem si vymyslel ráno, když jsem šel pro čerstvé pečivo.

Na začátku každého řešení je nějaký požadavek – já si definoval, že chci mít odkaz na RSS okořeněný pěknou ikonkou, která změní po najetí myši na odkaz barvu. Samozřejmostí je, že řešení musí fungovat ve všech aktuálních prohlížečích.

Kdybych neměl ještě další podmínku, kterou prozradím ve druhém řešení, tak bych postupoval následovně. Grafické stavy ikony bych si uložil do jednoho souboru pod sebe a po najetí myši bych hýbal pozadím nahoru a dolů.

RSS kanál - najeď myší

HTML kód ukázky:

<p class="metoda1">
     RSS kanál - najeď myší
</p>

CSS kód ukázky:

.metoda1 a {
  background: url('rss_icon.gif') top left no-repeat;
  padding: 0 0 0 25px;
  line-height: 20px;
  display: block;
}

.metoda1 a:hover {
  background: url('rss_icon.gif') bottom left no-repeat;
}

Problém nastane, pokud uměle zvětšíme velikost písma – na pozadí jsou vidět oba stavy. Napadají mne dva způsoby, jak tomu předejít..

Nechat na obrázku mnohem větší mezeru mezi oběma stavy, čímž rychle vyřešíme problém, ale zatížíme klienta větší mírou stahovaných dat – větší obrázek.
V odkazu vytvořit nesémanticky prázdný span, který bude mít rozměry ikony a pozadí měnit v něm.

RSS kanál - najeď myší

HTML kód ukázky:

<p class="metoda2">
     RSS kanál - najeď myší
</p>

CSS kód ukázky:

.metoda2 a span {
  background: url('rss_icon.gif') top left no-repeat;
  width: 20px;
  height: 20px;
  line-height: 20px;
  display: block;
  overflow: hidden;
  float: left;
}

.metoda2 a:hover span {
  background: url('rss_icon.gif') bottom left no-repeat;
}

Jak je vidět, tak to funguje, ale chudák ikona se nám s velkým textem ztrácí.

Nyní přichází na řadu moje ranní rohlíková metoda.. Idea je prostá. Pokud umožníme uživateli měnit velikost písma, tak mu umožněme měnit i velikost ikony. Jenže tady narážíme na problém, že umístěný obrázek na pozadí neumějí všechny prohlížeče při manipulaci s velikostí textu měnit. Proto je základem obrázek vytáhnout ven do textu.

Umístěním obrázku v textu sice přicházíme o jeho jednoduchou záměnu při přechodu na jiný stylopis, ale jsme schopni ovlivnit jeho velikost. Záleží na konkrétní situaci, co je nejvhodnějším řešení.

Bystřejší jistě namítají, že jsme si moc nepomohli, protože definice obrázku v pixelech nám jeho zmenšovaní / zvětšování nedovolí, ale my necháme pixely v dáli a rozměry nadefinujeme v relativních jednotkách, já volím em.

Rozměry daného obrázku tedy budeme muset přepočítat, zde je dobrým nástrojem Em Calculator. Rozměry obrázku závisejí na velikosti okolního textu daného rodičovského elementu, problematice relativního webu se budu velice brzy věnovat v několikadílném seriálu, v ukázce předpokládám velikost okolního textu na základní hodnotě 1em v celém dokumentu.

RSS RSS kanál - najeď myší

HTML kód ukázky:

<p class="metodaxom">
    
 RSS kanál - najeď myší
</p>

CSS kód ukázky:

.metodaxom a {
  display: block;
  height: 1.25em;
  overflow: hidden;
  line-height: 1.25em;
}

.metodaxom img {
    vertical-align: top;
    height: 2.5em;
    border: 0;
    margin: 0;
}

.metodaxom a:hover img {
  margin: -1.25em 0 0 0;
}

.metodaxom a:hover {
  _padding: 0 0 1.25em 0;
  _margin: 0 0 -1.25em 0;
}

V kódu uvádím dva řádky pro hover odkazu s podtržítkovým hackem, který tyto vlastnosti poskytuje pouze prohlížečům IE < 7. Podtržítkový hack není validní metoda, ale pro přehlednost ukázky je nejvhodnější. Dodatečná definice je pro tyto starší prohlížeče nutná.

Komentovat

Článek zatím nebyl komentován. Podělte se svým názorem.