CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

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

Synes godt om

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>

Synes godt om

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

Synes godt om

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%;">');

Synes godt om

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)

Synes godt om

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

Synes godt om

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>

Synes godt om

jonasst Nybegynder

26. april 2007 - 09:59 #7

Tak det vil jeg gøre...

Synes godt om

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?

Synes godt om

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

Synes godt om

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?

Synes godt om

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>

Synes godt om

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.

Synes godt om

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

Synes godt om

roenving Novice

17. maj 2007 - 13:26 #14

Du kan _ikke_ skalere et baggrundsbillede ...

Synes godt om

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

Synes godt om

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>

Synes godt om

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;

}

Synes godt om

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

Synes godt om

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

Synes godt om

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?

Synes godt om

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

Synes godt om

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

Synes godt om

jonasst Nybegynder

17. maj 2007 - 15:35 #23

ja mclemens må også meget gerne skrive et svar

Synes godt om

mclemens Nybegynder

17. maj 2007 - 15:37 #24

Springer over ;) ... Uden Roenvings
floor havde fordelingen været for skæv.

Synes godt om

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]

Synes godt om

mclemens Nybegynder

17. maj 2007 - 15:57 #26

Nåh, så skidt da =D

Synes godt om

mclemens Nybegynder

17. maj 2007 - 23:20 #27

Og tak for point :o)

Synes godt om

roenving Novice

18. maj 2007 - 13:24 #28

-- og jeg takker også for point ;~}

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23
Ajax - indlæs webside og derefter hente data Af nemlig i JavaScript	4	21/05/202417:19	22/06/202422:07
Disable button efter 1. klik Af nemlig i JavaScript	2	05/05/202415:37	05/05/202416:25

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS