Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML] Input Type Radio w img
Forum PHP.pl > Forum > Przedszkole
Komarek
9.03.2011, 16:46:07
Witam
Na wstępie powiem ze nigdzie nie znalazlem rozwiazania na moj problem chociaz troche juz googlowalem ;]

Chce ogolnie zrobic obrazkowe 'radio'

Obrazek1
Obrazek1-wcisniety
Obrazek2
Obrazek2-wcisniety

I mam proste 2 obrazki obok siebie, po zaznaczeniu ktoregos z nich zmienia sie na drugi obrazek (tak jak rollover ale dopiero po zaznaczeniu)
No i powinny dzialac tak jak input type=radio ;p

Jezeli jest inna mozliwosc to prosilbym o pomoc w polaczeniu tego z formularzem.

Bardzo prosze o pomoc.
Pozdrawiam, Komarek
ixpack
9.03.2011, 17:07:34
Input ustaw na display:none;
Dodaj label dla każdego radio -> label to obrazek. (Edit: Problem zostaje przy zaznaczonym radio -> tylko w css3 i w js można podmienć obrazek... Bez css3 lub js zostanie obrazek i nawet gdy będzie zaznaczone radio - obrazek będzie taki sam...)

Przykład (z użyciem jquery):

[HTML] pobierz, plaintext 
  1. <div class="jq_sizes">
  2. <input type="radio" id="uni1" name="jv_size" value="9" style="display:none;" /><label for="uni1">XXS</label>
  3. <input type="radio" id="uni2" name="jv_size" value="10" style="display:none;" /><label for="uni2">XS</label>
  4. <input type="radio" id="uni3" name="jv_size" value="11" style="display:none;" /><label for="uni3">S</label>
  5. </div>
[HTML] pobierz, plaintext


Oczywiście ja użyłem jquery i _buttonset();
Trochę css zmieniłem i wygląda wyśmienicie wink.gif - jeszcze formularza nie podrzuciłem na serwer także linka nie dam...

Teraz jeżeli chcesz zmienić wygląd obrazka, radia zaznaczonego - > bez javy idzie zrobić w css3, ale nie każda przeglądarka to obsługuje tu jest co i jak

No i pozostaje "tradycyjny" jquery - to już możesz wygooglować wink.gif (radio + jquery).

Pozdr.

Ps. Jak pomęczysz, a nie zrobisz - to wstawię coś "po chłopsku", ale narazie w pracy jestem ;]
Komarek
9.03.2011, 17:54:28
@up:
kojarzy mi sie ze probowalem tego rozwiazania, i po usunieciu S, XS, czy tez XXS, skrypt po prostu glupieje.

Pozatym nie wiem czy mnie zrozumiales do konca, podales linka do stronki w ktorej jest przyklad z grafika jako radio (bylem tam zreszta), jednak ja potrzebuje takiego gdzie kazde inne radio bedzie mialo rozna grafike podstawowa i rozna checked ;p
ixpack
10.03.2011, 15:24:29
Pokombinowałem i coś wymodziłem:

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title>Javascript radio</title>
  4. <script type="text/javascript" src="./jquery/jQuery.js"></script>   <!-- OCZYWISCIE ZESSAC TRZEBA JQUERY -->
  5. <script type="text/javascript">
  6.  
  7. <!-- Tu do sprawdzenia wartosci zaznaczonego radio -->
  8. function getCheckedValue(radioObj) {
  9. 	if(!radioObj)
  10. 		return "";
  11. 	var radioLength = radioObj.length;
  12. 	if(radioLength == undefined)
  13. 		if(radioObj.checked)
  14. 			return radioObj.value;
  15. 		else
  16. 			return "";
  17. 	for(var i = 0; i < radioLength; i++) {
  18. 		if(radioObj[i].checked) {
  19. 			return radioObj[i].value;
  20. 		}
  21. 	}
  22. 	return "";
  23. }
  24.  
  25. <!-- A tu nasza magia ;) -->
  26. function setCheckedValue(radioObj, newValue) {
  27. 	if(!radioObj)
  28. 		return;
  29. 	var radioLength = radioObj.length;
  30. 	if(radioLength == undefined) {
  31. 		radioObj.checked = (radioObj.value == newValue.toString());
  32. 		return;
  33. 	}
  34.  
  35. 	for(var i = 0; i < radioLength; i++) {
  36. 		radioObj[i].checked = false;
  37. 		if(radioObj[i].value == newValue.toString()) {
  38. 			radioObj[i].checked = true;
  39. 			$("#"+radioObj[i].id+"x").addClass(radioObj[i].id); <!-- jQuery -->
  40. 		}
  41. 		else $("#"+radioObj[i].id+"x").removeClass(radioObj[i].id);  <!-- jQuery -->
  42. 	}
  43.  
  44. }
  45. </script>
  46. <style type="text/css">
  47.  <!-- Oczywiście ustawiamy sobie css buttonow, ktore powiazane sa z raio - obrazki tez wchodza w gre... -->
  48. .niezaznaczone {
  49. 	background-color: blue;
  50. }
  51.  
  52. .niezaznaczone2 {
  53. 	background-color: red;
  54. }
  55.  
  56. .jeden {
  57. 	background-color: #006; 
  58. }
  59.  
  60. .dwa {
  61. 	background-color: #600; 
  62. }
  63.  
  64. </style>
  65. </head>
  66. <body>
  67.  
  68. <form name="radioForm" method="get" action="" onsubmit="return false;">  <!-- oczywiscie to false trzeba usunac -->
  69. <p style="display:none;">  <!-- chowamy radio - a w noscripcie wstawiamy zwykle radiobuttony jakby js nie bylo obslugiwane... -->
  70. <label class="jeden" for="jeden"><input type="radio" value="1" name="numer" id="jeden"></label>
  71. <label class="dwa" for="dwa"><input type="radio" value="2" name="numer" id="dwa"></label>
  72. </p>
  73.  
  74. <input type="button" onclick="alert('Wartosc: '+getCheckedValue(document.forms['radioForm'].elements['numer']));" value="Pokaz wartosc">
  75.  
  76.  <!-- id radia + x daje nam id buttona -->
  77. <input id="jedenx" class="niezaznaczone" type="button" onclick="setCheckedValue(document.forms['radioForm'].elements['numer'], '1');" value="Ustaw jeden">
  78. <input id="dwax" class="niezaznaczone2" type="button" onclick="setCheckedValue(document.forms['radioForm'].elements['numer'], '2');" value="Ustaw dwa">
  79.  
  80. <input type="button" onclick="setCheckedValue(document.forms['radioForm'].elements['numer'], '');" value="Wyczysc">
  81. </form>
  82.  
  83. </body>
  84. </html>
[HTML] pobierz, plaintext


Teraz wszystko w Twoich łapach - zmień css, ustaw obrazki, podepnij jquery i będzie ok wink.gif
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.