probleem met variabele

[bn2vs]

Ik heb problemen met het volgende:

de variabele "eenVariabele" kan 26 waarden bevatten (alle lets van het alfabet), en afhankelijk van de waarde moet een specifieke afbeelding van bron veranderen.

Ik heb problemen met het eerste deel (dus weet wel hoe ik een afbeeldingn van bron kan laten veranderen). Ik kan het oplossen met 26 keer "if" te gebruiken, maar dat lijkt me niet echt efficient.

Hoe los ik dit best op?

 

[MerlinTheGreat]

Kan je de bronafbeeldingen niet als naam de letter geven waaraan de afbeelding gekoppeld moet zijn? Dan hoef je gewoon de bron samen te stellen met de inhoud van de variabele...

 

[bn2vs]

Er moet slechts een van de 26 afbeeldingen van bron veranderen en ik zie niet hoe dat zou gaan op die manier. (natuurlijk veel kans dat ik iets over het hoofd zie )

 

[MerlinTheGreat]

En hoe is je huidige code samengesteld, hoe zijn de afbeeldingen en afbeeldingsbronnen benoemd? Kan je het stuk waarover je vraag gaat posten? Of kan/mag dat niet? Het zou de hele zaak wel een ietsje makkelijker maken.

 

[bn2vs]

Ik stel mn vraag zodat ik eraan kan beginnen, duus kan nu moelijk al iets late zien

zo ongeveer zien de afbeeldingen deruit. de bron voor de afbeeldinegn is normal img/afbeelding_X_1.jpg en moet afhankeijk van een variabele bij een afbeelding img/afbeelding_X_2.jpg worden.

<img name="afbeelding_a" src="img/afbeelding_a_1.jpg" />
<img name="afbeelding_b" src="img/afbeelding_b_1.jpg" />
<img name="afbeelding_c" src="img/afbeelding_c_1.jpg" />

 

[MerlinTheGreat]

Zoals ik het in jouw voorbeeld zie gebruik je "afbeelding_a_1.jpg" en "afbeelding_a_2.jpg" en "afbeelding_b_1.jpg" en "afbeelding_b_2.jpg" als namen...
Op die manier zit de letter die in je variabele zit toch in de naam. Je kan dus de naam van de afbeelding samenstellen met de variabele-inhoud.

bron="afbeelding_" + variabele + "_1.jpg"
bron="afbeelding_" + variabele + "_2.jpg"
enz...

Vervolgens gebruik je de variabele bron om de afbeeldingsbron te benoemen.

 

[bn2vs]

Zo gaat het idd wel voor 1 afbeelding

Maar ik heb 26 afbeeldingen die elk op een specieke locatie staan, en als ik het op die manier doe kan daar dus geen rekening mee worden gehouden.

Suggesties?

 

[w.sickman]

Hey bn2vs,

Als ik je goed begrijp wil je dus eigenlijk per letter een andere URL. Dan kun je het beste een Array gebruiken.

<script type="text/javascript">
  $urls = {
               "a" : "http://fluxility.com/resources/images/header.png",
               "b" : "http://fluxility.com/resources/images/woutcard.png"
             };

   $letter = "a"; // of b, of c of d. wat je wilt :-p
   
   document.getElementById('je-plaatje').src = $urls[$letter];
</script>

Wout

 

[bn2vs]

Oke, dat snap ik, maar ik zie nog steeds niet hoe je dan kan maken dat slechts een afbeelding verandert.

Hoe zou het script voor deze situatie eruit zien?

Een bezoeker komt op een pagina met 3 afbeeldingen met daaronder een dropdownbox met 3 opties derin en een submit knop. Afhankelijk van de optie die gekozen word moet een van de afbeedlingen van kleur veranderen.

Als ik dat script heb kan ik er wss hetgeen uithalen dat ik nodig heb

 

[w.sickman]

Haha, je moet natuurlijk wel je vraag goed stellen . Je wilt dus ook nog een methode om je plaatje te setten. Dat kan natuurlijk ook.

<script type="text/javascript">
	var replacer = {
		replaceImage: function(newChar){
			document.getElementById("holder1").src = this.urls[newChar];
		},
		
		urls: {
			"a" : "http://fluxility.com/resources/images/header.png",
            "b" : "http://fluxility.com/resources/images/woutcard.png"
		}
	}

</script>

<img src="" id="holder1" alt="het plaatje" />

<select id="trigger" onchange="replacer.replaceImage(this.value)">
	<option value="a">Letter a</option>
	<option value="b">Letter b</option>
</select>

Wil je het via een submit dan neem je als html:

<form action="javascript:replacer.replaceImage(document.getElementById('trigger').value);">
	<select id="trigger">
		<option value="a">Letter a</option>
		<option value="b">Letter b</option>
	</select>
	<input type="submit" value="verander plaatje" />
</form>

Wout

 

[bn2vs]

Sry voor hoe ik mn vragen stel, maar ik heb nooit een opleiding js gevolgd ofzow en heb geen idee hoe sommige dingen heten.

Dit is de code die ik momenteel gebruik. (hij werkt maar is nie echt efficient lijkt me)

         if (subcategory == "a") {knoptype = link_btn} else {knoptype = button_btn};
         c1_a = "<!-- A --><div style=\"position:absolute;left:423;top:52;\">\n<img border=\"0\" name=\"imga\" src=\"../a/" + knoptype + ".gif\"/></div>\n\n";
         if (subcategory == "b") {knoptype = link_btn} else {knoptype = button_btn};
         c1_b = "<!-- B --><div style=\"position:absolute;left:445;top:58;\">\n<img border=\"0\" name=\"imgb\" src=\"../b/" + knoptype + ".gif\"/></div>\n\n";

Ik wil voorkomen dat ik voor elke letter deze regel moet zetten.

if (subcategory == "a") {knoptype = link_btn} else {knoptype = button_btn};

 

[w.sickman]

Brrrrr, ik ben je kwijt. Als ik je goed begrijp heb je het volgende:

- een plaatje <img ... /> op je pagina
- een dropdown <select>..</select> op je pagina
- de dropdown heeft de opties A-Z

En nu wil je dat wanneer je de select veranderd, het bij behorende plaatje in <img /> wordt geladen?

Kun je dat even bevestigen.

Wout

 

[bn2vs]

Die dropdown en select was een voorbeeld vane en gelijkaardige situatie.

Ik heb dus 26 afbeeldingen op mn pagina en een variabele met een letter waarde (a,d,c,...)
Als die variabele de waarde "a" heeft, dan moet afbeelding a van bron veranderen en de rest avn de afbeeldingen hetzelfde blijven.

 

[w.sickman]

Volgens mij begin ik hem eindelijk te begrijpen . Maar dat dacht ik al eens eerder .

Maar je hebt dus 26 plaatjes, en afhankelijk van de waarde van het variabel moet een van die plaatjes veranderen.

<script type="text/javascript">
   $variabel = "a"; // of b, c..enz
   document.getElementById("plaatje-" + $variabel).src = "de-nieuwe-source.jpg";
</script>

Maargoed, volgens mij wilde je ook dat de rest van de plaatjes weer hun oude ik werd. In dat geval wil ik je aanraden om met cijfers te werken. Groepen letters kan de computer namelijk weinig mee, terwijl die van groepen cijfers alles snapt.

<script type="text/javascript">
    $variabel = 1; //was dus "a"
    
    if(document.getElementById('plaatje-' + $variabel).src!="de-nieuwe-source.jpg"){  //  alleen uitvoeren als er ook wat te wijzigen valt
        for(i=1;i<=26;i++){  // Ga alle elementen af
           document.getElementById('plaatje-' + $i).src = "het-oude-plaatje.jpg"; // ze ieder plaatje op het oude
        }
        document.getElementById('plaatje' + $variabel).src = "de-nieuwe-source.jpg"; // maak het juiste plaatje weer de nieuwe source
   }
  </script>

Zoals je ziet zet ik ieder variabel weer terug naar "het-oude-plaatje.jpg" ongeacht of deze al die waarde heeft. Je zou ervoor kunnen kiezen om te controlen of een plaatje al een bepaalde waarde heeft, maar if's kosten veel meer tijd dan gewoon iets toewijzen. Dus deze vorm is sneller. (niet dat je het snel merkt, maar het gaat om het idee).

Nog sneller zou wezen als je gewoon het oude variabel onthoud en enkel deze weer de oude maakt.

Ik gok dat je hiermee je code hebt die je zoekt. Hoop ik

Wout

 

[bn2vs]

Nou, het is dus blijkbaar heel simpel...
Dat eerste vooreeld helpt me verder

Het 2e heb ik niet nodig omdat de waarde van de varibele toch niet kan veranderen zonder het herladen van de pagina.

Thnx voor de hulp :thumb:

 

[bn2vs]

Wel, dit is hoe ik het nu heb (en het werkt zo)

         c1_final = "<script type=\"text/javascript\"> img" + subcategory + ".src = \"../" + subcategory + "/" + link_btn + "\"; </" + "script>\n\n\n";

getElementById ging om een of andere reden niet...

deze topic kan nu wel closed ofzow