Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [XHTML][CSS][JS] Zmiana tła przycisku?
Forum PHP.pl > Forum > Przedszkole
-Eragon-
Mam pytanie odnośnie tego w jaki sposób wykonać zmianę tła przycisku, a dokładniej mam pewną tabelę która ma jak to standardowo bywa zawierac wiersze z tzw "menu" np.:

wiersz 1
wiersz 2
wiersz 3

z tym żę mają określoną szerokość i wysokość, a tekst ma być nad tłem (chyba oczywiste).

Teraz jak za pomocą JS (bo chyba się tutaj bez niego nie obędzie chyba że się da za pomocą CSS)
zrobić tak by po na jechaniu na przycisk "wiersz 1" zmieniał on kolor czcionki, a po kliknięciu go kolor tła przycisku do momentu kiedy ktoś nie wciśnie inny przycisk.

Szukałem po necie jakiegoś gotowego skryptu - ale znalazłem tylko głównie na podmiane tła jako obrazek. A ja nie chce używać tu obrazka, tylko zdefiniować kolor, jaki ma być normalnie a jaki po onclick.

Będę bardzo wdzięczny za szybko pomoc.
sowiq
http://www.w3schools.com/HTMLDOM/prop_styl...groundcolor.asp

Chyba o to Ci chodziło?
erix
Cytat
Teraz jak za pomocą JS (bo chyba się tutaj bez niego nie obędzie chyba że się da za pomocą CSS)

Pseudoklasy :hover i :focus; dla IE skorzystaj csshover.htc (łatwo znaleźć w sieci winksmiley.jpg).
-Eragon-
Chyba się nie zrozumieliśmy.

Cały czas chodziło mi o przycisk. Jest naprzykład lista linków:

przycisk 1
przycisk 2
przycisk 3

Po najechaniu na który kolwiek przycisk zmienia on kolor czcionki np. (najechaliśmy na 2):

przycisk 1
przycisk 2
przycisk 3

ale nie nastałe.

Teraz jeżeli kliniemy "przycisk 1" to w powinno zmienić się jego tło np na czarne a czcionka na biała z załadowaniem stronki, do której odnosił się link smile.gif

W przypadku na kliknięcie na drugi inny przycisk, zmienia on swoje własność jak poprzedni, z tym że poprzedni wraca do stanu początkowego.

Zapewne będzie to zrobione na skrypcie
funkcją zamieniającą styl, a później po kliknięciu innego przycisku powracającą.
erix
Kod
#przycisk
{color: #000; }

#przycisk:hover
{color: #FFF; }


  1. <input id="przycisk" type="button" value="asdasd" />


winksmiley.jpg
graveozz
  1. A:active
  2. {
  3. definicja stylu dla odsyłacza w momence gdy najedzie na niego kursor
  4. }
  5.  
  6. A:link
  7. {
  8. definicja stylu dla odsyłacza nieodwiedzonego
  9. }
  10.  
  11. A:visited
  12. {
  13. definicja stylu dla odsyłacza odwiedzonego
  14. }
  15.  
  16. A:hover
  17. {
  18. definicja stylu dla odsyłacza w momence gdy znajduje się nad nim kursor
  19. }


Wszystko to oczywiscie CSS, przykładowo:

  1. A:visited
  2. {
  3. COLOR: #000000;
  4. FONT-WEIGHT: none;
  5. TEXT-DECORATION: none;
  6. }
-Eragon-
Dalej nie o to mi chodziło - bo ta kwestia tylko załatwia zmiane koloru po najechaniu onmouseout i over
wykonana za pomoca CSS visit hover itp. Nie o to mi chodzi. To jest akurat najprostrze do wykonania.

Chodzi o to by jeżeli mam tabelke

<table>
<tr>
<td width="200" height="500" bgcolor="#333333">
<div id="przycisk" width="150" height="20"><a href="">Przycisk 1</a></div>
<div id="przycisk" width="150" height="20"><a href="">Przycisk 2</a></div>
</td>
</tr>
</table>

Kwestia tego jak zrobić by po najechaniu na przycisk, zminiał mu się kolor "bgcolor" na np. niebieski, a czcionka na białą.

da się to jakoś zrobić, napewno należy wywołać zdarzenie onclick w JS, tylko moje pytanie jest właśnie jak to zrobić. Bo JS musi też mieć na uwadze to że jak wciśnie się drugi przycisk, poprzedni zmienia kolor tła na "333333" i czcionkę na czarna a ten co został naciśnięty ma zminić kolor tła na niebieski i czcionkę białą.
graveozz
  1. a:hover
  2. {
  3. color:blue;
  4. background-color:#CCCCCC; //tutaj definiujesz kolor tla
  5. text-decoration:none;
  6. color:white; //tutaj definiujesz kolor czcionki
  7. }


o to Ci chodzi?
-Eragon-
Zrobiłem to w taki sposób:

tylko że za szybko mi znika zmiana koloru tła, ale mniejwięcej o coś takiego mi chodziło tylko by jak się wciśnie Przycisk 1 był podświetlony do momentu kiedy nie wciśnie się 2 lub innego przycisku (tu akurat jest dwa)
  1. <td>
  2. <a href="" class="menu" onclick="wyswietl(this);" id="przycisk" width="140" height="24">Przycisk 1</a>
  3. <a href=""class="menu" onclick="wyswietl(this);" id="przycisk" width="140" height="24">Przycisk 2</a>
  4. </td>
  5.  
  6. // to jest skrypcik
  7. function wyswietl(e) {
  8. e.style.backgroundColor='#f00';
  9. e.style.color='#fff';
  10. }
  11.  
  12. //to jest css
  13. div {
  14. ....
  15. }
  16. .menu {
  17. color: #000;
  18. background-color: E5E5D8;
  19. }
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.