Wissel image met radiobutton ?

[yammaski]

Pagina laadt, 2 radiobuttons zijn unchecked. 2 dezelfde images : "BottomLineNO.png".
Als een radiobutton op checked gezet wordt, wil ik een imageswap : één "BottomLineNO.png" moet "BottomLineYES.png" worden.
Wordt de andere radiobutton op checked gezet, draait het om. Dus enkel als de pagina geladen wordt zie je 2 dezelfde images.

de images staan in 2 div's :

<div id="TL_boven"><img id="redbar" src="../images/BottomLineNO.png" width="736" height="5" alt="" /></div>
<div id="TL_onder"><img id="redbar" src="../images/BottomLineNO.png" width="736" height="5" alt="" /></div>

form met 2 radiobuttons :

<input type="radio" name="Eigentekst" id="Eigentekst" onClick="NO_YES()" value="1" title="kies bovenste" />
<input type="radio" name="Eigentekst" id="Eigentekst" onClick="NO_YES()" value="2" title="kies onderste" />

Voorbeelden : begin -en eindstadia. Rode lijntjes : src="../images/BottomLineNO.png"

 

[That Guy]

uhm, en je vraag is, hoe ziet de NO_YES() functie eruit?

Nou, verander eerst eens je radiobuttons code:

<input type="radio" name="Eigentekst" id="Eigentekst" onClick="NO_YES(this)" value="1" title="kies bovenste" />
<input type="radio" name="Eigentekst" id="Eigentekst" onClick="NO_YES(this)" value="2" title="kies onderste" />

dan wordt de JS code zoiets:[JS]function NO_YES(elem)
{
var v = this.value;
var bovenste = document.getElementById('TL_boven').getElementsByTagName('img')[0];
var onderste = document.getElementById('TL_onder').getElementsByTagName('img')[0];

switch(v)
{
case '1':
bovenste.src = 'yes.png'; //ofzo
onderste.src = 'no.png';
break;

case '2':
bovenste.src = 'no.png'; //ofzo
onderste.src = 'yes.png';
break;
}
}[/JS]het kan natuurlijk wat... netter, als je je images ID's geeft, en een if doet om de yes/no te verkrijgen, maargoed. Dit is het meest practisch. :thumb:

 

[Supersnail]

Allereerst zal je de ids van de afbeeldingen en de radio buttons moeten veranderen. Een id moet namelijk uniek zijn en jij hebt beide afbeeldingen en beide radio buttons dezelfde id gegeven. Maak er bijvoorbeeld van:

<div id="TL_boven"><img id="redbar1" src="../images/BottomLineNO.png" width="736" height="5" alt="" /></div>
<div id="TL_onder"><img id="redbar2" src="../images/BottomLineNO.png" width="736" height="5" alt="" /></div>

en

<input type="radio" name="Eigentekst" id="Eigentekst1" onClick="NO_YES()" value="1" title="kies bovenste" />
<input type="radio" name="Eigentekst" id="Eigentekst2" onClick="NO_YES()" value="2" title="kies onderste" />

Je radiobuttons bevatten al een onclick, dus je zou het veranderen van de afbeeldingen aan die functie kunnen toevoegen. Dat wordt dan zoiets (niet getest):
[js]if (document.getElementById('Eigentekst1').checked)
{
document.getElementById('redbar1').setAttribute('src', '../images/BottomLineYES.png');
document.getElementById('redbar2').setAttribute('src', '../images/BottomLineNO.png');
}
else
{
document.getElementById('redbar1').setAttribute('src', '../images/BottomLineNO.png');
document.getElementById('redbar2').setAttribute('src', '../images/BottomLineYES.png');
}[/js]

[edit]Vegras was me voor.[/edit]

 

[yammaski]

Dat van Vegras lukte me niet.

Dat van Supersnail gedeeltelijk ... image swapt, maar de 2 rbuttons blijven allebei "checked" !?


EDIT : name en id van radiobutton moet wèl hetzelfde zijn
Dan werkt het !

Thanks again guys !

 

[Supersnail]

De name van de radio buttons moet inderdaad gelijk zijn. Anders kunnen ze beiden geselecteerd worden. De ids moeten verschillend zijn, zie http://en.wikipedia.org/wiki/HTML#Attributes:

The id attribute provides a document-wide unique identifier for an element. This can be used by stylesheets to provide presentational properties, by browsers to focus attention on the specific element, or by scripts to alter the contents or presentation of an element. Appended to the URL of the page, it provides a globally-unique identifier for an element; typically a sub-section of the page. For example, the ID "Attributes" in http://en.wikipedia.org/wiki/HTML#Attributes

Dat het toch werkt met twee gelijke ids komt omdat getElementById alleen het eerste element met dat id "pakt".