Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS][Jquery]Obrazek zamiast checkboxa
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
grzes999
Witam
Potrzebuję zrobić na stronie żeby checkboxy były obrazkami. Wiem że jest coś takiego jak prettyCheckboxes ale tam jest styl dla wszystkich checkboxów jeden a mi potrzeba żeby dla każdego był inny.
Chodzi mi o to że na stronie będzie można wybrać jakieś wyposażenie i zamiast klikać na chceboxa chciał bym żeby użytkownik klikał na obrazek i dlatego dla każdego musi być inny.
kamil4u
Znasz się trochę na JS czy chcesz gotowca? Jeżeli o drugie to nie znam, a jeżeli to pierwsze i chcesz to sam napisać mogę dać Ci kilka wskazówek "jak to się robi" smile.gif

--edit--
@down: o "label" nie pomyślałem smile.gif

Jedyny problem to podmiana obrazków

--edit2--
@down:

Chyba nie do końca się zrozumieliśmy smile.gif

Jak mniemam nie jest to dla Ciebie problemem, ale dla autora tematu być może tak, dlatego napisałem, że z użyciem label pozostaje to zagadnienie.

Osobiście zostawiłbym zwykły checkbox z napisem obok( HTML ), a za pomocą JS usunął napis, zrobił checkbox-a niewidzialnym, a następnie utworzył przez DOM obrazek, który zmieniałby się i naszego chceckbox-a. Dzięki temu zarówno ludzie bez JS jak i z JS, będą mogli bardzo wygodnie korzystać ze strony. Oczywiście wszystko zależy jak to ma dokładnie wyglądać.
Niktoś
http://jsfiddle.net/y6S9j/

Edit.Nie jest problem podmienić obrazki, w jquery podmieniasz src img po id.
Można także używać styli w css,ale to chyba najprostszy sposób.
grzes999
Myślę że dał bym to radę sam napisać tylko nie bardzo wiem jak to ugryźć co_jest.gif

I tak ma to wyglądać


Chodzi mi o to żeby nie dawać checkboxa,obrazka i napisu tylko zastąpić checkboxa odpowiednim obrazkiem.
kamil4u
Wpadłem na trochę inny pomysł - chyba najlepszy.
Za pomocą CSS 3( tylko ): http://jsfiddle.net/y6S9j/2/

Jak potrzebujesz, żeby to działało również pod starszymi przeglądarkami to użyj np. jQuery - szybko przerobisz kod CSS-u. A jeżeli nie chcesz korzystać z biblioteki to napisz, to postaram się doradzić Ci jeśli chodzi o czysty JS.

Pamiętaj, że to kod pisany na szybko - czyt. działa, ale do poprawy.
Monter08
Zobacz tutaj.
Niktoś
Kamil4You fajny ten Twój przykładzik:)
kazag
Daj sobie gdzieś ukryty formularz, tam będą checkboksy, do tego dajesz sobie anchory, które widzi user.

Anchorowi dajesz w tle obrazek i robisz dla niego klasę active (lub niekoniecznie, jak wolisz), po kliknięciu na anchora zaznaczasz JSem odpowiedni checkbox (getElementById.checked=true) a temu anchorowi nadajesz lub zdejmujesz klasę active, która steruje jego tłem. Możesz też bez tej klasy, np. w stylach zmienić background:url(img/obrazek.png) na background:url(img/obrazek_active.png) anchorowi. Relację między anchorem a checkboxem możesz trzymać np. w atrybucie rel.
grzes999
kamil4u wielki dzięki bardzo dobre rozwiązanie teraz tylko siadać i pisać.
Jak będę miał jakiś problem to napiszę.
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.