06. september 2011 - 17:06
Der er
17 kommentarer og 1 løsning
Klikke på billede i stedet for radio button
Hej Jeg er ved at lave en simpel lille side hvor brugeren skal vælge imellem to forskellige billeder ved at klikke på en radio button. Men i stedet kunne jeg tænke mig at brugeren klikkede på billedet i stedet for en radio button. Hvordan gør man det?
Annonceindlæg tema
Cloud & AI
I dette særtema ser vi på, hvordan cloud og AI bliver fundamentet for virksomhedernes digitale forretning, og hvordan de nye muligheder for automatisering og forretningsværdi kan udnyttes uden at miste overblik, sikkerhed og menneskelig kontrol.
06. september 2011 - 17:22
#1
du laver en onClick() og lidt javascript, der så kalder en side (eller hvad du nu vil) <img src="img/cadeau.gif" width="20" height="19" onclick="" />
06. september 2011 - 18:20
#2
DU misforstår claes57. Det jeg vil er at billedet er en radiobutton i stedet for standard.
06. september 2011 - 18:20
#3
Hovsa fik lige skrevet DU i stedet for Du . . . det kan godt lyde som om jeg øffer :)
07. september 2011 - 21:44
#4
<ole> weblance >> Det er vist dig, der misforstår, hvad claes57 skriver. Han giver dig netop opskriften på at bruge et billede i stedet for en radio button. Eller misforstår både claes57 og jeg dit spørgsmål? /mvh </bole>
07. september 2011 - 21:53
#5
Spørgsmålet går ud på at radio button A skal erstattes med billede A og at radio button B skal erstattes med billede B.
07. september 2011 - 22:20
#6
Så har hverken claes57 eller jeg misforstået noget. Spørgsmålet er så bare, hvad det er, du ikke har forstået =)
07. september 2011 - 22:26
#7
Ja jeg har ikke forstået noget som helst. Der hvor kæden hopper af er nok javascriptet :( Skal jeg lavet et onclick til billedet der sætter værdien i en radio button? Det ved jeg ikke hvordan man gør :(
07. september 2011 - 22:36
#8
I princippet kan det gøres med:
onclick="document.getElementById('myRadio').checked=true"
07. september 2011 - 23:45
#9
Kom til at tænke på, at det måske kunne være meget fikst at benytte
label elementets egenskaber:
<style type="text/css"> .fooBar input { position: absolute; left: -10000px; top: -10000px; } </style> <script type="text/javascript"> var actElm = "myCars_2"; function setRadio(elmLabel) { actElm = typeof actElm=="string" ? document.getElementById(actElm).parentNode : actElm; actElm.getElementsByTagName("img")[0].setAttribute("src", "radio_off.png"); elmLabel.getElementsByTagName("img")[0].setAttribute("src", "radio_on.png"); actElm = elmLabel; } </script> <form action=""> <div class="fooBar"> <label for="myCars_1" onclick="setRadio(this)">Bil #1: <img src="radio_off.png" alt=""><input id="myCars_1" name="myCars" value="1" type="radio"></label> <label for="myCars_2" onclick="setRadio(this)">Bil #2: <img src="radio_on.png" alt=""><input id="myCars_2" name="myCars" value="2" type="radio" checked="checked"></label> <label for="myCars_3" onclick="setRadio(this)">Bil #3: <img src="radio_off.png" alt=""><input id="myCars_3" name="myCars" value="3" type="radio"></label> </div> </form>
07. september 2011 - 23:58
#10
- og næste spørgsmål bliver sikkert:
"Hvis jeg nu skal bruge flere radio grupper?" =)
<style type="text/css"> .fooBar input { position: absolute; left: -10000px; top: -10000px; } </style> <script type="text/javascript"> var groupActiveElms = { "myCars": "myCars_2", "myBikes": "myBikes_3" }; function setRadio(elmLabel) { var sGroup = document.getElementById(elmLabel.getAttribute("for")).getAttribute("name"); var actElm = groupActiveElms[sGroup]; actElm = typeof actElm=="string" ? document.getElementById(actElm).parentNode : actElm; actElm.getElementsByTagName("img")[0].setAttribute("src", "radio_off.png"); elmLabel.getElementsByTagName("img")[0].setAttribute("src", "radio_on.png"); groupActiveElms[sGroup] = elmLabel; } </script> <form action=""> <div class="fooBar"> <label for="myCars_1" onclick="setRadio(this)">Bil #1: <img src="radio_off.png" alt=""><input id="myCars_1" name="myCars" value="1" type="radio"></label> <label for="myCars_2" onclick="setRadio(this)">Bil #2: <img src="radio_on.png" alt=""><input id="myCars_2" name="myCars" value="2" type="radio" checked="checked"></label> <label for="myCars_3" onclick="setRadio(this)">Bil #3: <img src="radio_off.png" alt=""><input id="myCars_3" name="myCars" value="3" type="radio"></label> </div> <div class="fooBar"> <label for="myBikes_1" onclick="setRadio(this)">Bike #1: <img src="radio_off.png" alt=""><input id="myBikes_1" name="myBikes" value="1" type="radio"></label> <label for="myBikes_2" onclick="setRadio(this)">Bike #2: <img src="radio_off.png" alt=""><input id="myBikes_2" name="myBikes" value="2" type="radio"></label> <label for="myBikes_3" onclick="setRadio(this)">Bike #3: <img src="radio_on.png" alt=""><input id="myBikes_3" name="myBikes" value="3" type="radio" checked="checked"></label> </div> </form>
08. september 2011 - 00:00
#11
Hmmm... Ha ha!! ... i sin mors underkjole ;-)
08. september 2011 - 00:24
#12
Nej, ikke i sin mors underkjole - men i hans søsters røde kjole *o) Verset, du prøver at citere, lyder:Ole Bole gik i Skole, med sin Søsters røde Kjole, kom hjem Klokken fem, gik på Hovedet i sin Seng, Ole vip, Ole vap, du slap! - og det stammer fra Ole Bole ABC . En legendarisk læsebog for folkeskolen, udgivet i 1920'erne og illustreret af Storm P. Jeg kom selv i skole i begyndelsen af 60'erne og havde Søren og Mette - Vi læser , men i min 6 år ældre storesøsters klasse brugte de Ole Bole ABC
08. september 2011 - 00:28
#13
- og som du kan se, var Søren og Mette ikke just perfekt pædagogik. Det hedder faktisk - men i sin søsters røde kjole , OleBole! *D
08. september 2011 - 13:32
#14
Hej... Nåå ja... men det jeg mente var... At tager du ikke pis å folk med #9 og #10... Du satme en dygtigt dansk lærer ;-)
08. september 2011 - 21:48
#15
Hmmmmm ... det forstod jeg ikke en hat af. Tror lige, jeg ryger en pind mere og ser, om det hjælper *-\
18. december 2011 - 15:02
#16
Olebole - smid et svar til point :)
18. december 2011 - 16:07
#17
Ellers tak, jeg samler ike point. Læg selv et svar og accepter det, så tråden lukkes =)
18. december 2011 - 19:13
#18
Takker
Vi tilbyder markedets bedste kurser inden for webudvikling