ändra färg på bild vid klick

Lättast är väll att ha några "hidden input" oxå som får byta värde när man klickar på en bild oxå.

-Eitraz

En vanlig border borde väl fungera också;

<script language="JavaScript" type="text/javascript">
function Iclear(arr){
	for(var i=0;i<arr.length;i++){
		document.getElementById(arr[i]).style.border="0px";
	}
}
function Iset(id){
	document.getElementById(id).style.border="solid red 1px";
}
</script>
<form>
<input type="radio" name="fråga1" value="ett svar" onClick="Iclear(new Array('bild1b','bild1c')); Iset('bild1a');"> <img src="bild1a.gif" id="bild1a" border="0">
<input type="radio" name="fråga1" value="ett svar" onClick="Iclear(new Array('bild1a','bild1c')); Iset('bild1b');"> <img src="bild1b.gif" id="bild1b" border="0">
<input type="radio" name="fråga1" value="ett svar" onClick="Iclear(new Array('bild1b','bild1c')); Iset('bild1c');"> <img src="bild1c.gif" id="bild1c" border="0">
</form>

Måste man ha en sån där border, det var inte så snyggt...

?

Nej, det är få saker man måste här i livet - att sätta border på bilder är inte en av dem. Däremot kan du byta borderstyle från solid till ex. dotted eller ändra tjocklek och färg. Border-definitionerna är CSS och de hittar du här.

Men jag vill inte ha en border alls utan jag vill att man bara ska behöva klicka på bilden så ska den ändra färg. Nu måste man ju klicka på radio-knappen bredvid bilden.

Men då får du väl köra den variant som du hade först då. :) Det enda du behöver göra är att från länken sätta href="#" och onClick="selectLink('button_1_'); document.myForm.fieldA.value='svaret i fråga'; return false;"

Sedan har du ett formulär på sidan vid namn "myForm" och i det har du hidden-fält för alla frågor;

<form name="myForm" action="foo.asp" method="post">
<input type="hidden" name="fieldA">

...osv

Min kod ser ut så här nu:

<a href="#" onClick="selectLink('button_1_'); document.myForm.fraga_1.value='1'; return false;" onMouseover="rollIn('button_1_')" onMouseout="rollOut('button_1_')"><img src="tavling/gron_1.gif" border="0" name="button_1_"></a>

<a href="#" onClick="selectLink('button_2_'); document.myForm.fraga_1.value='X'; return false;"  onMouseover="rollIn('button_2_')" onMouseout="rollOut('button_2_')"><img src="tavling/gron_x.gif" border="0" name="button_2_"></a>

<a href="#" onClick="selectLink('button_3_'); document.myForm.fraga_1.value='2'; return false;"  onMouseover="rollIn('button_3_')" onMouseout="rollOut('button_3_')"><img src="tavling/gron_2.gif" border="0" name="button_3_"></a>

Men när jag klickar på en av bilderna får jag detta felmeddelande:

Fel: 'document.myForm.fraga_1' är null eller inte ett objekt

... och hur ser formuläret ut? Är det rätt avslutat med </form>, har namnet "myForm" och innehåller fältet "fraga_1"?

Hade visst inte avslutat med </form>. Men har ett annatproblem nu när jag ska lägga till flera rader. När jag har en rad som i detta exemepl fungerar det bra:

http://www.ampy.net/exempel1.htm

Men när jag lägger till ytterliggare en rad som blir det inte rött när man håller över eller när man klickar på en siffra.

http://www.ampy.net/exempel2.htm

Hur ska man lösa detta?

Ingen som vet?

Ingen som verkligen inte kan hjälpa mig? :q

<form name="myForm" action="tavlingar.asp?vad=laggtill" method="post">
<table border="0">
<tr><td>Hemmalag - Bortalag</td><td><img src="tavling/1.gif"></td><td><img src="tavling/x.gif"></td><td><img src="tavling/2.gif"></td></tr>
<tr>
	<td>Arsenal - Aston Villa</td>
	<td><a href="#" onMouseout="if(document.myForm.fraga_1.value!='1') document.images['fraga_1_1'].src='tavling/gron_1.gif';" onMouseover="document.images['fraga_1_1'].src='tavling/rod_1.gif';" onClick="a=document.myForm.fraga_1.value; if(a){ document.images['fraga_1_'+a].src='tavling/gron_'+a+'.gif'}; document.images['fraga_1_1'].src='tavling/rod_1.gif'; document.myForm.fraga_1.value='1'; return false;"><img src="tavling/gron_1.gif" border="0" name="fraga_1_1"></a></td>
	<td><a href="#" onMouseout="if(document.myForm.fraga_1.value!='x') document.images['fraga_1_x'].src='tavling/gron_x.gif';" onMouseover="document.images['fraga_1_x'].src='tavling/rod_x.gif';" onClick="a=document.myForm.fraga_1.value; if(a){ document.images['fraga_1_'+a].src='tavling/gron_'+a+'.gif'}; document.images['fraga_1_x'].src='tavling/rod_x.gif'; document.myForm.fraga_1.value='x'; return false;"><img src="tavling/gron_x.gif" border="0" name="fraga_1_x"></a></td>
	<td><a href="#" onMouseout="if(document.myForm.fraga_1.value!='2') document.images['fraga_1_2'].src='tavling/gron_2.gif';" onMouseover="document.images['fraga_1_2'].src='tavling/rod_2.gif';" onClick="a=document.myForm.fraga_1.value; if(a){ document.images['fraga_1_'+a].src='tavling/gron_'+a+'.gif'}; document.images['fraga_1_2'].src='tavling/rod_2.gif'; document.myForm.fraga_1.value='2'; return false;"><img src="tavling/gron_2.gif" border="0" name="fraga_1_2"></a></td>
</tr>
<tr>
	<td>Birmingham - Tottenham</td>
	<td><a href="#" onMouseout="if(document.myForm.fraga_2.value!='1') document.images['fraga_2_1'].src='tavling/gron_1.gif';" onMouseover="document.images['fraga_2_1'].src='tavling/rod_1.gif';" onClick="a=document.myForm.fraga_2.value; if(a){ document.images['fraga_2_'+a].src='tavling/gron_'+a+'.gif'}; document.images['fraga_2_1'].src='tavling/rod_1.gif'; document.myForm.fraga_2.value='1'; return false;"><img src="tavling/gron_1.gif" border="0" name="fraga_2_1"></a></td>
	<td><a href="#" onMouseout="if(document.myForm.fraga_2.value!='x') document.images['fraga_2_x'].src='tavling/gron_x.gif';" onMouseover="document.images['fraga_2_x'].src='tavling/rod_x.gif';" onClick="a=document.myForm.fraga_2.value; if(a){ document.images['fraga_2_'+a].src='tavling/gron_'+a+'.gif'}; document.images['fraga_2_x'].src='tavling/rod_x.gif'; document.myForm.fraga_2.value='x'; return false;"><img src="tavling/gron_x.gif" border="0" name="fraga_2_x"></a></td>
	<td><a href="#" onMouseout="if(document.myForm.fraga_2.value!='2') document.images['fraga_2_2'].src='tavling/gron_2.gif';" onMouseover="document.images['fraga_2_2'].src='tavling/rod_2.gif';" onClick="a=document.myForm.fraga_2.value; if(a){ document.images['fraga_2_'+a].src='tavling/gron_'+a+'.gif'}; document.images['fraga_2_2'].src='tavling/rod_2.gif'; document.myForm.fraga_2.value='2'; return false;"><img src="tavling/gron_2.gif" border="0" name="fraga_2_2"></a></td>
</tr>
</table>
<input type='hidden' name='fraga_1'>
<input type='hidden' name='fraga_2'>
<input type='submit' name='Submit' value='Skicka in' id='submit'>
</form>

Tackar så mycket! :birp

Har en annan fråga nu. Kan man göra så att vissa är förvalda i förväg liknande checked i radio-knappar.
Hur ska man göra i detta fall?

Det är inte svårare än att byta src för bilden så att den är röd istället för blå samt att du sätter value på hidden-fältet till motsvarande värde (1,x,2).