Random plaatje op je website :D

[Jordidebruin]

Ik wil graag een random plaatje op mijn website. Dan maak ik bijvoorbeeld 20 afbeeldingen en dan wil ik dat er willekeurig 1 van die 20 afbeeldingen op de site komt, en als je dan vernieuwd dat er dan een andere komt

a.u.b. geen PHP code maar een HTML code als dat kan

Dank u

 

[Naarling]

Ik wil graag een random plaatje op mijn website. Dan maak ik bijvoorbeeld 20 afbeeldingen en dan wil ik dat er willekeurig 1 van die 20 afbeeldingen op de site komt, en als je dan vernieuwd dat er dan een andere komt

a.u.b. geen PHP code maar een HTML code als dat kan

Sorry, maar HTML kan dat niet. Misschien met javascript maar daar weet ik, nog, niet genoeg van.

 

[Jordidebruin]

Ooh jammer, maar toch bedankt

 

[That Guy]

Ja, dit kan heel makkelijk met Javascript. Maar beter is php. Google op 'banner rotation php' of 'banner rotation javascript' oid.

 

[Jordidebruin]

Ooh thanks

Het probleem is alleen dat mijn site nu nog van een andere site is, webklik.nl is namelijk een site zodat je zelf websites kunt maken, mijn site heet dan ook weernl.webklik.nl . Binnekort krijgen ik wel een eigen domein. Maar op webklik.nl kan ik geloof ik niet met php werken. Dat wordt dus eerst zoeken naar een site waar je websites kan maken waar ik wél php kan gebruiken

 

[Mickeys Monkey]

Probeer het hier eens mee.
Even je namen van de afbeeldingen in het script veranderen en daarna nog 16 toevoegen.

<script>
plaatjes = new Array('afbeelding1.jpg','afbeelding2.jpg','afbeelding3.jpg','afbeelding4.jpg');
imageaction = plaatjes.length-1;
image = Math.round(Math.random() * imageaction);
document.write("<img src=\""+plaatjes[image]+"\">")
</script>

 

[Goeroeboeroe]

Mocht je voor php kiezen: zolang je 't nog niet op de 'echte' site kan testen, werkt dit ook prima: http://www.usbwebserver.com/index.html
Dan kun je in ieder geval kijken of je php goed werkt.

 

[Jordidebruin]

Probeer het hier eens mee.
Even je namen van de afbeeldingen in het script veranderen en daarna nog 16 toevoegen.

<script>
plaatjes = new Array('afbeelding1.jpg','afbeelding2.jpg','afbeelding3.jpg','afbeelding4.jpg');
imageaction = plaatjes.length-1;
image = Math.round(Math.random() * imageaction);
document.write("<img src=\""+plaatjes[image]+"\">")
</script>

Bedankt maar bij die afbeelding1, afbeelding2 en zo, moet daar dan niet zo'n code komen van de URL van de afbeelding, dat ik die afbeelding moet uploaden? Of moet daar dan gewoon de afbeeldingsnaam komen te staan? En wat betekend dat groene in de 5e regel? Ben nogal slecht in die HTML codes met kleurtjes

 

[Jordidebruin]

Mocht je voor php kiezen: zolang je 't nog niet op de 'echte' site kan testen, werkt dit ook prima: http://www.usbwebserver.com/index.html
Dan kun je in ieder geval kijken of je php goed werkt.

Dankje, lijkt me ook wel handig ja

 

[Mickeys Monkey]

Bedankt maar bij die afbeelding1, afbeelding2 en zo, moet daar dan niet zo'n code komen van de URL van de afbeelding, dat ik die afbeelding moet uploaden? Of moet daar dan gewoon de afbeeldingsnaam komen te staan? En wat betekend dat groene in de 5e regel? Ben nogal slecht in die HTML codes met kleurtjes

Nee dat hoeft niet, maar zorg wel dat de afbeeldingen in dezelfde map staan als het bestand waarin je deze code plakt.

Het is natuurlijk wel mogelijk om de afbeeldingen in een map te plaatsen, bijvoorbeeld een map images

De code wordt dan

<script>
plaatjes = new Array('images/afbeelding1.jpg','images/afbeelding2.jpg','images/afbeelding3.jpg','images/afbeelding4.jpg');
imageaction = plaatjes.length-1;
image = Math.round(Math.random() * imageaction);
document.write("<img src=\""+plaatjes[image]+"\">")
</script>

De vijfde regel zorgt er voor dat de afbeeldingen in verschillende volgorde op de pagina komt te staan

 

[Jordidebruin]

Nee dat hoeft niet, maar zorg wel dat de afbeeldingen in dezelfde map staan als het bestand waarin je deze code plakt.

Het is natuurlijk wel mogelijk om de afbeeldingen in een map te plaatsen, bijvoorbeeld een map images

De code wordt dan

<script>
plaatjes = new Array('images/afbeelding1.jpg','images/afbeelding2.jpg','images/afbeelding3.jpg','images/afbeelding4.jpg');
imageaction = plaatjes.length-1;
image = Math.round(Math.random() * imageaction);
document.write("<img src=\""+plaatjes[image]+"\">")
</script>

De vijfde regel zorgt er voor dat de afbeeldingen in verschillende volgorde op de pagina komt te staan

Ooooh oke, ik heb nu vier afbeeldingen gemaakt, genaamd '1', '2', '3' en '4'. Nu heb ik dus dit:

<script>
plaatjes = new Array('images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg');
imageaction = plaatjes.length-1;
image = Math.round(Math.random() * imageaction);
document.write("<img src=\""+plaatjes[image]+"\">")
</script>[/

Maar hij werkt nog niet als ik nu naar de pagina ga dan is die pagina leeg als ik de code invul en het opsla :O

 

[That Guy]

Hier wat nette code:

<script>

   var plaatjes = [
                     'images/afbeelding1.jpg',
                     'images/afbeelding2.jpg',
                     'images/afbeelding3.jpg',
                     'images/afbeelding4.jpg'
                  ];
   var r = Math.round(Math.random() * (plaatjes.length-1));
   document.write("<img src='" + plaatjes[image] + "' alt='banner' />")

</script>

Overgens ligt het dus aan het pad naar de plaatjes. Als je plaatjes in dezelfde map zitten als het .html bestand, moet je gewoon de namen invullen. Als ze in een bepaalde map staan, moet je dus de locatie van die map ervoor plakken, en dan een slash.

 

[Mickeys Monkey]

De code van Vegras is inderdaad iets mooier.

Zorg er voor dat de afbeeldingen in de map images staan. Dit kan zowel lokaal of ergens op een host.

 

[Jordidebruin]

bedankt ik heb nu een map gemaakt, genaamd images. Dan hoef ik dus niks in die code te veranderen toch? Want dat is toch al standaart? Dan zou ik dit dus krijgen hieronder? (De namen van de afbeeldingen zijn gewoon 1, 2, 3 enzovoorts en de map zelf heet images)

(Ik ben geen kei in die html codes)

<script>
 
   var plaatjes = [
                     'images/1.jpg',
                     'images/2.jpg',
                     'images/3.jpg',
                     'images/4.jpg'
                  ];
   var r = Math.round(Math.random() * (plaatjes.length-1));
   document.write("<img src='" + plaatjes[image] + "' alt='banner' />")
 
</script>

 

[Mickeys Monkey]

Als het maar wel jpg bestanden zijn, anders moet je de code wel veranderen.
Bij gif wordt dit natuurlijk

'images/1.gif',

En een png bestand wordt

'images/1.png',