Podświetlenie wybranego radioboxa z obrazkiem Opcje

[Maker5]

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 
 
<table>
<tbody>
<tr>
<td><input type="radio" name="Customer" id="Customer1" value="1" class="required" 
                      onclick="this.form.elements['Name'].disabled = this.form.elements['invoice'].disabled = !this.checked" /></td>
	    <td width="135" align="left">
	    <label for="Customer1" class="radio_img">
	    <img width="135" height="40" src="img/logo_bank/kb.png" alt="">
	    </label>
	    </td></tr>
<tr>                        
<td><input type="radio" name="Customer" id="Customer2" value="2" class="required" 
                      onclick="this.form.elements['Name'].disabled = this.form.elements['invoice'].disabled = !this.checked" /></td>
	    <td width="120" align="left">
	    <label for="Customer2" class="radio_img">
	    <img width="135" height="40" src="img/logo_bank/bph.png" alt="">
	    </label>
	    </td></tr>                    
<tr>                    
<td><input type="radio" name="Customer" id="Customer3" value="3" class="required" 
                      onclick="this.form.elements['Name'].disabled = this.form.elements['invoice'].disabled = !this.checked" /></td>
	    <td width="135" align="left">
	    <label for="Customer3" class="radio_img">
	    <img width="135" height="40" src="img/logo_bank/nordea.png" alt="">
	    </label>
	    </td></tr>  
 
</tbody>
</table>
 
[HTML] pobierz, plaintext 

[trueblue]

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]

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]

[HTML] pobierz, plaintext 
<style type="text/css">
label[for="Customer1"]{
 background-image:url(1.jpg);
}
label[for="Customer2"]{
 background-image:url(2.jpg);
}
label[for="Customer3"]{
 background-image:url(3.jpg);
}
label.radio_img{
 background-position:0 0;
 background-repeat:no-repeat;
}
label.radio_img:hover,
label.radio_img.active{
 background-position:0 50px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
 $('label.radio_img').click(function(){
  $('label.radio_img').removeClass('active');
  $(this).addClass('active');
 });
});
</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.

Ten post edytował trueblue 16.03.2014, 17:36:13

[Maker5]

[HTML] pobierz, plaintext 
<style type="text/css">
label[for="Customer1"]{
 background-image:url(1.jpg);
}
label[for="Customer2"]{
 background-image:url(2.jpg);
}
label[for="Customer3"]{
 background-image:url(3.jpg);
}
label.radio_img{
 background-position:0 0;
 background-repeat:no-repeat;
}
label.radio_img:hover,
label.radio_img.active{
 background-position:0 50px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
 $('label.radio_img').click(function(){
  $('label.radio_img').removeClass('active');
  $(this).addClass('active');
 });
});
</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ć ? dzięki

[HTML] pobierz, plaintext 
label.radio_img{
background-position:0 0px;
background-repeat:no-repeat;
}
label.radio_img:hover,
label.radio_img.active{
background-position:0 -30px;
}
[HTML] pobierz, plaintext 

Ten post edytował Maker5 18.03.2014, 17:52:20

[trueblue]

Jeśli działa poprawnie i z oczekiwaniami, to raczej tak miałeś zrobić.

[Maker5]

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 
<script type="text/javascript">
</script>
[HTML] pobierz, plaintext 

pomógłby ale nie umiem tego zrobić

Ten post edytował Maker5 19.03.2014, 04:22:13

[trueblue]

[HTML] pobierz, plaintext 
<script type="text/javascript">
$(document).ready(function(){
 $('label.radio_img').click(function(){
  $('label.radio_img').removeClass('active');
  $(this).addClass('active');
  $('label.radio_img:not(.active)').parent().prev().find('input').prop('disabled',true);
 });
});
</script>
[HTML] pobierz, plaintext 

Ten post edytował trueblue 19.03.2014, 08:50:09

[Maker5]

Dziękuję !