Avatar billede renedk Nybegynder
28. november 2007 - 14:05 Der er 16 kommentarer og
1 løsning

random image hjælp

Hej

Jeg har kigget lidt rundt efter et script der kunne skifte "flere" billeder med tilhørende link hver gang man reloader.

Jeg har en side med 10 billeder ned langs venstre side. Og jeg mangler et script der skifter rund på de billeder i tilfældigt rækkefølge hver gang man reloader siden.
Billederne har hver sit link, så det skal self. følge med billederne.
Billeder må kun forekomme et sted, altså ikke flere gange ved samme reload.


ReneDK
Avatar billede soerenlyn Nybegynder
28. november 2007 - 16:26 #1
du kunne lægge deres src's i et array:

var picsrc=new Array("src0","src1","src2",...,"src9");

Så har du en funktion der indsætter billederne tilfældigt:

while(picsrc.length>0){
  var container=document.getElementById("der hvor billeder skal indsættes");
  var i=Math.round(picsrc.length*Math.random());

  var elm=document.createElement("img");
  elm.setAttribute("src",picsrc[i]);
  elm.style.display="block";
  // Tilføj flere attributter her.
  container.appendChild(elm);
  picsrc.splice(i,1);
}

Prøv det :)
Avatar billede soerenlyn Nybegynder
28. november 2007 - 16:30 #2
Muligvis er splice ikke helt valid.
Avatar billede soerenlyn Nybegynder
28. november 2007 - 16:32 #3
Hov - og jeg glemte linksne :)

var picsrc=new Array("src0","src1","src2",...,"src9");
var pichref=new Array("href0","href1","href",...,"href9");


while(picsrc.length>0){
  var container=document.getElementById("der hvor billeder skal indsættes");
  var i=Math.round(picsrc.length*Math.random());

  var elm=document.createElement("a");
  elm.setAttribute("href",pichref[i]);
  container.appendChild(elm);

  elm=document.createElement("img");
  elm.setAttribute("src",picsrc[i]);
  elm.style.display="block";
  // Tilføj flere attributter her.
  container.lastChild.appendChild(elm);
  picsrc.splice(i,1);
}
Avatar billede roenving Novice
28. november 2007 - 16:52 #4
Men det vil netop ofte/nogen gange resultere i, at samme img/link-ting vil komme flere gange ...

-- måske på denne måde:

var picsrc=["src0","src1","src2",...,"src19"];
var pichref=["href0","href1","href2",...,"href19"];

var pics = [],tmp;

for(i=0,im=picsrc.length;im>i;i++){
  tmp = [picsrc[i],pichref[i]];
  pics.push(temp);
}
//shuffle array
var t=s=0;
for(var i=0,im=pics.length;im>>i;i++){
  t = Math.floor(Math.random()*im);
  s = pics[i];
  pics[i] = pics[t] ;
  pics[t] = s;
}

window.onload = function(){
  var parElm = document.getElementById("ditParentElement"),l,p;
  for(i=0,10>i;i++){
    l = document.createElement("a");
    l.setAttribute("href",pics[i][1]);
    l.style.display = "block";
    parElm.appendChild(l);
    p = document.createElement("img");
    img.setAttribute("src",pics[i][0]);
    l.appendChild(img);
  }
}
Avatar billede roenving Novice
28. november 2007 - 16:56 #5
-- og så er Math.round direkte uhensigtsmæssig, som soerenln bruger den, vil den faktisk meget tit resultere i en fejl, da der kan forekomme ike eksisterende index ved afrunding opad ...

-- Math.floor gør dog præcis det rigtige og har ydermere en stort set præcis statistisk fordeling, hvor .round underprioriterer den første forekomst og tillader den ugyldige, som soerenlyn bruger den:

-->0: 5%
-->1: 10%
-->2: 10%

...

-->9: 10%
-->10: 5%
Avatar billede roenving Novice
28. november 2007 - 16:58 #6
Hov, jeg overså din splice, soerenlyn, det må du undskylde, men du har så heller ikke taget højde for, at der kan være et udvalg, hvorfra der skal vælges !-)
Avatar billede renedk Nybegynder
28. november 2007 - 17:49 #7
Jeg prøver lige at arbejde med det.. vender snart tilbage igen! :)
Avatar billede roenving Novice
28. november 2007 - 17:51 #8
Ups, der var en tavetosse:

for(i=0,im=picsrc.length;im>i;i++){
  tmp = [picsrc[i],pichref[i]];
  pics.push(tmp);
}
Avatar billede soerenlyn Nybegynder
28. november 2007 - 17:54 #9
Så fik jeg den! :P
Avatar billede roenving Novice
28. november 2007 - 18:06 #10
-- og flere tavetosser:

window.onload = function(){
  var parElm = document.getElementById("ditParentElement"),l,p;
  for(i=0;10>i;i++){
    l = document.createElement("a");
    l.setAttribute("href",pics[i][1]);
    l.style.display = "block";
    parElm.appendChild(l);
    p = document.createElement("img");
    p.setAttribute("src",pics[i][0]);
    l.appendChild(p);
  }
}

>>soerenlyn

-- tag du det bare roligt, rigtig mange, der kommer fra forskellige andre (procedurale) script-sprog, skal lige bruge noget tid på at vænne sig til en hulens masse detaljer i javascript !-)
Avatar billede renedk Nybegynder
28. november 2007 - 20:08 #11
Har faktisk fået det til at køre nu, og det virker sgu godt :) tak

Bare lige en sidste ting kan ikke rigtig få sat et linieskift i så det ligger mellem hver billede?
Avatar billede soerenlyn Nybegynder
28. november 2007 - 23:48 #12
det vil være bedst hvis du indsætter en margin-bottom på billedet i stedet:

p = document.createElement("img");
p.setAttribute("src",pics[i][0])
p.style.marginBottom="5px";

Så kan du ændre den hvis den skal være større :)
Avatar billede roenving Novice
29. november 2007 - 16:04 #13
Jeg synes også godt om marginen, men du kan også tilføje linjeskiftet:

...
    p.setAttribute("src",pics[i][0]);
    l.appendChild(p);
    parElm.appendChild(document.createElement("br"));
  }
}
Avatar billede renedk Nybegynder
29. november 2007 - 23:19 #14
Det er i sgu lidt for gode til.. tak for hjælpen gutter:)

Sys vi deler svaret mellem jer.. Så kan i ikke smide et :)

René
Avatar billede roenving Novice
30. november 2007 - 11:55 #15
Velbekomme '-)
Avatar billede roenving Novice
30. november 2007 - 11:55 #16
;O)
Avatar billede roenving Novice
01. december 2007 - 11:45 #17
Hov soerenlyn skal jo også have noget: http://www.eksperten.dk/spm/808412 !o]

-- els tak for point ;~}
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester



IT-JOB