In news:1furnv4.1lsdephtxbtluN%Ninzen@ofir.dk,
Storm <Ninzen@ofir.dk> typed:
> Tak, det er rigtigt nydeligt.
> Men jeg kan desværre ikke regne ud hvordan dit css ser ud for at lave
> mouseover...
Det er faktisk ikke så svært. "Hemmeligheden" består bl.a. i at gøre *hele*
tabelcellen til et link. Det gør jeg med 'display:block' sådan her:
a.alleceller {
display: block;
background-repeat: no-repeat;
}
Jeg definerer også, at baggrundsbilledet kun skal vises én gang.
Derefter definerer jeg størrelse og baggrundsbillede for hver celle, f.eks.:
a.celle2 {
width: 90px;
height: 29px;
background-image: url(grafik/historien_low.gif);
}
Og derefter er det ret nemt at lave en hover-effekt:
a.celle2:hover {
background-image : url(grafik/historien_high.gif);
}
I HTML'en skriver jeg så <td><a href="historien.php" class="celle1"><img
src="grafik/clear.gif" width="90" height="29" alt="Historien"
border="0"></a></td> i HTML'en.
'clear.gif' er en gennemsigtig gif på 1x1 pixel. Jeg sætter den ind i cellen
og strækker den til samme størrelse som baggrundsbilledet for at kunne lave
en "alt"-tekst på cellen.
Eneste ulempe ved denne metode (udover at den selvfølgelig ikke virker i
Netscape 4) er, at knapperne kan 'blinke' en enkelt gang første gang man
kører musen henover linket, fordi hover-baggrunden skal hentes fra serveren.
Jeg har løst det ved at læse alle hover-billederne ind nederst på hver side
og givet dem style-attributten 'visibility : hidden;'. På den måde bliver de
hentet ind i browserens cache, så de ligger klar til at blive vist...
Du kan se hele mit stylesheet på
http://www.rubenhansensingers.dk/styles.css.
Mvh.
Mikkel
--
"And my sanity scans the horizon"
Sting - The Wild Wild Sea
http://www.mzh.dk