---
title: "Byta bakgrund i table med tre alternativ"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/86520-byta-bakgrund-i-table-med-tre-alternativ"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "matthiaz"
published: "2003-09-20T16:57:46.000Z"
updated: "2003-09-24T21:06:25.000Z"
replies: 12
views: 417
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/86520-byta-bakgrund-i-table-med-tre-alternativ"
---

# Byta bakgrund i table med tre alternativ

## #1 — matthiaz, 2003-09-20T16:57Z

Jag har en design men jag vill nu ha tre olika alternativ till bakgrunder i mina tables, sidan är uppbyggd så att det finns två bakgrunder på sidan i två \<td\> taggar och jag vill kunna med javascript byta dem två bakgrunderna till två andra, om det går att förladda alla bakgrunderna in i index dokumentet skulle också vara ett plus.

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

## #2 — PepeJeria, 2003-09-20T17:19Z

Genom att använda mig av sökfunktionen hittade jag detta:
<http://www.webforum.nu/showthread.php?s=&forumid=24&threadid=82870&highlight=bakgrund+bild>

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

## #3 — matthiaz, 2003-09-20T22:46Z

Har fortfarande inte fått svar på min fråga, jag vill använda onClick med en länk och sen vill jag att t.ex två bilder som hör i hop ska komma i två andra? hur?

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

## #4 — Jojoxx, 2003-09-21T10:26Z

```
<style type="text/css">
#foo { background-image:url(bild.gif); width:100px; }
#bar { background-image:url(bild2.gif); width:100px; }
</style>

<table>
<tr><td id="foo">&amp;nbsp;</td><td id="bar">&amp;nbsp;</td></tr>
</table>

<a href="#"
	onclick="document.getElementById('foo').style.backgroundImage='url(annanbild.gif)'; document.getElementById('bar').style.backgroundImage='url(annanbild2.gif)';">Byt</a>
```

...så ungefär?

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

## #5 — matthiaz, 2003-09-21T14:26Z

Men hur skulle koden se ut om jag ville ha fler alternativ till bilder?

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

## #6 — matthiaz, 2003-09-21T14:46Z

Eller det var inge svårt, bara lägga in fler A HREF taggar ju, tack så mkt

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

## #7 — matthiaz, 2003-09-24T09:13Z

Men jag har fortfarande ett problem, det funkar inte i Opera, men i Mozilla och IE, jag har krav på Opera också av min webblärare

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

## #8 — PepeJeria, 2003-09-24T09:58Z

Vilken Opera version? Och hur ser din kod ut?

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

## #9 — matthiaz, 2003-09-24T16:28Z

Senaste Opera versionen, 7.0 eller vad det är.

```
<html>
<head>
<title>mathiiiaS.</title>
</head>
<body bgcolor="#F3F3F3" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" alink="#000000" link="#000000" vlink="#000000" text="#000000">
<style type="text/css">
#foo { background-image:url(images/ferrari_right.gif); }
#bar { background-image:url(images/ferrari_left.gif); }
</style>
<br><br><center>
<table cellspacing="0" cellpadding="0" border="0" width="800"><tr><td width="800">
<table cellspacing="0" cellpadding="0" border="0" width="800"><tr><td width="800"><img src="images/title.gif" width="800" height="65"></td></tr><tr><td width="800">
<center>
<table cellspacing="0" cellpadding="0" border="0" width="734"><tr><td width="1" bgcolor="black"><img src="spacer.gif" width="1" height="1"></td><td width="160" bgcolor="black"><img src="spacer.gif" width="160" height="1"></td>
<td width="1" bgcolor="black"><img src="spacer.gif" width="1" height="1"></td><td width="10"><img src="spacer.gif" width="10" height="1"></td><td width="1" bgcolor="black"><img src="spacer.gif" width="1" height="1"></td>
<td width="560" bgcolor="black"><img src="spacer.gif" width="560" height="1"></td><td width="1" bgcolor="black"><img src="spacer.gif" width="1" height="1"></td></tr><tr>
<td width="1" bgcolor="black"><img src="spacer.gif" width="1" height="1"></td><td width="160" id="bar" valign="top">
<center>
<table cellspacing="0" cellpadding="0" width="140" border="0"><tr><td><br>
<font face="verdana" size="1">
Bakgrundsbild?<br>
<a href="#"onclick="document.getElementById('foo').style.backgroundImage='url(images/citroen_right.gif)'; document.getElementById('bar').style.backgroundImage='url(images/citroen_left.gif)';">Citroën</a><br>
<a href="#"onclick="document.getElementById('foo').style.backgroundImage='url(images/toyota_right.gif)'; document.getElementById('bar').style.backgroundImage='url(images/toyota_left.gif)';">Toyota</a><br>
<a href="#"onclick="document.getElementById('foo').style.backgroundImage='url(images/volvo_right.gif)'; document.getElementById('bar').style.backgroundImage='url(images/volvo_left.gif)';">Volvo</a><br>
<a href="#"onclick="document.getElementById('foo').style.backgroundImage='url(images/ferrari_right.gif)'; document.getElementById('bar').style.backgroundImage='url(images/ferrari_left.gif)';">Ferrari</a><br>
<br><br>
</td></tr></table>
</center>
</td><td width="1" bgcolor="black"><img src="spacer.gif" width="1" height="375"></td>
<td width="10"><img src="spacer.gif" width="10" height="1"></td><td width="1" bgcolor="black"><img src="spacer.gif" width="1" height="1"></td><td width="560" id="foo" valign="top">
<center>
<table cellspacing="0" cellpadding="0" width="540" border="0"><tr><td><br>
<font face="verdana" size="1">
BLA BLA, här kommer en riktigt fin sida ligga nån gång<br><br>
Eller så är planerat iallafall?!
<br><br>
</td></tr></table>
</center>
</td><td width="1" bgcolor="black"><img src="spacer.gif" width="1" height="1">
</td></tr><tr>
<td width="1" bgcolor="black"><img src="spacer.gif" width="1" height="1"></td>
<td width="160" bgcolor="black"><img src="spacer.gif" width="160" height="1"></td><td width="1" bgcolor="black"><img src="spacer.gif" width="1" height="1"></td><td width="10"><img src="spacer.gif" width="10" height="1"></td>
<td width="1" bgcolor="black"><img src="spacer.gif" width="1" height="1"></td><td width="560" bgcolor="black"><img src="spacer.gif" width="560" height="1"></td><td width="1" bgcolor="black"><img src="spacer.gif" width="1" height="1"></td></tr>
<table cellspacing="0" cellpadding="0" border="0" width="734"><tr><td width="400"><font face="verdana" size="1">Copyright 2003, All Rights Reserved</td><td width="334" align="right"></td></tr></table>
</body></html>
```

Adressen till sidan är, pipsosbros.com/mathias

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

## #10 — Jojoxx, 2003-09-24T17:07Z

Verkar vara ett cache-problem. Det går bara att byta till bilder som redan ligger i cachen i Opera. Prova att lägga till detta (i head ex.)

```
<script type="text/javascript">
var imgsrc=["images/citroen_left.gif","images/citroen_right.gif","images/toyota_left.gif","images/toyota_right.gif","images/volvo_left.gif","images/volvo_right.gif","images/ferrari_left.gif","images/ferrari_right.gif"];
var imgs=new Array();
for(var n=0;n<imgsrc.length;n++){ imgs[n]=new Image(); imgs[n].src=imgsrc[n]; }
</script>
```

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

## #11 — matthiaz, 2003-09-24T19:01Z

Det funkar fortfarande inte :/

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

## #12 — Jojoxx, 2003-09-24T19:15Z

Ursäkta. Hade missat en liten men vital del i scriptet :) Prova det igen.

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

## #13 — matthiaz, 2003-09-24T21:06Z

Tack Jojoxx, Nu funkar det, du hade bara glömt att det skulle vara right och left inte bara right right i filnamnen, men så dum är jag ändå inte ;).. Funkar nu kolla själva på <https://www.pipsosbros.com/mathias>

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

---

Tråden på webben: https://www.webforum.nu/amne/javascript/86520-byta-bakgrund-i-table-med-tre-alternativ
