Adding a Useless Site Feature

This site's design gets the job done. It doesn't look horrible (I hope), but it does seem a bit bland. Initially I thought about changing the background image to something, but I figured that would be distracting and I don't really have any good ones. Ultimately, I decided to add a random image on every page.

Figuring out what to do was easy enough, since Neocities only supports JavaScript. Figuring out how to use JavaScript to do that was a bit more tricky. In the end, I decided to add an empty divider on every page and have a script pick a background image to use for it. Here's the code:

var randomimage = [ "1.png", "2.png", "3.png", "4.png", //etc ]; var size = randomimage.length; var x = Math.floor(size*Math.random()); document.getElementById("sideimage").style.backgroundImage = 'url(/media/side/' + randomimage[x] + ')'; if(randomimage[x].includes("r")) { document.getElementById("sideimage").style.right = 0; } if(x < 10) { document.getElementById("sideimage").style.maxHeight = "40%"; }

The first bit loads the image filenames into an array. Then a random item from the array is chosen, which changes the background image of the blank divider.

The two if statements change the size and positioning of certain images. If the random image has an "r" in the filename, then the divider is moved to be flush with the right edge. The first 9 images look a bit too big with the default size, so their max-height is reduced. These are hacky solutions, but they work and aren't too taxing on a processor. I am pleased with the result, and will probably add some more images to the rotation.