WebStudie: Websmeden, JavaScripts, Scrollbar

Du er her: WebStudie

Websmeden

JavaScripts

Scrollbar

JavaScripts - Scrollbar

Hvorfor skal farven på scrollbaren altid være den samme kedelige grå farve, som aldrig passer ind i hjemmesidens design? Det skal den heller ikke!!

Farverne på scrollbaren, som du kan se på illustration her til højre, opnås ved disse simple parametre:

scrollbar-face-color: #ffffff;
scrollbar-shadow-color: red;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: green;
scrollbar-darkshadow-color: yellow;
scrollbar-track-color: blue;
scrollbar-arrow-color: purple;

Tjek også dette eksempel.

Bemærk: Virker kun på Microsoft Internet Explorer 4 eller nyere.

Parametre

Farven angives med hexa-værdien (eksemplevis: #000000) eller black, red, yellow mv.

scrollbar-face-color angiver farven på på selve skydebaren. I eksemplet: Hvid.
scrollbar-track-color angiver baggrundsfarven. I eksemplet: Blå.
scrollbar-arrow-color angiver farven på pilen. I eksemplet: Lilla.
scrollbar-shadow-color angiver farven på den inderste skygge til højre og i bunden. I eksemplet: Rød.
scrollbar-darkshadow-color angiver farven på den yderste skygge til højre og i bunden. I eksemplet: Gul.
scrollbar-highlight-color angiver farven på den inderste kant til venstre og i toppen. I eksemplet: Sort.
scrollbar-3dlight-color angiver farven på den yderste kant til venstre og i toppen. I eksemplet: Grøn.

Placering af kode

For at implementere farverne skal følgende kode placeres indefor <HEAD> </HEAD> på det ønskede HTML-dokument.

<STYLE TYPE="text/css">
BODY
{
scrollbar-face-color: #ffffff;
scrollbar-shadow-color: red;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: green;
scrollbar-darkshadow-color: yellow;
scrollbar-track-color: blue;
scrollbar-arrow-color: purple;
}
</STYLE>

Skal effekten benyttes på mange HTML-dokumenter, kan du lave et typografiark, som du så læser ind i de ønskede HTML-dokumenter.

Et typografiark er en simpel tekstfil (.txt), som du omdøber til css. Eksempelvis kan du lave et typografiark med navnet: scrollbar.css.

Selve indholdet af tekstfilen scrollbar.css kan se således ud:

BODY
{
scrollbar-face-color: #ffffff;
scrollbar-shadow-color: red;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: green;
scrollbar-darkshadow-color: yellow;
scrollbar-track-color: blue;
scrollbar-arrow-color: purple;
}

Får at indlæse teksfilen scrollbar.css i de enkelte HTML-dokumenter, skal koden

placeres indefor <HEAD> </HEAD> på de ønskede HTML-dokumenter.

Fordelen ved et typografiark er, at du kun skal rette én fil for et det har effekt på samtlige HTML-dokumenter.

[ start ] [ indhold ] [ e-mail ]