Script uitbreiden

Status
Niet open voor verdere reacties.
H

hansjuh

Gebruiker
Lid geworden
15 nov 2006
Berichten
291
Hallo,

Ik ben een website aan het bouwen voor een kennis, maar aangezien ik niet zoveel verstand heb van javascript, heb ik een vraagje voor jullie:

Hoe kan ik het volgende script uitbreiden met meer afbeeldingen.?
Ik snap dat ik bij het eerste gedeelte meer variabelen moet toevoegen, maar het tweede gedeelte snap ik niet helemaal.

Kan iemand misschien dit script ff kopieren en het uitwerken tot 10 afbeeldingen?

PHP: 
<script type="text/javascript">
var backgr1="http://www.mijnsite.nl/images/bg/bg1.png"
var backgr2="http://www.mijnsite.nl/images/bg/bg2.png"
var backgr3="http://www.mijnsite.nl/images/bg/bg3.png"

var cur=Math.round(6*Math.random())
if (cur<=1)
backgr=backgr1
else if (cur<=4)
backgr=backgr2
else
backgr=backgr3
document.write('<table background="'+backgr+'" bgcolor="#FFFFFF">')
</script>

Het script dient trouwens om een wisselende tabel achtergrond te hebben, elke keer als je de pagina herlaad.

Alvast bedankt voor de eventuele antwoorden ;)
 
PHP: 
<script type="text/javascript">
var bgs = new Array();
bgs[0]="http://www.mijnsite.nl/images/bg/bg1.png"
bgs[1]="http://www.mijnsite.nl/images/bg/bg2.png"
bgs[2]="http://www.mijnsite.nl/images/bg/bg3.png"
bgs[3]="http://www.mijnsite.nl/images/bg/bg4.png"
bgs[4]="http://www.mijnsite.nl/images/bg/bg5.png"
bgs[5]="http://www.mijnsite.nl/images/bg/bg6.png"
bgs[6]="http://www.mijnsite.nl/images/bg/bg7.png"
bgs[7]="http://www.mijnsite.nl/images/bg/bg8.png"
bgs[8]="http://www.mijnsite.nl/images/bg/bg9.png"
bgs[9]="http://www.mijnsite.nl/images/bg/bg10.png"

var backgr = bgs[Math.round(bgs.length*Math.random())];
document.write('<table background="'+backgr+'" bgcolor="#FFFFFF">')
</script>
Je kunt nu zoveel achtergronden toevoegen als je wilt. Zoals je ziet begint het tellen bij 0. Ik getest, dus weet niet 100% zeker of het werkt. Ik hoor het nog wel. :)
 
Dit lijkt op het script van Jeroen :)
PHP: 
<table id="vbg" style="background-color: #fff;">
 <tr>
  <td>linksboven</td>
  <td>rechtsboven</td>
 </tr><tr>
  <td>linksonder</td>
  <td>rechtsonder</td>
 </tr>
</table>

<script type="text/javascript">
 var backgrounds = new Array(
  'http://www.mijnsite.nl/images/bg/bg1.png',
  'http://www.mijnsite.nl/images/bg/bg2.png',
  'http://www.mijnsite.nl/images/bg/bg3.png',
  'http://www.mijnsite.nl/images/bg/bg4.png',
  '');
 var backgr = backgrounds[Math.floor(Math.random() * (backgrounds.length - 1))];
 document.getElementById('vbg').style.backgroundImage = 'url(' + backgr + ')';
</script>
Maar zo zijn script en tabel gescheiden, zodat de tabel gewoon wordt weergegeven als javascript uitstaat. Het script moet wel ná de tabel in de pagina worden geplaatst. En de array 'nummert' zichzelf op deze manier (wel het laatste lege elementje ''); laten staan).


Maar je moet wel Math.floor() gebruiken ipv Math.round(). Math.round(10*Math.random()) is namelijk 1 op de 20 keer 10 (en slechts 1 op de 20 keer 0). :)


Vr.Gr. Egel.
 
Thnx, dat is inderdaad handiger, alleen die laatste zin begrijp ik niet helemaal.

Verschijnen de afbeeldingen dan meer random?

Edit: Hij werkt trouwens niet :(
 
Laatst bewerkt:
hansjuh zei:
alleen die laatste zin begrijp ik niet helemaal.
Verschijnen de afbeeldingen dan meer random?
Klik om te vergroten...
Math.random() geeft een getal van 0 tot 1, niet t/m, dus nooit precies 1 (zeg maar 0 t/m 0.999). Als je dat met 10 vermenigvuldigd (de lengte van de array bgs) krijg je 0 t/m 9.999.

Dat moet je naar beneden afronden met Math.floor() zodat je een getal van 0 t/m 9 krijgt. Als je Math.round() zou gebruiken krijg af en toe 10 en bgs[10] bestaat niet. :)
hansjuh zei:
Edit: Hij werkt trouwens niet :(
Klik om te vergroten...
Het zou het moeten doen, heb je wel id="vbg" in de table-tag gezet, en staat het script na de tabel?


Vr.Gr. Egel.
 
Ok, hier is de code zoals ik hem op de website heb geplaatst:
PHP: 
<table id="bgtable" class="bgtable2" width="668" height="647" border="0" align="center" cellpadding="10">

<script type="text/javascript"> 
var backgrounds = new Array( 
  'http://www.boomkwekerijvanleersum.nl/images/bg/bg1.png' 
  'http://www.boomkwekerijvanleersum.nl/images/bg/bg2.png' 
  'http://www.boomkwekerijvanleersum.nl/images/bg/bg3.png' 
  'http://www.boomkwekerijvanleersum.nl/images/bg/bg4.png' 
  'http://www.boomkwekerijvanleersum.nl/images/bg/bg5.png' 
  'http://www.boomkwekerijvanleersum.nl/images/bg/bg6.png' 
  'http://www.boomkwekerijvanleersum.nl/images/bg/bg7.png' 
  'http://www.boomkwekerijvanleersum.nl/images/bg/bg8.png'
  ''); 
var backgr = backgrounds[Math.floor(Math.random() * (backgrounds.length - 1))]; 
document.getElementById('bgtable').style.backgroundImage = 'url(' + backgr + ')'; 
</script>
 
Je had de komma's vergeten achter de achtergronden:
PHP: 
<table id="bgtable" class="bgtable2" width="668" height="647" border="0" align="center" cellpadding="10"> 
 <tr>
  <td></td>
 </tr>
</table>

<script type="text/javascript"> 
 var backgrounds = new Array( 
  'http://www.boomkwekerijvanleersum.nl/images/bg/bg1.png',
  'http://www.boomkwekerijvanleersum.nl/images/bg/bg2.png',
  'http://www.boomkwekerijvanleersum.nl/images/bg/bg3.png',
  'http://www.boomkwekerijvanleersum.nl/images/bg/bg4.png',
  'http://www.boomkwekerijvanleersum.nl/images/bg/bg5.png',
  'http://www.boomkwekerijvanleersum.nl/images/bg/bg6.png',
  'http://www.boomkwekerijvanleersum.nl/images/bg/bg7.png',
  'http://www.boomkwekerijvanleersum.nl/images/bg/bg8.png',
  ''); 
 var backgr = backgrounds[Math.floor(Math.random() * (backgrounds.length - 1))]; 
 document.getElementById('bgtable').style.backgroundImage = 'url(' + backgr + ')'; 
</script>
Doet 't. :)

Ik zou wel .jpg gebruiken voor de achtergronden, dan word het wat minder kilobytes.


Vr.Gr. Egel.
 
Oke, bedankt;)

En deze plaatjes waren bij wijze van test ;), hij laadt nu inderdaad ook erg lang

Het is ook mogelijk om het script in een apart .js bestand te zetten toch? En dan dus het script in de head en onder de tabel aanroepen.
 
hansjuh zei:
Het is ook mogelijk om het script in een apart .js bestand te zetten toch? En dan dus het script in de head en onder de tabel aanroepen.
Klik om te vergroten...
Dan kan idd. :) Je kunt <script src="..."></script> ook achter de tabel zetten, <body onload="setbg()"> gebruiken of window.onload = setbg;
PHP: 
<table id="bgtable" class="bgtable2" width="668" height="647" border="0" align="center" cellpadding="10"> 
 <tr>
  <td></td>
 </tr>
</table>

<script type="text/javascript"> 

 var backgrounds = new Array( 
  'http://www.boomkwekerijvanleersum.nl/images/bg/bg1.png',
  'http://www.boomkwekerijvanleersum.nl/images/bg/bg2.png',
  'http://www.boomkwekerijvanleersum.nl/images/bg/bg3.png',
  'http://www.boomkwekerijvanleersum.nl/images/bg/bg4.png',
  'http://www.boomkwekerijvanleersum.nl/images/bg/bg5.png',
  'http://www.boomkwekerijvanleersum.nl/images/bg/bg6.png',
  'http://www.boomkwekerijvanleersum.nl/images/bg/bg7.png',
  'http://www.boomkwekerijvanleersum.nl/images/bg/bg8.png',
  '');

 function setbg() {
  var backgr = backgrounds[Math.floor(Math.random() * (backgrounds.length - 1))]; 
  document.getElementById('bgtable').style.backgroundImage = 'url(' + backgr + ')'; 
  };

 window.onload = setbg;

</script>
Vr.Gr. Egel.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan