Udskifte billeder med javascript
Christian Kragh
Jeg vil gerne kunne udskifte billeder med et javascript for at kunne lave et
"animeret" billede.
Jeg har pr�vet med denne funktion:
<img src="billede1.png" name="XX">
<script type="text/javascript">
// Array of pictures to loop through
var picSet = ['billede1.png','billede2.png','billede3.png','billede4.png'];
// Function to change image
function swapImage(){
var i,x,j,n;
i = picSeta.length;
j = document.images['XX'].src.split('/');
n = j[j.length-1];
// Find index of current image in array
while ( i-- && picSet[i] != n ){}
// Set new image to index + 1 or loop if beyond end of array
document.images['XX'].src = picSet[ (i+1) % picSet.length];
}
// Setup timer
setInterval("swapImage()",100);
</script>
Det virker for s� vidt godt nok, men n�r jeg vil til at have 2 eller flere
billeder begynder den at drille...
De 2 billeder skal nemlig ikke v�re ens, men derimod k�rer forskudt.
Det er disse 2 array jeg vil bruge, som faktisk er ens, men med anden
r�kkef�lge.
// Array of pictures to loop through
var picSetA = ['billede1.png','billede2.png','billede3.png','billede4.png'];
var picSetB = ['billede3.png','billede4.png','billede1.png','billede2.png'];
Er der nogle der har en ide til hvordan det kan l�ses, s� jeg ubegr�nset kan
forl�nge r�kken af billeder s� jeg m�ske har 5 array om en m�ned og 40 om 4
m�neder?
Christian
Leif Neland
Du skal bare have et to-dimensionelt array, se f.ex.
http://www.javascriptkit.com/javatutors/twoarray1.shtml
En t�ller, der angiver hvilket billeds�t, der skal skiftes,
og et array af t�llere, der holder styr p�, hvor langt man er n�et i
hvert billeds�t.
Pseudokode:
picset = array(
array('pic11.png','pic12.png'...'pic1n'),
array('pic21.png','pic22.png'...'pic2n'),
...
array('picn1.png','picn2.png'...'picnn')
)
var setnr=0;
var setnrarr=array();
Function swapImage() {
if (++setnr >= picset.length()) {setnr=0};
if (++setnrarr[setnr]>=picset[setnr]) {setnrarr[setnr]=0);
document.getElementById("billede_"+setnr).src =
picset[setnr][setnrarr[setnr]];
}
Dine "skifterammer" har s� id=billede_0,billede_1 osv.
Det er ideen, s� m� du selv formulere det rigtigt :-)
Leif
Jørgen Farum Jensen
> Er der nogle der har en ide til hvordan det kan l�ses, s� jeg ubegr�nset
> kan forl�nge r�kken af billeder s� jeg m�ske har 5 array om en m�ned og
> 40 om 4 m�neder?
>
> Christian
Load-tiden for siden vil jo for�ges for hver gang du
tilf�jer nye billeder/nye arrays, s� der er vel en �vre gr�nse?
Bortset fra det vil jeg afholde mig fra at kommentere p�
scriptet, men henvise til nedenn�vnte artikel, som m�ske
indeholder et par brugbare ideer:
http://webdesign101.dk/slideshow/sequencer.php
Til sidst i artiklen er der en forklaring p�, hvordan
du kan udvide scriptet med flere arrays. V�r opm�rksom p�
at disse arrays ikke er arrays af billeder. For at
preloade de billeder du skal bruge skal du oprette
et eller flere billedarrays, som forklaret i forbindelse
med artiklens eksempel 3.
--
Med venlig hilsen
J�rgen Farum Jensen
H�ndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
.
Erik Ginnerskov
> Hej.
>
> Jeg vil gerne kunne udskifte billeder med et javascript for at kunne
> lave et "animeret" billede.
S�dan: http://hjemmesideskolen.dk/scripts/anim.asp ?
--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://ginnerskov.dk
http://html-faq.dk
Stig Johansen
news:4b028236$0$283$1472...@news.sunsite.dk...
> Er der nogle der har en ide til hvordan det kan l�ses, s� jeg ubegr�nset
kan
> forl�nge r�kken af billeder s� jeg m�ske har 5 array om en m�ned og 40 om
4
> m�neder?
Jeg har lavet et eksempel her:
http://w-o-p-r.dk/tips/javascript/multiple.images.animate.html
hvor jeg dog af dovenskab har brugt Erik's billeder (h�ber det er ok).
Der er 4 billeder, og indholdet er ens (=dovenskab), men jeg har defineret 4
forskellige r�kkef�lger.
Hvis du skal bruge det, s� skal du bare definere dine egne billeder i
funktionen cloneandadd, og r�kkef�lge i de tilh�rende imagesequences.
N�r/hvis man laver s�danne 'ting', er der en problemstilling ved blot at
udskifte med ".src=xxx".
Den henter ganske vist billederne ind i cachen, men n�r man s�tter .src til
en ny v�rdi, skal browseren afg�re om den skal bruge cachen eller ej.
S�dan nogle som mig har sat browseren til at sp�rge hver gang, og det
medf�rer, at der sker en foresp�rgsel til serveren hvor hvert billedskift.
Dvs. i dit tilf�lde 10 requests/sekund.
Der skal ikke ret mange samtidige brugere p� (af den slags) f�r din server
bliver lagt ned.
I eksemplet kan du se hvordan man benytter de preloadede billeder unde at
sp�rge p� serveren.
--
Med venlig hilsen/Best regards
Stig Johansen
Stig Johansen
news:4b02e41b$0$272$1472...@news.sunsite.dk...
Jeg har lavet et eksempel til OP, hvor jeg har brugt dine billeder - h�ber
det er ok.
Men v�r opm�rksom p�, at du har et potentielt problem, da din side medf�rer
20 requests/sekund her.
(Jeg har skrevet lidt mere i svaret til OP).
Stig Johansen
news:4b02ca60$0$36579$edfa...@dtext01.news.tele.dk...
> Christian Kragh skrev:
>
> > Er der nogle der har en ide til hvordan det kan l�ses, s� jeg ubegr�nset
> > kan forl�nge r�kken af billeder s� jeg m�ske har 5 array om en m�ned og
> > 40 om 4 m�neder?
> >
> > Christian
>
> Load-tiden for siden vil jo for�ges for hver gang du
> tilf�jer nye billeder/nye arrays, s� der er vel en �vre gr�nse?
Hvis man loader i en onload rutine,
s� vil den initielle load tid[1] ikke for�ges,
blot at evt. animationer forsinkes.
[1] Dvs. brugerens oplevelse indtil han ser noget.
Christian Kragh
> tilf�jer nye billeder/nye arrays, s� der er vel en �vre gr�nse?
> Bortset fra det vil jeg afholde mig fra at kommentere p�
> scriptet, men henvise til nedenn�vnte artikel, som m�ske
> indeholder et par brugbare ideer:
De billeder der skal skiftes fylder omkring 8kb stykket s� load tiden er
ikke et problem.
> http://webdesign101.dk/slideshow/sequencer.php
Det vil jeg se p�.
Tak
Christian
Christian Kragh
Jeg siger mange tak for hj�lpen, det virker jo som det skal...
> Jeg har lavet et eksempel her:
> http://w-o-p-r.dk/tips/javascript/multiple.images.animate.html
> hvor jeg dog af dovenskab har brugt Erik's billeder (h�ber det er ok).
>
> Der er 4 billeder, og indholdet er ens (=dovenskab), men jeg har defineret
> 4
> forskellige r�kkef�lger.
>
Og jeg har pr�vet at oprette en 5. for at se hvordan det lader sig g�re, og
det er meget nemt...
Christian
Stig Johansen
> Og jeg har pr�vet at oprette en 5. for at se hvordan det lader sig g�re,
og
> det er meget nemt...
Lavede lige noget class og style med border og size:
http://w-o-p-r.dk/tips/javascript/multiple.images.animate.html
Jeg ved godt at bilerne flagrer frem og tilbage, men det skulle gerne
illustrere, at properties bliver bibeholdt ved kloning.
Stig Johansen
> Lavede lige noget class og style med border og size:
> http://w-o-p-r.dk/tips/javascript/multiple.images.animate.html
He - s� lige i IE, at den ikke (automatisk) skalerer p� begge leder.
Det ser ret sjovt ud i IE :)
--
Med venlig hilsen
Stig Johansen
Erik Ginnerskov
>> S�dan: http://hjemmesideskolen.dk/scripts/anim.asp ?
>
> Jeg har lavet et eksempel til OP, hvor jeg har brugt dine billeder -
> h�ber det er ok.
Url?