Komplicerad bildvisare

haiderMedlem sedan jan. 2003956 inlägg

Trådstart14 aug. 2004 20:12#1

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å:

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.

haiderMedlem sedan jan. 2003956 inlägg

16 aug. 2004 06:26#2

Ingen som svarar

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