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 na www.krstarica.com