Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][PHP]Podświetlany button po kliknięciu
Forum PHP.pl > Forum > Przedszkole
art-e
Witam

Mam na stonce taki kod:
  1.  
  2. <a href="java script:void(0);" onclick="pokazdiv('1');"><img style="width: 132px; height: 67px; border: none; margin-left:4px" src="http:xxxxxx/w1.png"/></a>
  3.  
  4. <a href="java script:void(0);" onclick="pokazdiv('2');"><img style="width: 132px; height: 67px; border: none; margin-left:4px" src="http:xxxxxx/w2.png"/></a>
  5.  
  6. <a href="java script:void(0);" onclick="pokazdiv('3');"><img style="width: 132px; height: 67px; border: none; margin-left:4px" src="http:xxxxxx/w3.png"/></a>


Przyciski w1, w2, w3 włączają Div1, Div2, Div3 gdzie pod iframe są pewne zewnętrzne moduły.

Chciałbym aby po najechaniu myszką nad przycisk w1, w2 lub w3 był on podświetlony i taki pozostał po kliknięciu.

Stworzyłem dodatkowe przyciski wp1, wp2 wp3 (podświetlone).

I teraz:
1. Używając java;

onmouseover, onmouseout, onmousedown, onmouseup - daje ten efekt, ale po kliknięciu przycisk pozostaje nie podświetlony.

2. Uzywając CSS

kod zostawiam tak
  1. <a class="r" href="java script:void(0);" onclick="pokazdiv('1');"></a>


a w css

a.r
background:url('w1.png');
width:132px;
height:67px;

a.r:hover
background:url('wp1.png');
width:132px;
height:67px;

a.r:active
background:url('wp1.png');
width:132px;
height:67px;

wówczas wogóle nie pojawia mi się przycisk w1 na stronie facepalmxd.gif
b4rt3kk
CSS musi zawierać się w klamrach, np.

  1. a.r {
  2. background:url('w1.png');
  3. width:132px;
  4. height:67px;
  5. }


Natomiast jeśli chcesz by przycisk pozostawał podświetlony przy kliknięciu to do funkcji pokazdiv(id) dodaj linijkę kodu, która doda np. klasę do klikniętego obiektu.
art-e
Cytat(b4rt3kk @ 12.08.2013, 09:11:22 ) *
CSS musi zawierać się w klamrach, np.




Sorki że tak skrótowo napisałem - oczywiście dałem klamry w css.

Możesz mi na przykładzie podać z tą linijką kodu do pokazdiv(id) ?
b4rt3kk
Ja bym tu użył jQuery:

  1. $(this).addClass('jakasKlasa');


CSS:

  1. .jakasKlasa {
  2. background: red;
  3. }
art-e
sorki ale jestem laikach w podstawach a co dopiero w jQuery.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.