JavaScript – Kako izvesti dugme sa slikom

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>

Pratite Krstaricu i preko mobilne aplikacije za Android i iPhone.