Velkommen til den første guiden her på ItStyle Bloggen.
I startfasen av denne bloggen var fokuset å få folk til å se bloggen, få gode tips og triks som er gull verdt. Dette trakk en stor andel brukere hit, håper alle syntes det var verdt en tur innom.
Nå er fase 2 av bloggingen kommet, her vil jeg fortsette med gode tips og triks, men har lagt til en ny kategori som går under guider. Her vil jeg poste artikler som vil hjelpe deg til å få til forskjellige ting for din nettside eller på din datamaskin.
Har du ønsker til noe du lurer på så post gjerne det i kommentarfeltet på “om bloggen”.
Guide nr 1: Lag en rollover effekt på din navigasjon!
1. Lag et bilde av din navigasjonsknapp.
Dette kan du lett gjøre i for eksempel Adobe Photoshop eller i andre tegneprogram. Under her ser du min navigasjonsknapp. Det jeg vil at den skal gjøre er å vise kun den blå delen av bildet når man ikke holder musen over knappen, for så å bytte over til den røde delen når man holder musepekeren over den. Du kan laste ned og bruke bildet jeg har under for å teste det ut selv.
Det mest vanlige har vært å ha to forskjellige bilder. Der det ene bildet blir lastet når man går inn på siden din, og den andre blir ikke lastet før man holder musen over, så da kan det ødelegge designet mens den lastes inn. Det finnes noen mellomlagrinsløsninger for å løse det problemet, men med denne metoden er det enklere.
2. CSS koden for å få dette til å fungere
<style type=”text/css”>
<!–
a#rollover{
height: 20px;
width: 100px;
background-image:url(DittRollOverBilde.png);
text-decoration:none;
display:block;
}
a#rollover:hover{
background-position:100px;
}
–>
</style>
Over her har du selve CSS koden for å få din rollover til å fungere. De feltene som er markert med rødt må du endre til det som gjelder for deg. Du setter inn koden i din egen CSS fil eller i <head></head> delen av din nettside.
Forklaring av koden:
height: Her setter du inn høyden til det bildet som du selv har laget, bruker du mitt eksempel lar du det stå “20″ der siden bildet er 20 piksler høyt.
width: Dette er bredden på den delen av bildet som er den blå knappen, i mitt eksempel så er den 100 piksler lang.
background-image:url: Dette er linken til bildet ditt. Du bytter ut DittRollOverBilde.png med det ditt bildet heter. Hvis du ikke legger bildet i samme mappe som html filen din ligger så må du legge til hele adressen til dit bildet ligger eks “http://www.itstyle.net/blog/guider/RollOverBilde.gif”
background-position: Dette bestemmer hvor langt til venstre nettsiden din skal gå i bildet når man holder musen over bildet. I mitt eksempel er den blå knappen 100 piksler lang, så når jeg velger at den skal hoppe 100 piksler til høyre på bildet, så vil den kun vise den røde knappen.
3. HTML koden
<a href=”#” id=”rollover”> </a>
Over ser du html koden. Det er en helt vanlig link tag, men den har fått påført seg id’en “rollover”. Id’en henviser da til CSS koden som du skrev i punkt 2. Den røde firkanten er der du setter inn url’en til siden du linker til. Regner med at du vet hvordan en link tag ser ut fra før, så skal ikke forklare den så mye.
4. Det var det, du er ferdig! Fullstendig kode her.
Vanskeligere enn dette er det ikke. Er du en klipp og lim type som skal teste eksempelet så fort som mulig uten å sette det overstående sammen så får du her fullstendig kode til hele html siden. Det eneste du må huske på er å endre de parameterne som jeg tidligere nevnte og ha bilde filen klar.
Fullstendig kode for nettside med rollover link:
<html>
<head>
<title>Din Rollover navigasjon nettside</title>
<style type=”text/css”>
<!–
a#rollover{
height: 20px;
width: 100px;
background-image:url(RollOverBilde.png);
text-decoration:none;
display:block;
}
a#rollover:hover{
background-position:100px;
}
–>
</style></head>
<body>
<a href=”#” id=”rollover”> </a>
</body>
</html>
Live eksempel: http://www.itstyle.net/blog/eksempler/rollover/
