U ovom JavaScript prilogu, videćemo kako da izvedemo klasično dugme za obrasce uz pomoć kaskadnih stilova (CSS), ali sa grafičkim elementom na prednjoj strani i animacijom. Izvešćemo trik uz pomoć definisanja četiri stila za svaki od mogućih položaja dugmića:
- nema_misa - stanje mirovanja, pokazivač se ne nalazi iznad dugmića.
- iznad_misa - pokazivač se nalazi iznad dugmića (mouseOver).
- klik_misa - klik iznad dugmića.
- otpustanje_misa - nakon klika, otpušten je levi taster miša.
Svaki od ovih stilova definiše samo poziciju grafičkog elementa, i na osnovu njihove razlike (u primeru, četiri piksela), dobijamo utisak o pokretu dugmića na površini. Kada smo definisali stilove (u jednoj klasi), dovoljno je da u okviru <IMAGE> taga definišemo događaje na osnovu kojih će se primenjivati određeni stil, tj. promena pozicije. Da napomenemo samo, da se pozicioniranje vrši relativno, tj. u odnosu na lokaciju. Pa tako na primer, ako smo sliku postavili unutar neke ćelije određene tabele, poziciniranje će biti u odnosu na zidove date ćelije.
Dovoljno je da sledeći kod iskopirate u ".htm" dokument, i umesto naziva slike koji smo mi naveli (atribut "SCR"), navedite vašu sliku:
<HEAD>
<STYLE>
<!--
.nema_misa {
border-top: 10px solid #FFFFFF;
border-bottom: 10px solid #FFFFFF;
border-left: 6px solid #FFFFFF;
border-right: 10px solid #FFFFFF;
}
.iznad_misa {
border-top: 6px solid #FFFFFF;
border-bottom: 14px solid #FFFFFF;
border-left: 10px solid #FFFFFF;
border-right: 6px solid #FFFFFF;
}
.klik_misa {
border-top: 13px solid #FFFFFF;
border-bottom: 7px solid #FFFFFF;
border-left: 10px solid #FFFFFF;
border-right: 6px solid #FFFFFF;
}
.otpustanje_misa {
border-top: 10px solid #FFFFFF;
border-bottom: 10px solid #FFFFFF;
border-left: 10px solid #FFFFFF;
border-right: 6px solid #FFFFFF;
}
//-->
</STYLE>
</HEAD>
<BODY >
<img src = "slika.gif"
title = "Dugme-Slika"
width = "90"
height = "40"
border = "0"
class = "nema_misa"
onmouseover = "this.className=iznad_misa"
onmousedown = "this.className='klik_misa'"
onmouseup = "this.className='otpustanje_misa'"
onmouseout = "this.className='nema_misa'">
</BODY>