Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.

HTML '<button>' tag 'onClick' - promena slike?

[es] :: Web dizajn i CSS :: HTML '<button>' tag 'onClick' - promena slike?

[ Pregleda: 2577 | Odgovora: 5 ] > FB > Twit

Postavi temu Odgovori

Autor

Pretraga teme: Traži
Markiranje Štampanje RSS

neb
RS

Član broj: 30960
Poruke: 462
*.dynamic.stcable.net.



+1 Profil

icon HTML '<button>' tag 'onClick' - promena slike?21.10.2010. u 12:47 - pre 163 meseci
Zelim da napisem dugme koje je u obliku slike na koje kada se klikne levim tasterom misa samo dugme menja sliku tj. svoj vizuelni izgled na ekranu, nakon sto se otpusti taster misa isto dugme vraca predhodnu sliku i dobija ponovo pocetni vizuelni izgled na ekranu.

HTML kod koji sam napisao izgleda ovako
Code:

<button id="dugme1" type="button"></button>


CSS kod

Code:

#dugme1
{
    background-image: url('dugme1.png');
    border-style: none;
    width: 51px;
    height: 12px;
}

#dugme2
{
    background-image: url('dugme2.png');
    border-style: none;
    width: 51px;
    height: 12px;
}



Kada pritisnem taster misa na samo dugme isto treba da dobije atribute CSS ID-a '#dugme2' nakon sto otpustim taster misa isto dugme treba ponovo da se vrati na pocetni CSS ID '#dugme1'.

Da li neko moze da napise primer izvornog koda za ovaj efekat?
 
Odgovor na temu

Nikola Poša
Backend (PHP) developer
Beograd

Član broj: 173839
Poruke: 1616
*.adsl-3.sezampro.yu.



+33 Profil

icon Re: HTML '<button>' tag 'onClick' - promena slike?21.10.2010. u 15:39 - pre 163 meseci
Logičnije je da "dugme1" i "dugme2" budu CSS klase, a ne id-evi, pa u tom slučaju:
Code:
<button class="dugme1" type="button" onmousedown="this.className = 'dugme2';" onmouseup="this.className = 'dugme1';"></button>
 
Odgovor na temu

neb
RS

Član broj: 30960
Poruke: 462
*.dynamic.stcable.net.



+1 Profil

icon Re: HTML '<button>' tag 'onClick' - promena slike?22.10.2010. u 14:31 - pre 163 meseci
e hvala ti puno
 
Odgovor na temu

tenesi
temsi imsir

Član broj: 178674
Poruke: 2
*.dynamic.isp.telekom.rs.



+1 Profil

icon Re: HTML '<button>' tag 'onClick' - promena slike?24.11.2010. u 18:29 - pre 162 meseci
mozes i ovako CSS


Code:
#dugme1
{
    background-image: url('dugme1.png');
    border-style: none;
    width: 51px;
    height: 12px;
}

#dugme1:hover
{
    background-image: url('dugme2.png');
    border-style: none;
    width: 51px;
    height: 12px;
}


 
Odgovor na temu

Nemke_BG

Član broj: 163822
Poruke: 341
*.static.sbb.rs.

Jabber: Nemke_BG@elitesecurity.org
Sajt: https://www.nmdesign.rs


+45 Profil

icon Re: HTML '<button>' tag 'onClick' - promena slike?25.11.2010. u 08:47 - pre 162 meseci
@tenesi

On je trazio na "click" a ne na "mouse over" event da bi tvoj primer radio promeni ga iz ":hover" u ":active".
...
 
Odgovor na temu

neb
RS

Član broj: 30960
Poruke: 462
*.dynamic.stcable.net.



+1 Profil

icon Re: HTML '<button>' tag 'onClick' - promena slike?25.11.2010. u 19:52 - pre 162 meseci
Resio sam dati problem na osnovu odgovora koje sam dobio od vas

Hvala vam
 
Odgovor na temu

[es] :: Web dizajn i CSS :: HTML '<button>' tag 'onClick' - promena slike?

[ Pregleda: 2577 | Odgovora: 5 ] > FB > Twit

Postavi temu Odgovori

Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.