ilj@flowsim.se
stilmallar på svenska
"länkknapp" - för muspekaren över knappen
kod & förklaringar

text Ner till texten!


 
KNAPPEN definieras ungefär så här:
 
<DIV ID="min_knapp"
    STYLE="
position:absolute;
background-color:#666666;
border:outset 5px black;
color:black;
letter-spacing:0.2em;
left:160px;top:110px;
width:200px;height:30px;">knapp</DIV>
 

 
Vid onmouseover flyttas knappen (lika många pixlar som kanten är bred) och kanten ritas om och blir "inset".
Vid onmouseout flyttas knappen tillbaka och kanten ritas om och blir "outset" igen.
 
LÄNKEN ser ut så här:
 
<a href="URL"
onmouseover="
document.getElementById('min_knapp').style.top=145+'px'; document.getElementById('min_knapp').style.borderStyle='inset'"
onmouseout="
document.getElementById('min_knapp').style.top=140+'px'; document.getElementById('min_knapp').style.borderStyle='outset'">
 

 
STORLEK
width:200px // bredd 200 pixlar
height:300px // höjd 300 pixlar
 
PLACERiNG
position:absolute left:160px // 160 pixlar från vänsterkanten
top:110px // 110 pixlar från överkanten
 
BAKGROUNDSFÄRG
background-color:#cccccc // bakgrundsfärg ljusgrå
 
KANTEN
border:outset 5px black // 5 pixel bred kant
 
TEXTEN
color:black;
letter-spacing:0.2em
font-size:16px;
font-family:sans-serif
font-weight:bold
 
 
 
 
Man kan förstås även använda bilder. Flera exempel på "rörliga knappar" finns under rubriken JAVASCRiPT.
 

 
Sidan gjordes av
 
ilj@flowsim.se
 

 
Senast ändrad 30 april 2004.

Den här sidan hör hemma i ett ramsystem hos:
www.flowsim.se
STYLESHEETS