Knap RollOver

Her bruger jeg lidt JavaScript til at ændre tekst- og baggrundsfarve på en "Submit"-knap.

Scriptet består af tre dele. I dokumentets hoved skal der være et typografiark med flg. regel:
.knap1{color:#ffffff;background-color:#999999; cursor:hand;}
Det kan selvfølgelig også skrives i en ekstern CSS-fil.

Dernæst skal der være et script:

<SCRIPT LANGUAGE="javascript1.2">

function over(button){
button.style.color='#fff000';
button.style.background='#000999';
}
function out(button){
button.style.color='#ffffff'
button.style.background='#999999';
}
</SCRIPT>

I dette script ændres både tekstens og baggrundens farve, hvis du kun ønsker den ene effekt skal du fjerne de tilsvarende linjer i scriptet.

Og tilsidst, i selve dokumentet, koden til knappen:

<FORM>
<INPUT TYPE="submit" NAME="Search" CLASS="knap1" 
onmouseover="over(this)" onmouseout="out(this)">
</FORM>

Du kan indsætte lige så mange knapper du har lyst til og du kan genbruge scriptet i input felter:

<FORM>
<INPUT TYPE="text" NAME="text" CLASS="knap1"
 onfocus="over(this)" onblur="out(this)">
</FORM>

Du kan også skifte mellem to baggrundsbilleder, det kræver bare lidt mere kodning...