Avatar billede galan Nybegynder
13. november 2006 - 22:27 Der er 14 kommentarer og
1 løsning

Ændre billede i div boks vha. dropdown

Hej Exp,

Jeg ville høre om der er nogen der kan hjælpe med et lille problem. Det er ang. at skifte et billede i en div boks ved hjælp af en drop down menu?

Jeg har fx 6 billeder, fordelt på 2 dropdowns. Når man vælger en værdi i en drop down menu, skal et billede i en div boks ændre sig.

På forhånd tak for hjælpen!
Avatar billede galan Nybegynder
13. november 2006 - 23:01 #1
Jeg har fundet følgende kode:


<script language="JavaScript">
<!--
function changeImage(sel) {
  var i = sel.selectedIndex
  document.image1.src = sel.options[i].value
}
// -->

</script>
<SELECT name="pude" onChange="changeImage(this);" size="2">
<OPTION value="1.gif">Blå Pude</OPTION>
<OPTION value="2.gif">Lilla Pude</OPTION>
</SELECT>

Problemet med denne kode er dog, at hvis jeg har valgt billede 2, så skifter billedet godt nok, men hvis jeg trykker F5, går den tilbage til billede 1, men har stadigvæk billede 2 markeret...
Avatar billede thesurfer Nybegynder
14. november 2006 - 00:29 #2
Prøv med: onChange="changeImage(this.value);"

og:

function changeImage(filnavn) {
  document.image1.src = filnavn;
}
Avatar billede psykochicken Nybegynder
14. november 2006 - 00:57 #3
.. og du kunne nulstille select-boksen med noget ala:

<script language="JavaScript">
function nulstil(){
var elm = document.FORMNAVN.pude.options;
for(i=0;i<elm.length;i++){ elm[i].selected=false; }
}

function changeImage(filnavn) {
  document.image1.src = filnavn;
}

window.onload=nulstil;
</script>
</head>

<body>
<form name="FORMNAVN">
<SELECT id="pude" onChange="changeImage(this.value);" size="2">
<OPTION value="billede1.jpg">Blå Pude</OPTION>
<OPTION value="billede2.jpg">Lilla Pude</OPTION>
</SELECT>
</form>

/psc
Avatar billede galan Nybegynder
14. november 2006 - 13:29 #4
Hvordan sætter jeg lige koden op med flere billeder?

filnavn er vel navnet på billedfilen?
Avatar billede psykochicken Nybegynder
14. november 2006 - 14:22 #5
Ja. filnavn er er det navn på billedfilen du har stående i value på den valgte option.
Scriptet skal ikke ændres - du sætter bare flere options i din select ;o)

/psc
Avatar billede galan Nybegynder
14. november 2006 - 19:17 #6
Så fik jeg det til at virke :)

Der er dog lige et enkelt problem. Når jeg reloader, vises billede 1 rigtig nok, men billede 2 er stadigvæk markeret i feltet?

Noget helt andet, tror du det vil være bedst at loade billederne før, så det går hurtigere ved valg?

På forhånd tak!
Avatar billede galan Nybegynder
14. november 2006 - 19:23 #7
Får forresten følgende fejl:

'length' er null eller ikke et objekt
Avatar billede thesurfer Nybegynder
14. november 2006 - 20:31 #8
psykochicken> Optimering: for(i=0, elmlen = elm.length; i< elmlen; i++)

galan> Hvordan ser din kode ud nu?
Avatar billede psykochicken Nybegynder
14. november 2006 - 22:17 #9
thesurfer >> er det så den slipper for at regne elm.length ud ved hvert gennemløb? ;o)
Avatar billede thesurfer Nybegynder
15. november 2006 - 13:00 #10
psykochicken> Præcist! :-)
Avatar billede olebole Juniormester
15. november 2006 - 14:08 #11
<ole>

Hehe ... vaner, der breder sig  ;o)

/mvh
</bole>
Avatar billede thesurfer Nybegynder
20. november 2006 - 08:49 #12
Heysa.. Hvordan kommer vi videre?
Avatar billede psykochicken Nybegynder
21. november 2006 - 22:33 #13
galan >> har du fået det til at virke ?....ellers vis, hvad du har lavet ;o)

/psc
Avatar billede galan Nybegynder
14. april 2008 - 14:59 #14
lukket
Avatar billede olebole Juniormester
17. april 2008 - 00:51 #15
Hvad sker der for denne bruger ...?!??!!!
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