Avatar billede jonasst Nybegynder
24. april 2007 - 13:22 Der er 26 kommentarer og
2 løsninger

Kontrol af width ved brug af random image

Hej eksperter
Jeg bruger følgende script til at hente et random image:

<script language="javascript" type="text/javascript">
var theImages = new Array()
theImages[0] = 'pics/1.jpg'
theImages[1] = 'pics/2.jpg'
theImages[2] = 'pics/3.jpg'
theImages[3] = 'pics/4.jpg'
theImages[4] = 'pics/5.jpg'
theImages[5] = 'pics/6.jpg'
theImages[6] = 'pics/7.jpg'
theImages[7] = 'pics/8.jpg'
theImages[8] = 'pics/9.jpg'
theImages[9] = 'pics/10.jpg'
theImages[10] = 'pics/11.jpg'


var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
  preBuffer[i] = new Image()
  preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');
}
showImage();
</script>

Nu vil jeg gerne have at billederne bliver sat til width:100%
HAr prøvet at gøre det i mit stylesheet men det var ikke måden. Kan jeg angive det i koden et sted?
På forhånd tak for hjælpen
Avatar billede olebole Juniormester
24. april 2007 - 14:19 #1
<ole>

I HTML betyder en bredde på 100%: Hundrede procent af det omkransende elements bredde. Er det, hvad du ønsker? Hvis ikke, hvad er det så, du ønsker?  =)

/mvh
</bole>
Avatar billede jonasst Nybegynder
24. april 2007 - 15:29 #2
Det er lige præcis hvad jeg ønsker. Billedet skal fylde fra kant til kant på skærmen
Avatar billede madeindk Nybegynder
25. april 2007 - 14:38 #3
Ret:
document.write('<img src="'+theImages[whichImage]+'">');
Til:
document.write('<img src="'+theImages[whichImage]+'" style="width:100%;">');
Avatar billede mclemens Nybegynder
25. april 2007 - 14:59 #4
Kan ikke lige se årsagen til prebuffer når der kun
bruges 1 billede, hvorfor ikke sige noget i stil med:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>
</head><body>

<div id="billede"></div>

<script type="text/javascript">
var theImages = [];
theImages[0] = 'http://www.eksperten.dk/img/elogo.png';
theImages[1] = 'http://www.eksperten.dk/img/flag_green.gif';

function showImage(elm){

  elm2=document.createElement("img");
  elm2.setAttribute("src",theImages[Math.round(Math.random()*(theImages.length-1))]);
  elm2.style.width="100%";

  elm=document.getElementById(elm);
  elm.appendChild(elm2);
  elm.style.width="100%";

}

showImage("billede");

</script>

</body></html>


... Husk som Olebole skriver "I HTML betyder en bredde på 100%: Hundrede procent af det omkransende elements bredde." - Så det / de ovenstående elementer skal have deres width fastsat også. I mit eksempel klarer elm.style.width="100%"; det, men hvor mange elementer der skal have width:100%; varierer af antal omkransende elementer.
(kast evt. p og preBuffer på hvis behovet er der)
Avatar billede jonasst Nybegynder
25. april 2007 - 17:31 #5
1000 tak "madeindk" det var præcis den løsning jeg ledte efter. Gider du smide et svar?
Til mclemens også tak for hjælpen til dig. Håber det er ok jeg giver pointene til "madeindk".
Jeg vil gerne have prebufferen begynder at loade billederne så brugeren ikke skal vente på det næste random image(hvergang en side kaldes). Håber jeg gør det rigtigt:)
Avatar billede mclemens Nybegynder
25. april 2007 - 18:17 #6
Helt ok med mig, jeg ville dog gerne at du benyttede dig
af .setAttribute(attribut,værdi) istedet for .attribut=værdi.
Samt createElement og appending istedet for document.write();


Her er lige et eksempel:

jsfilen.js:
var theImages = [];
theImages[0] = 'http://www.eksperten.dk/img/elogo.png';
theImages[1] = 'http://www.eksperten.dk/img/flag_green.gif';

var p=theImages.length;
var preBuffer = [];
for (i = 0; i < p; i++){
  preBuffer[i] = new Image()
  preBuffer[i].setAttribute("src",theImages[i]);
}

function showImage(elm){
  elm2=document.createElement("img");
  elm2.setAttribute("src",theImages[Math.round(Math.random()*(p-1))]);
  s=elm2.style;s.width="100%";s.height="auto";
  document.getElementById(elm).appendChild(elm2);
}


og html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>
<script type="text/javascript" src="jsfilen.js"></script>
</head><body>

<div id="billede"></div>
<script type="text/javascript">
showImage("billede");
</script>

</body></html>
Avatar billede jonasst Nybegynder
26. april 2007 - 09:59 #7
Tak det vil jeg gøre...
Avatar billede jonasst Nybegynder
17. maj 2007 - 10:36 #8
ingen svar fra madeindk så kan det være ,clemens vill have pointene istedet?
Har også et tillægsspørgsmål hvordan kan jeg få ovenstående script til at være inde i <body> så det er et baggrundsbillede det skifter random?
Avatar billede roenving Novice
17. maj 2007 - 11:43 #9
>>mclemens

-- du adopterer den gale tilgang til random, når du har fat i .round ...

Hvis der er 4 elementer, får du med den aktuelle konstruktion et tal mellem 0 og 2.9999999999999 semi-random fordelt, hvilket afrundes til:

0 - 0.49999999999 --> 0
0.5 - 1.49999999999 --> 1
1.5 - 2.49999999999 --> 2 og
2.5 - 2.99999999999 --> 3

Hvis tallene er fuldstændig lige fordelt, vil der være 16,67% chance for 0 og 3 og 33,33% chance for 1 og 2, hvilket jo næppe er hvad man ønsker ...

-- men det er rasende simpelt at give fuldstændig præcis 25% chance til hver:

Math.floor(Math.random()*theImages.length)

-- vil give præcis 25% chance for 0, 1, 2 og 3 !-)
Avatar billede jonasst Nybegynder
17. maj 2007 - 11:59 #10
tak for det tip :) kan du også fortælle mig hvordan jeg kan få dette script til at være et baggrundsbillede?
Avatar billede roenving Novice
17. maj 2007 - 12:15 #11
F.eks.

<script type="text/javascript">
var theImages = [];
theImages[theImages.length] = 'pics/1.jpg'
theImages[theImages.length] = 'pics/2.jpg'
theImages[theImages.length] = 'pics/3.jpg'
theImages[theImages.length] = 'pics/4.jpg'
theImages[theImages.length] = 'pics/5.jpg'
theImages[theImages.length] = 'pics/6.jpg'
theImages[theImages.length] = 'pics/7.jpg'
theImages[theImages.length] = 'pics/8.jpg'
theImages[theImages.length] = 'pics/9.jpg'
theImages[theImages.length] = 'pics/10.jpg'
theImages[theImages.length] = 'pics/11.jpg'

window.onload = function(){
  document.documentElement.getElementsByTagName('body')[0].style.backgroundImage = "url(" + theImages[Math.floor(Math.random()*theImages.length)] + ")";
}
</script>
Avatar billede mclemens Nybegynder
17. maj 2007 - 12:29 #12
Roenving 17/05-2007 11:43:21 >>
Joh, det har du helt ret i, lidt unfair fordeling.
Avatar billede jonasst Nybegynder
17. maj 2007 - 13:22 #13
Super det virker perfekt. Så mangler jeg bare at få sat width til 100% og height til auto. Ja undskyld men jeg kan ikke finde ud af hvor i koden jeg skal smide det ind.
Det er temmelig sort snak for mig. Men nu har jeg da to super gode funktioner jeg kan genbruge igen og igen. Stort tak for hjælpen håber nogen vil smide et svar
Avatar billede roenving Novice
17. maj 2007 - 13:26 #14
Du kan _ikke_ skalere et baggrundsbillede ...
Avatar billede jonasst Nybegynder
17. maj 2007 - 13:54 #15
Det kan du have ret i. Har dog set det gjort på http://www.creativetime.org/index.html
Men de bruger også en bunke javascripts til formålet.
Ellers må jeg gå tilbage til min gamle løsning med showImage("billede"); og så bruge z-index og position absolute til at få alle sidens elementer ovenpå billedet. Det synes jeg bare var lidt bøvlet og havde derfor håbet på metoden med baggrundsbilledet
Avatar billede roenving Novice
17. maj 2007 - 14:06 #16
Det kan kun gøres, som du beskriver det, men det er ikke særlig bøvlet, du skal bare definere størrelse, skrive billedet ind umiddelbart efter body-tagget (eller det, der definerer siden størrelse !-), og sætte position:absolute på, f.eks.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Vis baggrund strukket</title>
<style type="text/css">
html,body{margin:0;padding:0;height:100%;}
#site{position:relative;width:864px;margin:0 auto;color:white;}
#baggrund{position:absolute;top:0;left:0;width:864px;z-index:-1}
</style>
</head>
<body>
  <div id="site">
    <img id="baggrund" src="../billede.jpg">
    Alt det andet indhold
  </div>
</body>
</html>
Avatar billede jonasst Nybegynder
17. maj 2007 - 14:42 #17
Har prøvet at løse det med følgende css for at få indholdet centreret og billedet til at fylde hele skærmen. Desværre virker det kun i Firefox og ikke IE

#baggrund{
z-index:1;
position:absloute;
    top:0px;
    width:100%;

div#container {
    margin:0 auto;
    width:900px;
    height:650px;
    background-color:#FFFFFF;
    z-index:2;
    position:relative;
   
   
   
}
Avatar billede jonasst Nybegynder
17. maj 2007 - 14:48 #18
øhm nu prøvede jeg mig lidt frem og tilbage og nu virker det pludseligt - strange???
nå men mange tak for hjælpen gider du smide et svar? Er lige nu en meget glad mand håber det varer lidt endnu
Avatar billede roenving Novice
17. maj 2007 - 15:07 #19
Måske tavetossen i absolute og/eller manglen på left i #baggrund-reglen ?-)

-- og å er reglen i hvert fald ikke afsluttet i det eksempel, du lagde ...
Avatar billede jonasst Nybegynder
17. maj 2007 - 15:22 #20
lol skal ikke kunne sige det men reglen var nu afsluttet det var vist bare copy/past nissen der havde spist et "}". Men om det lige var det ene eller det andet der fik det til at virke ved jeg ikke. Sådan er det jo bare nogen gange computere har sit eget liv.

Tankevækkende at vi har baseret så meget af vore eksistens på dem.

Vil du ikke have pointene så jeg kan lukke spørgsmålet?
Avatar billede jonasst Nybegynder
17. maj 2007 - 15:24 #21
Og nu vil jeg så frygtløst kaste mig ud i at lave en folde-ud-menu:) Man kan jo ikke hvilke på noget:p Endnu engang tak for hjælpen
Avatar billede roenving Novice
17. maj 2007 - 15:27 #22
Det er vel en deler, for jeg har jo bare krøllet videre fra der, hvor mclemens startede !-)

Velbekomme '-)
Avatar billede jonasst Nybegynder
17. maj 2007 - 15:35 #23
ja mclemens må også meget gerne skrive et svar
Avatar billede mclemens Nybegynder
17. maj 2007 - 15:37 #24
Springer over ;) ... Uden Roenvings
floor havde fordelingen været for skæv.
Avatar billede roenving Novice
17. maj 2007 - 15:42 #25
Vrøvl, du gjorde bare, som vi som regel gør: tager udgangspunkt i den foreliggende kode, og så er det jo ikke altid, man når at forholde sig til alle mulige detaljer i koden udover det konkrete spørgsmål !o]
Avatar billede mclemens Nybegynder
17. maj 2007 - 15:57 #26
Nåh, så skidt da =D
Avatar billede mclemens Nybegynder
17. maj 2007 - 23:20 #27
Og tak for point :o)
Avatar billede roenving Novice
18. maj 2007 - 13:24 #28
-- og jeg takker også 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
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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