/ Forside / Teknologi / Udvikling / Java Scripts / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
Java Scripts
#NavnPoint
molokyle 5410
Klaudi 2799
smorch 2439
kim 1360
Harlekin 1134
bentjuul 984
gibson 800
severino 695
Random 675
10  konsulent.. 626
Udskifte billeder med javascript
Fra : Christian Kragh


Dato : 17-11-09 12:00

Hej.

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 (17-11-2009)
Kommentar
Fra : Leif Neland


Dato : 17-11-09 12:34

Christian Kragh skrev:
> Hej.
>
> 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

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 (17-11-2009)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 17-11-09 17:08

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?
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/
..

Stig Johansen (18-11-2009)
Kommentar
Fra : Stig Johansen


Dato : 18-11-09 01:17

"Jørgen Farum Jensen" <jfjenzen@yahoo.dk> wrote in message
news:4b02ca60$0$36579$edfadb0f@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.

--
Med venlig hilsen/Best regards
Stig Johansen




Christian Kragh (18-11-2009)
Kommentar
Fra : Christian Kragh


Dato : 18-11-09 10:13

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

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


Erik Ginnerskov (17-11-2009)
Kommentar
Fra : Erik Ginnerskov


Dato : 17-11-09 18:58

Christian Kragh wrote:
> 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 (18-11-2009)
Kommentar
Fra : Stig Johansen


Dato : 18-11-09 01:13

"Erik Ginnerskov" <erik.ginnerskov@live.dk> wrote in message
news:4b02e41b$0$272$14726298@news.sunsite.dk...
>
> 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.

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

--
Med venlig hilsen/Best regards
Stig Johansen




Stig Johansen (18-11-2009)
Kommentar
Fra : Stig Johansen


Dato : 18-11-09 01:11

"Christian Kragh" <tursoe@gmail.com> wrote in message
news:4b028236$0$283$14726298@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




Christian Kragh (18-11-2009)
Kommentar
Fra : Christian Kragh


Dato : 18-11-09 10:33

Den er købt..

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 (18-11-2009)
Kommentar
Fra : Stig Johansen


Dato : 18-11-09 10:55

"Christian Kragh" <tursoe@gmail.com> wrote in message
news:4b03bf5e$0$282$14726298@news.sunsite.dk...
> 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.

--
Med venlig hilsen/Best regards
Stig Johansen




Stig Johansen (18-11-2009)
Kommentar
Fra : Stig Johansen


Dato : 18-11-09 11:08

Stig Johansen wrote:

> 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

Søg
Reklame
Statistik
Spørgsmål : 177552
Tips : 31968
Nyheder : 719565
Indlæg : 6408849
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste