Fyrir nokkru rakst ég á snjalla leið til að gera hraðvirkari rollovers með myndum. Í flestum tilfellum mundi maður nota einhverskonar JavaScript lausn til að gera slík rollover en þau hafa einfaldlega aldrei virkað sem skildi, a.m.k ekki í IE þar sem þau hafa verið frekar hægvirk.

Með CSS er hinsvegar hægt að gera sama hlut á mun einfaldari og hraðari máta. Í greininni sem ég vísaði í hér fyrir ofan er fyrst sýnt hvernig slík rollovers hafi hingað til notast við margar myndir eða eina fyrir hverja stöðu (hover, active o.s.frv.). Sú leið er betri en hægvirk JavaScript lausn en það er hægt að gera betur. Með því að hafa allar myndirnar í einni mynd og breyta aðeins staðsetningu myndarinn í bakgrunninum verður breytingin eins hröð og hún getur verið.

Hérna getur þú séð sýnishorn af valmyndinni :

http://www.sigurdss0n.com/skrar/cssrollover/

Vi ð byrjum á því að snyrta listann okkar aðeins til og tökum í burtu öll bil og tákn sem slíkur HTML listi inniheldur venjulega.

-

#menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu li {
  margin: 0;
  padding: 0;
}

-

Ef við lítum aðeins á HTML hlutann sjáum við að í listanum er texti sem verður ofan á ef við felum hann ekki. Ástæðan fyrir textanum er svo að vafrar sem birta aðeins texta, eða styðja ekki CSS, fái sína valmynd líka. Til þess að ná þessu fram notum við svokallaða LIR aðferð til að fela textann :-)

-

#menu ul li a {
  width: 120px;
  height: 0;
  overflow: hidden;
  padding-top: 22px;
  display: block;
  height: 0px !important; /* fyrir flesta vafra */
  height /**/:35px; /* hack fyrir IE5.5's */
}

-

Að lokum eru það svo reglurnar fyrir takkana. Eins og kom fram hérna fyrir ofan notum við aðeins eina mynd fyrir allar stöðurnar og breytum svo staðsetningu myndarinnar í bakgrunninum með background-position eigindinu (e. Attribute).

-

#menu .m_home {
  background: url(“m_1.gif”);
}

#menu .m_home:hover {
  background-position: -120px 0;
}

#menu .m_home:active {
  background-position: -240px 0;
}

-

Visanir :

Sýnishorn

http://www.sigurdss0n.com/skrar/cssro llover/

Fast rollovers, no preload needed

http://www.pixy.cz/blogg/clanky/cssnopreloadr ollovers/

A new image replacement technique

http://www.kryogenix.org/code/browser/lir/