JavaScript – Kako izvesti dugme sa slikom

 –  aลพurirano:  –  

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