Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript][PHP]Zdarzenia onmouse i onclick
pandaci
post
Post #1





Grupa: Zarejestrowani
Postów: 66
Pomógł: 0
Dołączył: 13.04.2007

Ostrzeżenie: (0%)
-----


Witam

Chcę zrobić tabelkę która standardowo ma kolor1 po najechaniu ma kolor2 a po kliknięciu ma mieć kolor3 i w tym kolorze zostać póki nie zostanie kliknięta druga tabelka pod spodem.

onmouseover i onmouseout bez problemu w momencie kliknięcia też zmienia się kolor ale po zjechaniu z elementu wraca do poprzedniego.

Jak temu zapobiec?

  1. function ustaw(t,co)
  2. {
  3. var test = document.getElementById("tabela1");
  4. if(co==0)
  5. {
  6. test.className = "table";
  7. }
  8. if(co==1)
  9. {
  10. test.className = "tableHover";
  11. }
  12. if(co==2)
  13. {
  14. test.className = "tableClick";
  15. }
  16. }
  17.  
  18. <table width="282" height="52" border="0" class="table" id="tabela1"
  19. onmouseover="ustaw(this,1);"
  20. onclick="ustaw(this,2);"
  21. onmouseout="ustaw(this,0);">
  22.  
  23. <table width="282" height="52" border="0" class="table" id="tabela2"
  24. onmouseover="ustaw(this,1);"
  25. onclick="ustaw(this,2);"
  26. onmouseout="ustaw(this,0);">
  27.  


Jak zatrzymać kolor po zdarzeniu OnClick?

A jak możnabyłoby to rozwiązać jeżeli tabelka by tworzyła się w pętli?
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
pandaci
post
Post #2





Grupa: Zarejestrowani
Postów: 66
Pomógł: 0
Dołączył: 13.04.2007

Ostrzeżenie: (0%)
-----


Cytat
co do kliknięcia to musisz zrobić tak, że po kliknięciu najpierw przywraca tabelkom klasę, reprezentującą stan przed kliknięciem i potem ustawia klasę aktywną dla tabelki klikniętej.


Mógłbyś opisać na moim przykładzie, gdyż próbuje ale coś nie wychodzi mi tak jak powinno.

Go to the top of the page
+Quote Post
tehaha
post
Post #3





Grupa: Zarejestrowani
Postów: 1 748
Pomógł: 388
Dołączył: 21.08.2009
Skąd: Gdynia

Ostrzeżenie: (0%)
-----


Cytat(pandaci @ 25.07.2010, 23:35:31 ) *
Mógłbyś opisać na moim przykładzie, gdyż próbuje ale coś nie wychodzi mi tak jak powinno.


przeanalizuj sobie ten prosty przykład(skopiuj kod, zapisz do pliku i odpal):
  1. <style type="text/css">
  2. table
  3. {
  4. border: solid #000000 1px;
  5. width: 200px;
  6. height: 100px;
  7. }
  8. table:hover
  9. {
  10. border: solid #ff0000 1px;
  11. }
  12. table.active
  13. {
  14. border: solid #ff00aa 2px;
  15. }
  16. <script type="text/javascript">
  17. function activate(id)
  18. {
  19. for(i=1;i<=3;++i)
  20. {
  21. document.getElementById('table_'+i).className = '';
  22. }
  23. document.getElementById(id).className = 'active';
  24. }
  25. <div>
  26. <table cellpadding="0" cellspacing="0" id="table_1" onclick="activate(this.id)">
  27. <tr>
  28. <td>Tabelka 1</td>
  29. </tr>
  30. </table>
  31. </div>
  32. <div>
  33. <table cellpadding="0" cellspacing="0" id="table_2" onclick="activate(this.id)">
  34. <tr>
  35. <td>Tabelka 2</td>
  36. </tr>
  37. </table>
  38. </div>
  39. <div>
  40. <table cellpadding="0" cellspacing="0" id="table_3" onclick="activate(this.id)">
  41. <tr>
  42. <td>Tabelka 3</td>
  43. </tr>
  44. </table>
  45. </div>

1. standardowo tabelka ma obrys czarny
2. po najechaniu myszką - obrys czerwony
3. po kliknięciu - obrys pomarańczowy
- efekt po najechaniu myszką można łatwo ustawić przez css :hover
- co do kliknięcia to posługujemy się tu nadawaniem klasy .active, która reprezentuje stan aktywny, czyli ten z obrysem pomarańczowym, po kliknięciu na jakąś tabelę, wpierw pętlą for() usuwamy klasy przypisane do tych tabel, następnie dla tabeli klikniętej ustawiamy klasę aktywną

Ten post edytował tehaha 26.07.2010, 00:35:59
Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 15.10.2025 - 01:19