Download the demo
Note: like all PHP examples, this one needs to be run on a web server or inside the Terminal.
This example mixes a few techniques. First, it is making use of inline CSS, meaning this CSS is embeddded right inside the HTML page. Normally this is a bad thing to do, because it’s inefficient to control a whole site this way. But since you can’t put PHP inside a CSS file, we don’t have a choice.
Second, we’re using a PHP loop to repeatedly “print” an <img /> tag (of a green dot) 100 times. When the browser loads the page, it sees HTML source with 100 image tags on it: it has no idea, and it doesn’t care, whether this was written by hand as a static HTML file or was generated by a PHP script.
Finally, to avoid all the dot images piling up on top of each other, we use random number generation inside the loop to position each dot in a different location. The random numbers are used in conjunction with position:absolute; to place the dots at random horizontal and vertical points on the page.
Try running the live version of the demo and refreshing it a few times. Since new random numbers are generated each time (and for each dot), the page will change on each page load.
Here’s the crucial part of the PHP code:
<?php
for ($counter = 0; $counter < 100; $counter ++) { // Run the loop 100 times. Then each time through the loop...
$random_x = rand(0, 1000); // Generate a random number between 0 and 1000 and assign it to $random_x
$random_y = rand(0, 800); // Generate another random number between 0 and 800 and assign it to $random_y
// Now close PHP....
?>
<!-- This is an HTML comment, also in the loop. Let's position a dot at <?php echo $random_x; ?> over and <?php echo $random_y; ?> down -->
<img src="dot.png" alt="A dot" style="position:absolute; left:<?php echo $random_x; ?>px; top:<?php echo $random_y; ?>px;" />
<?php
// Reopen PHP,
// close the loop...
}
// and close php again now that the loop is completely over.
?>
When this file is put on a web server and visited by a web browser, it generates something like this:
<!-- This is an HTML comment. Let's position a dot at 753 over and 687 down -->
<img src="dot.png" alt="A dot" style="position:absolute; left:753px; top:687px;" />
<!-- This is an HTML comment. Let's position a dot at 90 over and 115 down -->
<img src="dot.png" alt="A dot" style="position:absolute; left:90px; top:115px;" />
<!-- This is an HTML comment. Let's position a dot at 260 over and 99 down -->
<img src="dot.png" alt="A dot" style="position:absolute; left:260px; top:99px;" />
<!-- This is an HTML comment. Let's position a dot at 661 over and 798 down -->
<img src="dot.png" alt="A dot" style="position:absolute; left:661px; top:798px;" />
<!-- This is an HTML comment. Let's position a dot at 346 over and 2 down -->
<img src="dot.png" alt="A dot" style="position:absolute; left:346px; top:2px;" />
<!-- This is an HTML comment. Let's position a dot at 340 over and 65 down -->
<img src="dot.png" alt="A dot" style="position:absolute; left:340px; top:65px;" />
