---
title: "ändra färg på bild vid klick"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/60349-ändra-färg-på-bild-vid-klick"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "ampy"
published: "2002-11-26T19:07:05.000Z"
updated: "2002-12-01T19:52:49.000Z"
replies: 15
views: 341
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/60349-ändra-färg-på-bild-vid-klick"
---

# ändra färg på bild vid klick

## #1 — ampy, 2002-11-26T19:07Z

Jag har ett formulär där det finns tolv frågor med tre svarsalternativ på varje fråga.

De tre svarsalternativen på varje fråga består av tre sorters bilder. Nu vill jag att när man klickar på ett svarsalternativ på fråga 1 så ska den bilden ändra färg. Liknande detta script:

<http://www.jojoxx.net/jscript/archive/imageswap6.html>

Men hur ska man sedan veta vilken bilder besökarna har klickat på på svarsalternativen när dem skickar in formuläret?

Permalänk: https://www.webforum.nu/p/60349

## #2 — Eitraz, 2002-11-26T19:20Z

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

Permalänk: https://www.webforum.nu/p/867810

## #3 — Jojoxx, 2002-11-26T19:21Z

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>
```

Permalänk: https://www.webforum.nu/p/867811

## #4 — ampy, 2002-11-26T19:31Z

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

?

Permalänk: https://www.webforum.nu/p/867821

## #5 — Jojoxx, 2002-11-26T19:58Z

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](http://www.w3.org/TR/REC-CSS2/box.html#border-style-properties).

Permalänk: https://www.webforum.nu/p/867838

## #6 — ampy, 2002-11-26T20:01Z

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.

Permalänk: https://www.webforum.nu/p/867840

## #7 — Jojoxx, 2002-11-26T20:09Z

Men då får du väl köra den [variant](http://www.jojoxx.net/jscript/archive/imageswap6.html) 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
```

Permalänk: https://www.webforum.nu/p/867845

## #8 — ampy, 2002-11-26T20:41Z

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
```

Permalänk: https://www.webforum.nu/p/867873

## #9 — Jojoxx, 2002-11-27T06:38Z

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

Permalänk: https://www.webforum.nu/p/868043

## #10 — ampy, 2002-11-29T12:16Z

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?

Permalänk: https://www.webforum.nu/p/869529

## #11 — ampy, 2002-11-29T21:15Z

Ingen som vet?

Permalänk: https://www.webforum.nu/p/869949

## #12 — ampy, 2002-12-01T12:07Z

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

Permalänk: https://www.webforum.nu/p/870890

## #13 — Jojoxx, 2002-12-01T14:35Z

```
<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>
```

Permalänk: https://www.webforum.nu/p/871005

## #14 — ampy, 2002-12-01T15:14Z

Tackar så mycket!  :birp

Permalänk: https://www.webforum.nu/p/871048

## #15 — ampy, 2002-12-01T19:11Z

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?

Permalänk: https://www.webforum.nu/p/871215

## #16 — Jojoxx, 2002-12-01T19:52Z

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).

Permalänk: https://www.webforum.nu/p/871235

---

Tråden på webben: https://www.webforum.nu/amne/javascript/60349-ändra-färg-på-bild-vid-klick