Mouse-over effekt på links
Sat på siden 23-05-2003
Ved hjælp af StyleSheets kan du lave mouse over effekt på alle dine links - og det kan ses af alle browsere.
Før du bliver forskrækket - bare roligt! Det er ikke spor svært, men sjovt.
Download programmet
Til at lave StyleSheets bruger jeg programmet TopStyle Lite. Det er gratis, men findes også i en bedre version, der koster penge. Du kan finde TopStyle Lite på siden www.bradsoft.com/download/dloadhandler.asp?file=ts3lite.exe
Download og installer programmet. Du kan i princippet godt bruge Notesblokken til at lave StyleSheets, men fordelen ved TopStyle er, at du kan få et indtryk af effekten med det samme.
Den første StyleSheet
Når du har startet programmet, skal du sikre dig, at StyleInspector er slået til. Det gør du via menuen View.
Du kan enten begynde at skrive, hvis du ved, hvor du vil hen, eller du kan benytte dig af lidt hjælp fra programmet. Hvis du ønsker hjælp, kan du klikke på menuen Edit -> New Selector.
Her kan du se de muligheder, du har for at ændre udseendet af din hjemmeside. Der er links foroven, dernæst forskellige typer tekst og overskrifter. Eftersom det er links, vi skal have lave mouse over effekt på, skal du klikke på A:Link.
Nu kan du bestemme, hvordan dit link skal se ud i teksten. Fx kan du i StyleInspector i højre side af programmet vælge: font-family og font-size samt color. Jeg har lavet en StyleSheet, der ser således ud:
a:link{font-family : serif;
font-size : medium;
font-style : normal;
color : Blue;
}
Nu vil jeg lave linket, sådan som det skal se ud, når musen er over det. For at gøre det samme, skal du igen klikke på Edit -> New Selecor og vælge a:hover (hover er når musen svæver over linket).
Vælg nu de samme ting som før, men andre skrifttyper, størrelser og farver. Jeg har følgende:a:hover{
font-family : serif;
font-size : large;
font-style : italic;
color : Aqua;
}
I bunden af TopStyle kan du afprøve din mouse-over effekt. Før musen ned over den tekst, der vises.
Gem og indsæt på hjemmesiden
Gem nu din stylesheet under et passende navn som fx "mouseover".
Stylesheeten får automatisk filtypen .css.
Nu skal den indsættes på din hjemmeside, og på alle de sider, du ønsker, den skal virke på, skal du indsætte følgende kode i . Du er altså nødt til at kunne se HTML-koderne for at kunne gøre det, og det kan du fx ved at højreklikke på din fil og åbne den med Notesblok.
<link rel="stylesheet" type="text/css" href="http://stien/til/din/stylesheet.css">
*** Det var da ikke svært, vel? ;)