Skocz do zawartości


tablety.pl
Zdjęcie
- - - - -

Podświetlenie wybranego radioboxa z obrazkiem




  • Zaloguj się, aby dodać odpowiedź
1 odpowiedź w tym temacie

#1 makerr

makerr

    First Rank

  • Użytkownicy
  • 26 postów

Napisano 16 03 2014 - 18:27

Witam.
Jak zrobić aby po najechaniu myszka na pole wyboru radioboxa z obrazkiem, ten obrazek podświetlił się na kolorowo.

Teraz mam tak.
stan1jpg_erenwhh.jpg

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:

stan2jpg_erenwrx.jpg

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

teraz mój kod wygląda tak:

<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>


#2 makerr

makerr

    First Rank

  • Użytkownicy
  • 26 postów

Napisano 19 03 2014 - 11:49

odpowiedź

<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 0px;
background-repeat:no-repeat;
}
label.radio_img:hover,
label.radio_img.active{
background-position:0 -30px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
 $('label.radio_img').click(function(){
  $('label.radio_img').removeClass('active');
  $(this).addClass('active');
 });
});
</script>






Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych