---
title: "Komplicerad bildvisare"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/109254-komplicerad-bildvisare"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "haider"
published: "2004-08-14T20:12:43.000Z"
updated: "2004-08-16T06:26:09.000Z"
replies: 1
views: 292
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/109254-komplicerad-bildvisare"
---

# Komplicerad bildvisare

## #1 — haider, 2004-08-14T20:12Z

Hej igen

Jag vill få ihop en komplicerad bildvisare.
Så ser mallen ut just nu:

<http://www.animadesign.se/test/> 

Vad jag behöver ha hjälp med är att utveckla de script som används till ett nytt script.
Jag vill ha ett script som visar bilder, ex **showImage(namn,antal);** där namn är namnet på bildserien och antal är antalet bilder i serien.

**Skriptet**

```
<script>
var markeradBild= 0;
function swapPic(n) {
					
document.getElementById('PicButton_' + markeradBild).src = '/bilder/sidan/' + (markeradBild+1) + '_off.gif';	
document.getElementById('PicButton_' + n).src = '/bilder/sidan/' + (n+1) + '_on.gif';
document.getElementById('Bilden_' + markeradBild).style.display = 'none';
document.getElementById('Bilden_' + n).style.display = 'block';

markeradBild= n;
}
				
</script>
```

**Bilden**

```
<div style="width:185px;margin-left:18px;margin-top:15px;" align="center">
											
	<div printID='overview' id='Bilden_0' style='display:block'>
	<img src='/bilder/bild_0.gif'>
	</div>

	<div printID='overview' id='Bilden_1' style='display:none'>
	<img src='/bilder/bild_1.gif'>
	</div>

</div>
```

Koden för varje bild är som du förstår alltså:

**\<div printID='overview' id='Bilden\_0' style='display:block'\>
\<img src='/bilder/bild\_0.gif'\>
\</div\>**

Här vill jag att **showImage();** ska skapa bildkoden i så många upprepningar som man har bestämt i "antal", som i showImage(namn,antal);, samt ställa in rätt nummer i ID samt och filnamn med dess nummerändelse i IMG.

kortfattat alltså typ: 

id=Bilden_0
img=...hus_0.gif    (om man nu valt namnet hus)

id=Bilden_1
img=...hus_1.gif

id=Bilden_2
img=...hus_2.gif

osv

**Navigeringsknappar**

```
<div style="padding-bottom:3px"><img src="/bilder/sidan/pics.gif" height="14"></div>

	<div style='padding-bottom:5px'>
	<a href='javascript:swapPic(0);'>
	<img id='PicButton_0' src='/bilder/sidan/1_on.gif' width='13' height='13' border='0'>
	</a>
	</div>

	<div style='padding-bottom:5px'>
	<a href='javascript:swapPic(1);'>
	<img id='PicButton_1' src='/bilder/sidan/2_off.gif' width='13' height='13' border='0'>
	</a>

</div>
```

Här hade jag tänkt, att vårat **showImage** script ska skriva den skriptkod ovan så många gånger, som det angavs i "antal".

Det som ställs in interaktivt är numret i bilden samt numret i scriptanropet **swapPic();**

Ursäkta att det blev långdraget, men jag vore tacksam om någon kunde hjälpa mig.

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

## #2 — haider, 2004-08-16T06:26Z

Ingen som svarar :l 

Om det är så att ovanstående är för svårt att göra interaktivt, så kanske man skulle kunna göra nåt i stil med:

```
<div ID='bildserie_01' style="width:185px;margin-left:18px;margin-top:15px;" align="center">
											
	<div printID='overview' id='Bilden_0' style='display:block'>
	<img src='/bilder/bild_0.gif'>
	</div>

	<div printID='overview' id='Bilden_1' style='display:none'>
	<img src='/bilder/bild_1.gif'>
	</div>

... osv osv, beroende på hur många bilder denna bildserie har

</div>
```

Ovanstående är för själva bilden.
Någonstans i dokumentet har man redan en massa divvar som definierar vilka bilderna är inom varje bildserie.
Detta gör man med hjälp av **id='bildserie\_X'**

Sedan så har man:

```
<div ID='Navigering_01' style="padding-bottom:3px"><img src="/bilder/sidan/pics.gif" height="14"></div>

	<div style='padding-bottom:5px'>
	<a href='java script:swapPic(0);'>
	<img id='PicButton_0' src='/bilder/sidan/1_on.gif' width='13' height='13' border='0'>
	</a>
	</div>

	<div style='padding-bottom:5px'>
	<a href='java script:swapPic(1);'>
	<img id='PicButton_1' src='/bilder/sidan/2_off.gif' width='13' height='13' border='0'>
	</a>

.. osv, så många knappar dennes bildserie behöver

</div>
```

Ovanstående är en av många divvar för bildseriernas navigeringsknappar.
Detta ställer man in genom **id='Navigering\_X'**

I detta fallet behöver ShowImage() endast placera dit rätt bildserie genom att hämta in den med hjälp av getElementById('bildserie_X').

Är det lättare att lösa nu?
Första alternativet är kanske häftigare, men detta alternativ funkar också.

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

---

Tråden på webben: https://www.webforum.nu/amne/javascript/109254-komplicerad-bildvisare
