Alfabet-rollover med CSS

En alfabetrollover kan du sagtens få brug for. Tidligere var du været henvist til at lave hvert bogstav som en grafik og lave JavaScript rollover på hvert eneste bogstav. Det betød, at alene alfabetrolloveren nemt kom til at veje 20-40-50 kB. De tider er nu forbi.

Igennem adskillige år havde man på Ikast Handelsskoles website en personaleoversigt, indrettet på den måde, at et klik på et bogstav i et alfabet fremviste en side, der viste alle medarbejdere med et efternavn, hvis første bogstav svarer til det bogstav, brugeren har klikket på.

(Der er nu ikke længere noget, der hedder “Ikast Handelsskole”, denne institution blev i 2004 lagt sammen med Uddannelsescenter Herning CEU).

Dette klikbare alfabet var igennem tiderne igennem ikke mindre end 4 transformationer. Først en simpel række med alfabetets bogstaver, hvert bogstav som et link. Dernæst en grafisk rollover, hvor hvert bogstav i sig selv var en lille rollover. Denne udførelse lignede nedenstående til forveksling. Humlen ved dén var, at hvert bogstav fyldte 2x1000 bytes, altså i alt knap 50 kB for at lave en ellers meget simpel rollover. (Alfabet-rollover 1).

Så fik jeg øje på clip-attributten, der gør det muligt at lave en sådan rollover med 24 bogstaver med kun 2 grafikker, ialt under 5 kB. Det var godt nok dengang, da der de facto kun var to DHTML-kapable browsere, nemlig IE4 og NS4. De har meget forskellig fortolkning af clip-attributten, men med kun to browsere at tage hensyn til, gik det da nogenlunde. I nyere tid har jeg så opgraderet denne form for rollover, så den virker i nye browsere. Det kan du læse om i artiklen 14 knapper – kun 2 grafikker

Min oprindelige version af en alfabet-rollover på grundlag af dette princip kan du se på eksempelsiden Alfabet-rollover 2.

Den seneste version – som du ser herunder – baserer sig udelukkende på stylesheet-formatering af det enkelte bogstav.

Rolloveren i sig selv med det tilhørende stylesheet fylder ca. 1500 bytes.

Konstruktionen

På websiden indsættes et alfabet på formen:

<a class="knap" href="blank.htm">A</a>
<a class="knap" href="blank.htm">B</a>
osv

Nøglen til rollover er stylesheet'et. Det har følgende udseende:

#demo a.knap {
  background-color: #900;
  color: #fff !important; /* !important
    forhindrer arv fra websidens stylesheet. */
  cursor: hand;
  font: normal bold 12px arial, helvetica, 
      sans-serif;
  text-align: center;
  text-decoration: none;
  border:0.2em outset #c00;
  margin:0px;
  padding:0 0.2em 0 0.2em;
  width:1.5em;
  text-align:center;
}
/* Korrekt breddemål for W3C CSS2-kompatible browsere, 
   dvs alle andre end IE5 */
body>a.knap {
  width:0.9em;
}

a.knap:hover {
  background-color: #900;
  color: #fff;
  text-decoration: none;
  border:0.2em inset #c00;
}
a.knap:visited{
  color:#fff;
}

Rollovereffekten er baseret på ændring af border-style-egenskaben fra outset til inset. Det er ikke helt perfekt, for browserne fortolker lys og mørk af grundfarven lidt forskelligt. Derfor er der også tilføjet et skift af baggrundsfarve.

1 2 3 4 5 6 7 8 9 10

Denne side er senest opdateret: 2. December, 2006