---
title: "byta bild utan att ladda om sidan"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/99079-byta-bild-utan-att-ladda-om-sidan"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "doggelito"
published: "2004-03-09T13:30:41.000Z"
updated: "2005-02-05T01:12:48.000Z"
replies: 12
views: 605
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/99079-byta-bild-utan-att-ladda-om-sidan"
---

# byta bild utan att ladda om sidan

## #1 — doggelito, 2004-03-09T13:30Z

kan man med javascript byta bild på en sida utan att uppdatera sidan?
jag har en listmeny med bildnamnen, när man väljer ett namn så ska den bilden visas brevid som en lite preview.

```
<select name="image" onChange="changeImage();">
<option value="bild1.gif">första bilden</option>
<option value="bild2.jpg">andra bilden</option>
</select>

<img src="???">
```

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

## #2 — Web-Tor, 2004-03-09T13:45Z

Ett snabbt exempel:

```
<head>
	<script type="text/javascript">
	<!--
		function changeImage(){
			img = document.getElementById("image").value;
			document.getElementById("bilden").setAttribute("src", img);
		}
	//-->
	</script>
</head>

<body>
<form>
<select id="image" onChange="changeImage();">
	<option value="bild1.gif">första bilden</option>
	<option value="bild2.jpg">andra bilden</option>
</select>
</form>
<img id="bilden" src="tomt.gif">
</body>
```

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

## #3 — doggelito, 2004-03-09T14:01Z

Tack Web-Tor!
Funkar bra i IE :) men inte i Firefox :(
Nån som ser nåt fel?

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

## #4 — Jesper T, 2004-03-09T14:12Z

```
function changeImage(){
       img = document.getElementById("image").value;
       document.images.bilden.src=img;
	}

...

<img id="bilden" name="bilden" src="tomt.gif">
```

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

## #5 — doggelito, 2004-03-09T15:10Z

Samma sak! :(

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

## #6 — Peter S, 2004-03-09T16:45Z

```
<head>
	<script type="text/javascript">
	<!--
		function changeImage(val){
			document.getElementById("bilden").setAttribute("src", val);
		}
	//-->
	</script>
</head>

<body>
<form>
<select id="image" onChange="changeImage(this.options[this.selectedIndex].value);">
	<option value="bild1.gif">första bilden</option>
	<option value="bild2.jpg">andra bilden</option>
</select>
</form>
<img id="bilden" src="tomt.gif">
</body>
```

 :)

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

## #7 — doggelito, 2004-03-10T07:02Z

Tack Peter! :bire

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

## #8 — OscarO, 2004-03-15T11:11Z

Variant på detta problem...

Hej Doggelito och ni andra!

Jag har en variant på Doggelitos problem, jag vill nämligen göra en hierarkisk trädstruktur som liknar den i windows katalogstruktur. Jag vill alltså ha en plustecken-bild som byts till ett minustecken när man har klickat på den.

Jag har koden fixad :) men jag skulle vilja slippa omladdningen :( av sidan vid varje klick! Är det någon som har någon lösning?

När man klickar på plustecknet så händer två saker:
1\. Plustecknet byts till minustecken
2\. En osynlig \<div\> dyker upp

\<script type="text/javascript"\>
function visaMig (it, box, bild) {
   if (document.getElementById(it).style.display == "none"){
   syns = "block";
   document.getElementById(bild).setAttribute("src", "bilder/minusbild.gif");
	}
   else{
      syns = "none";
      document.getElementById(bild).setAttribute("src", "bilder/plusbild.gif");}
   document.getElementById(it).style.display = syns;
}
\</script\>

\<a class="tabell_lank" onclick="visaMig('div_hel', 'this', 'hel_bild')" href="#"\>
   \<img class="table_tree" id="hel_bild" src="bilder/plusbild.gif" width="9" height="9"/\>
\</a\>

Finns det någon bra kodsnutt som säger till Javascript att inte ladda om sidan?

Tacksam för svar!

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

## #9 — Jesper T, 2004-03-15T12:28Z

**Välkommen till WF OscarO!**
1\.) [Läs förhållningsreglerna](http://www.webforum.nu/faq.php?faq=about_wf#rules_rules)
2\.) Här är nog det du söker: <http://www.webforum.nu/showthread.php?s=&threadid=91848&forumid=149>

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

## #10 — OscarO, 2004-03-15T13:01Z

Tack! och ursäkta...?

Tack så mycket Jesper!

Det verkar vara en mera stilren lösning på mitt problem.

Du skrev även att jag borde läsa igenom förhållningsorderna, har jag gjort något stötande?

Det är inte länken till funktionmedia.se eller?

Berätta vad jag gör fel så fixar jag det! :)

Ha det!

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

## #11 — Jesper T, 2004-03-15T15:00Z

Nej, nej. Ingen fara på färde. Men när man postar kod så brukar man använda \[kod\] \[ /kod\] -taggar. ;)

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

## #12 — OscarO, 2004-03-15T15:08Z

Aha!

Gött, ska tänka på det i fortsättningen!

Thx man!

/Oscar

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

## #13 — lillebror, 2005-02-05T01:12Z

Det svar som är accepterat för denna tråd är nästan det jag söker efter. Jag har en klocka på min hemsida som visar UTC-tid.  Denna klocka består av en bakgrundsbild samt en bild med själva tiden som genereras av ett php-skript som sen sammanfogas utav ytterligare ett php-skript till endast en bild. 

Nu söker jag en funktion som uppdaterar och kör funktionen (changeImage(val)) i denna tråd var 60:e sekund utan att hela sidan laddas om. Är detta möjligt? :)

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

---

Tråden på webben: https://www.webforum.nu/amne/javascript/99079-byta-bild-utan-att-ladda-om-sidan
