Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: wyświetlanie zdjęcia po wybraniu opcji radio
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
m4dmike
27.07.2012, 08:15:08
Witam,
Chciałbym aby po wybraniu jednej z opcji radio wyświetlało się zdjęcie przypisane do tej opcji. Głowię się i nie mogę nic wymyślić, proszę więc o pomoc.
Wiem, że tutaj jest sam html ale to chyba trzeba wykonać w JS aby zmiana odbywała się bez przeładowania strony, po stronie klienta.

Kod
<form name="form" action="" method="post" >
    <input type="radio" id="1" name="rozmiar" value="1" onClick="<img scr='images/one.jpg'>"/>
    <input type="radio" id="2" name="rozmiar" value="2" onClick="<img scr='images/two.jpg'>"/>
    <input type="radio" id="3" name="rozmiar" value="3" onClick="<img scr='images/three.jpg'>"/>
</form>
mhw
27.07.2012, 08:34:56 
[HTML] pobierz, plaintext 
  1. <html>
  2.     <head>
  3.         <title>test</title>
  4.     </head>
  5.     <body>
  6.         <script type="text/javascript">
  7.             function change(x)
  8.             {
  9.                 img = document.getElementById("image");
  10.                 if(x == 1)  
  11.                     img.src = "1.jpg";
  12.  
  13.                 if(x == 2)
  14.                     img.src = "2.jpg";
  15.             }
  16.  
  17.         </script>
  18.         <form>
  19.             <input type="radio" name="g1" value="1" id="1" onclick="change(1)"/> jeden <br />
  20.             <input type="radio" name="g1" value="2" id="2" onclick="change(2)"/> dwa
  21.  
  22.         </form>
  23.         <img src="blank.jpg" id="image"/>
  24.     </body>
  25. </html>
[HTML] pobierz, plaintext


O to chodzi?
m4dmike
28.07.2012, 06:37:21
dokładnie o to chodzi, wielkie dzięki! smile.gif
a wiesz może jak zmieniać style po kliknięciu na radio?
Kod
function change(x)
            {
                img = document.getElementById("image");
                if(x == 1)  
                    img.src = "1.jpg"; document.getElementById('mini').style.width='300px';

                if(x == 2)
                    img.src = "2.jpg"; document.getElementById('mini').style.width='500px';
            }


taki zapis po kliknięciu x==1 zmienia styl, natomiast jak później kliknę x==2 to już nic się nie dzieje.
Jakieś rady?
toaspzoo
28.07.2012, 12:06:00
http://api.jquery.com/css/
mhw
28.07.2012, 12:34:20
Cytat(m4dmike @ 28.07.2012, 07:37:21 ) *
taki zapis po kliknięciu x==1 zmienia styl, natomiast jak później kliknę x==2 to już nic się nie dzieje.
Jakieś rady?


Eh, podstawy... Jeżeli wykonujesz więcej niż jedną instrukcję po if, to powinieneś umieścić je w klamrze {}, inaczej wykona się tylko pierwsza.
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.