Avatar billede ravnborg Nybegynder
16. november 2008 - 21:40 Der er 4 kommentarer og
2 løsninger

Skift billede med drop-down form.

Jeg har et billede på min side, jeg gerne vil have til at ændre sig, i forhold til hvilken option man vælger i en form:

Billedet starter med at være:
<img src="pic/yes.jpg" alt="" width="22" height="22" border="0">
og skal kan ændre sig til:
<img src="pic/no.jpg" alt="" width="22" height="22" border="0">

Det jeg ønsker er, at når man har valgt option 1 vises yes.jpg, og ved option 2 vises no.jpg

<select size="1" name="antal">
    <option value="1">1</option>
    <option value="2">2</option>
</select>
Avatar billede w13 Novice
16. november 2008 - 21:45 #1
<img id="pic1" src="pic/yes.jpg" alt="" width="22" height="22" border="0">

<select size="1" name="antal" onchange="document.getElementById('pic1').setAttribute('src', (this.value=='1' ? 'pic/yes.jpg' : 'pic/no.jpg'))">
    <option value="1">1</option>
    <option value="2">2</option>
</select>
Avatar billede Slettet bruger
16. november 2008 - 21:46 #2
// Et javascript til at skifte billedet
<script type="text/javascript">
function changePic(id,val) {
  // Angiver et 'target' element
  var x = document.getElementById(id);

  // Sætter resultat options
  if(val == 1) {
    var output = "yes.jpg";
  } else if(val == 2) {
    var output = "no.jpg";
  }

  // Sætter billede
  x.src = "pic/" + output;
}
</script>

// Indsætter din form
<select size="1" name="antal" onchange="changePic('dynamicPic',this.value)">
    <option value="1">1</option>
    <option value="2">2</option>
</select>

// Indsætter billede

<img src="pic/yes.jpg" alt="" width="22" height="22" border="0" id="dynamicPic" />
Avatar billede Slettet bruger
16. november 2008 - 21:47 #3
hehe w13's er lidt kortere, men blir svære at ordne hvis din html form skal udvides senere ;-)
Avatar billede w13 Novice
16. november 2008 - 22:32 #4
Dog er det en god idé, som Roxki gør, at lægge onchange-koden over i en funktion, så den kan flyttes til en ekstern fil.
Avatar billede ravnborg Nybegynder
16. november 2008 - 22:57 #5
Super, det virker perfekt!
I får 30 point hver, så roxki opret et svar :-)

mvh
Ravnborg
Avatar billede Slettet bruger
17. november 2008 - 00:33 #6
velbekommen
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester