Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Podświetlenie wybranego radioboxa z obrazkiem
Forum PHP.pl > Forum > Po stronie przeglądarki
Maker5
16.03.2014, 14:46:26
Witam.
Jak zrobić aby po najechaniu myszka na pole wyboru radioboxa z obrazkiem, ten obrazek podświetlił się na kolorowo.

Teraz mam tak.


Chciałbym to zmienić aby domyślnie na starcie wszystkie obraz były szare
i po najechaniu myszką przez użytkownika na dany obrazek stanie się on kolorowy.
Czyli tak:


Następnie kiedy użytkownik kliknie i wybierze dany bank, kolor obrazka pozostanie na stałe, czyli tak:


teraz mój kod wygląda tak:

[HTML] pobierz, plaintext 
  1.  
  2. <table>
  3. <tbody>
  4. <tr>
  5. <td><input type="radio" name="Customer" id="Customer1" value="1" class="required" 
  6.                       onclick="this.form.elements['Name'].disabled = this.form.elements['invoice'].disabled = !this.checked" /></td>
  7. 	    <td width="135" align="left">
  8. 	    <label for="Customer1" class="radio_img">
  9. 	    <img width="135" height="40" src="img/logo_bank/kb.png" alt="">
  10. 	    </label>
  11. 	    </td></tr>
  12. <tr>                        
  13. <td><input type="radio" name="Customer" id="Customer2" value="2" class="required" 
  14.                       onclick="this.form.elements['Name'].disabled = this.form.elements['invoice'].disabled = !this.checked" /></td>
  15. 	    <td width="120" align="left">
  16. 	    <label for="Customer2" class="radio_img">
  17. 	    <img width="135" height="40" src="img/logo_bank/bph.png" alt="">
  18. 	    </label>
  19. 	    </td></tr>                    
  20. <tr>                    
  21. <td><input type="radio" name="Customer" id="Customer3" value="3" class="required" 
  22.                       onclick="this.form.elements['Name'].disabled = this.form.elements['invoice'].disabled = !this.checked" /></td>
  23. 	    <td width="135" align="left">
  24. 	    <label for="Customer3" class="radio_img">
  25. 	    <img width="135" height="40" src="img/logo_bank/nordea.png" alt="">
  26. 	    </label>
  27. 	    </td></tr>  
  28.  
  29. </tbody>
  30. </table>
  31.  
[HTML] pobierz, plaintext
trueblue
16.03.2014, 16:35:21
Jeśli ma działać również w starszych wersjach przeglądarek, to zamiast img ostyluj etykiety z pomocą backgorund.
Obrazki przygotuj tak, aby w jednym pliku były dwie wersje kolorystyczne (możesz nawet przygotować jeden plik dla wszystkich banków).
Po najechaniu (:hover) ustawiaj background-position przesunięte o X px w pionie lub poziomie (zależy czy wersja kolorowa będzie pod czarno-białą czy obok).
Do kliknięcia musisz użyć JS i dodać wtedy do etykiety klasę ze stylem jak :hover.
Maker5
16.03.2014, 17:17:00
Cytat(trueblue @ 16.03.2014, 16:35:21 ) *
Jeśli ma działać również w starszych wersjach przeglądarek, to zamiast img ostyluj etykiety z pomocą backgorund.
Obrazki przygotuj tak, aby w jednym pliku były dwie wersje kolorystyczne (możesz nawet przygotować jeden plik dla wszystkich banków).
Po najechaniu (:hover) ustawiaj background-position przesunięte o X px w pionie lub poziomie (zależy czy wersja kolorowa będzie pod czarno-białą czy obok).
Do kliknięcia musisz użyć JS i dodać wtedy do etykiety klasę ze stylem jak :hover.


nie jestem zaawansowanym koderem wiec prosiłbym o pomoc w przykładach.
To co napisałęś na pewno jest mądre ale dla mnie zbyt skomplikowane.
Mógłbym prosić o rozwinięcie.
trueblue
16.03.2014, 17:35:48 
[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2. label[for="Customer1"]{
  3.  background-image:url(1.jpg);
  4. }
  5. label[for="Customer2"]{
  6.  background-image:url(2.jpg);
  7. }
  8. label[for="Customer3"]{
  9.  background-image:url(3.jpg);
  10. }
  11. label.radio_img{
  12.  background-position:0 0;
  13.  background-repeat:no-repeat;
  14. }
  15. label.radio_img:hover,
  16. label.radio_img.active{
  17.  background-position:0 50px;
  18. }
  19. </style>
  20. <script type="text/javascript">
  21. $(document).ready(function(){
  22.  $('label.radio_img').click(function(){
  23.   $('label.radio_img').removeClass('active');
  24.   $(this).addClass('active');
  25.  });
  26. });
  27. </script>
[HTML] pobierz, plaintext

Z wnętrza <label> usuwasz <img>.
1.jpg, 2.jpg i 3.jpg to pliki z logotypami, każdy plik ma wysokość 100px, 0-49px czarno-biały logotyp, 50-100px kolorowy.
JS korzysta z jQuery.
Maker5
18.03.2014, 17:51:39
Cytat(trueblue @ 16.03.2014, 17:35:48 ) *
[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2. label[for="Customer1"]{
  3.  background-image:url(1.jpg);
  4. }
  5. label[for="Customer2"]{
  6.  background-image:url(2.jpg);
  7. }
  8. label[for="Customer3"]{
  9.  background-image:url(3.jpg);
  10. }
  11. label.radio_img{
  12.  background-position:0 0;
  13.  background-repeat:no-repeat;
  14. }
  15. label.radio_img:hover,
  16. label.radio_img.active{
  17.  background-position:0 50px;
  18. }
  19. </style>
  20. <script type="text/javascript">
  21. $(document).ready(function(){
  22.  $('label.radio_img').click(function(){
  23.   $('label.radio_img').removeClass('active');
  24.   $(this).addClass('active');
  25.  });
  26. });
  27. </script>
[HTML] pobierz, plaintext

Z wnętrza <label> usuwasz <img>.
1.jpg, 2.jpg i 3.jpg to pliki z logotypami, każdy plik ma wysokość 100px, 0-49px czarno-biały logotyp, 50-100px kolorowy.
JS korzysta z jQuery.


świetne rozwiązanie z tym, że musiałem poprawić jedną wartość.
Obrazek mam 83 x 60 wysokosc (30px czarny, pod nim 30px kolorowy)


kod musiałem ustawić tak aby zgodnie z osią X Y przesuwało obrazek do góry aby był kolorowy widoczny czyli -30px

tak miałem to zrobić ? smile.gif dzięki

[HTML] pobierz, plaintext 
  1. label.radio_img{
  2. background-position:0 0px;
  3. background-repeat:no-repeat;
  4. }
  5. label.radio_img:hover,
  6. label.radio_img.active{
  7. background-position:0 -30px;
  8. }
[HTML] pobierz, plaintext
trueblue
18.03.2014, 18:05:36
Jeśli działa poprawnie i z oczekiwaniami, to raczej tak miałeś zrobić.
Maker5
19.03.2014, 04:21:52
Cytat(trueblue @ 18.03.2014, 18:05:36 ) *
Jeśli działa poprawnie i z oczekiwaniami, to raczej tak miałeś zrobić.


tak działa tak jak powinno ale chciałem jeszcze z Toba skonsultować.

Ostatnia rzecz o którą prosiłbym.
Jak zrobić aby po wybraniu danego banku inne "radio" zostały wyłączone na disabled ?
Czyli ktoś wybiera
<input type="radio" name="Customer" id="Customer1" value="1" class="required" i tak dalej>

i pozostałe
id="Customer2" value="2"
id="Customer3" value="3"

stają się disabled.
Wiem, że coś na pewno 

[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. </script>
[HTML] pobierz, plaintext


pomógłby ale nie umiem tego zrobić sad.gif
trueblue
19.03.2014, 08:49:53 
[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3.  $('label.radio_img').click(function(){
  4.   $('label.radio_img').removeClass('active');
  5.   $(this).addClass('active');
  6.   $('label.radio_img:not(.active)').parent().prev().find('input').prop('disabled',true);
  7.  });
  8. });
  9. </script>
[HTML] pobierz, plaintext
Maker5
19.03.2014, 11:33:36
Dziękuję !
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.