16
Tags:
html
Skrevet af
Bruger #846
@ 13.10.2002
Ændre baggrund på links med DHTML
I denne artikel vil jeg skrive om nogle meget populære dhtml funktioner. DHTML, står for Dynamic HTML (Hypertext Mark-Up Language), og er en blanding af StyleSheet (CSS) og JavaScript.
Mange i dag vil gerne have af deres links i menuen skifter baggrund, og jeg vil prøve at forklare to metoder man kan gøre det på, det er i henholdsvis CSS og DHTML – altså både CSS og JavaScript.
Hvis du er øvet er denne artikel højst sandsynligt ikke noget for dig, men du skal være velkommen til at læse den alligevel :)
Ændre menu baggrund
Hvis du i din menu vil have at din celle skal ændre baggrund, kan du gøre dette med to metoder, den første er med CSS og den anden med DHTML.
Men da CSS er langsomt i, specielt Internet Explorer, anbefaler jeg at man bruger DHTML-metoden.
Først CSS-metoden:
Du har en menu, hvor hver punkt er i en celle. En celle kunne fx se sådan her ud:
<td><a href="#">Link</a></td>
Og du vil så gerne have at baggrunden skifter. Dette gør du på flg. Måde:
Først skal du sørge for at linket fylder hele menuen i bredden, det gør vi ved at give dit link en CSS class i et stylesheet.
Derfor skal vi først have lavet et stylesheet, vi gør det i det samme dokument som html koden er i:
<style type="text/css">
A.menu
{
}
</style>
Dette stykke kode skrives inden for <head> og </head>. Nu skal vi så tilføje de properties som får linket til at fylde hele bredden:
<style type="text/css">
A.menu
{
width: 100%
display: block;
}
</style>
Begge properties ovenfor gør at linket fylder hele bredden i menuen. Jeg skal ikke kunne sige hvorfor man skal bruge begge, det er hvordan forskellige browsers håndterer de to properties.
Nu skal vi så sørge for at dette link ved at den skal hente CSS class'en fra stylesheet'et, og det gør vi ved at indsætte class="menu", da det er .menu der er defineret, i <a> tag'et, som flg.:
<td><a href="#" class="menu">Link</a></td>
Nu skal vi så ind og lave den funktion som ændrer bagrunden på linket.
Først skal vi i stylesheet'et lave en pseudo class ":hover" som kan forklaret "når-musen-er-over", dette gør vi som flg., og for en sikkerhedsskyld tager vi igen width:100%; display: block; med igen:
<style type="text/css">
A.menu
{
width: 100%
display: block;
}
A.menu:hover
{
width: 100%
display: block;
}
</style>
Nu har vi så defineret pseudo class'en :hover på class'en .menu.
Men baggrunden ændrer sig ikke endnu, vi skal først definere en baggrund. Til dette tilføjer vi "background-color: black;" i A.menu:hover, som flg.:
A.menu:hover
{
width: 100%
display: block;
background-color: black;
}
Nu vil baggrunden blive sort når musen er over linket, og linket fylder endda hele cellen.
JavaScript metoden:
Så skal vi prøve JavaScript metoden som er en del hurtigere, og derfor ikke bliver det stykke ventetid som der kan være med CSS.
Vi tager igen den samme celle til at starte med:
<td><a href="#">Link</a></td>
Så skal vi definere en onmouseover og en onmouseout:
<td onmouseover="" onmouseout=""><a href="#">Link</a></td>
I onmouseover skal vi lave funktionen som ændrer baggrunden når musen er over cell'en, og i onmouseout skal vi lave funktionen som ændrer den tilbage.
I JavaScript laver man også en sådanne type funktion med CSS. I onmouseover skriver vi flg.:
onmouseover="this.style.background-color='black'"
I JavaScript definerer man først elementet (this – dette element), dernæst hvilken HTML property man vil ændre (style – style="") og da style er et CSS tag går man endnu en JavaScript property ind og definerer hvilken CSS property man vil ændre, i dette tilfælde er det baggrunden, og altså "background-color='black'". Bemærk at det ikke skrives på samme måde som i et StyleSheet.
Nu har vi fået cellen til at ændre farve til sort når musen er over, men den ændrer det ikke tilbage igen. Dette gør vi ved at skrive flg. ind i onmouseout:
onmouseout="this.style.background-color=''"
Her definerer vi background-color til at være lig nul, altså ingenting. Hvis du før havde en anden baggrundsfarve på din celle skriver du den imellem '', fx background-color='white'.
Nu har vi lavet en fuldstændig funktion til at ændre bagrunden, men selve linket fylder ikke 100% af cellen, dette gør vi på samme måde som forklaret under brug af CSS metoden, ved at tilføje class'en "menu" til linket, og skrive flg. i et StyleSheet:
A.menu
{
width: 100%
display: block;
}
Den vil nu opføre sig som om at hele cellen er et link, og vil skifte baggrund. Det er altid en god ide at prøve begge metoder af, så man kan mærke forskellen, den er væsentlig anderledes i Internet Explorer.
Slut
Det var denne artikel, håber den kan bruges til noget, hvis ikke, så træk mig for en masse point, tak :)
Hvad synes du om denne artikel? Giv din mening til kende ved at stemme via pilene til venstre og/eller lægge en kommentar herunder.
Del også gerne artiklen med dine Facebook venner:
Kommentarer (7)
jeg vil mene at: this.style.background-color='black' skal ændres til this.style.backgroundColor='black'
Faktisk er den skrevet godt og er nytig for nogle newbies
Mange tak
Fin artikkel!
Men mht. adams kommentar vil jeg sige at det er rigtigt at this.style.background-color='black' ikke fungerer korrekt i js, men om hans udgave gør ved jeg ikke, jeg benytter altid selv this.style.background='black' som i hvert fald virker =)
Flot arbejde ellers, meget brugervenlig og nyttig...
Hverken Ronnis this.style.background-color eller Adams this.style.backgroundcolor virker, men det gør Kaspers... Tak for en god artikel...
backgroundColor er case sensitive, dvs. c'et i "Color" _skal_ være stort.
God artikel til nybegyndere. Også god, hvis man lige har glemt en enkelt ting.
Du skal være
logget ind for at skrive en kommentar.