← GO BACK HOME

RG-MAGE'S CODE SNIPPETS

Feel free to use... sharing is caring.

Random image on refresh

In the script, replace the placeholders in the array with links to your own images. There’s no limit on the amount of pictures, but make sure you put a comma after every path / url.

HTML

Change height and width to your taste or create a css class for this img element.

JS

//This is your image array. Replace the placeholders with the paths to your images. There is no limit but make sure you put a comma after every path.
    
    const randomImages = [
    "https://rg-mage.neocities.org/img/pokemon/araquanid.png" ,
    "https://rg-mage.neocities.org/img/pokemon/arcanine.png" ,
    "https://rg-mage.neocities.org/img/pokemon/crawdaunt.png" ,
    "https://rg-mage.neocities.org/img/pokemon/musharna.png" ,
    "https://rg-mage.neocities.org/img/pokemon/pikachu.png" ,
    "https://rg-mage.neocities.org/img/pokemon/ribombee.png" ,
    "https://rg-mage.neocities.org/img/pokemon/scovillain.png" ,
    "https://rg-mage.neocities.org/img/pokemon/tsareena.png" 
        ];

const chosen = randomImages[Math.floor(Math.random() * randomImages.length)]; // picks a random url from the array above
    document.getElementById("random-img").src = chosen; // replaces img src with chosen url in <img id="random-img">
</script>

Place this script at the bottom of your html page, right above < /body > tag.

Refresh page to see it work ;)

Image per day of the month

Create a folder named ‘cal-img’ in your root / home. Put 31 of your designated images in there and name them 1 - 31. Make sure all your images have the same file type (either png, gif or jpg).

HTML

Change height and width to your taste or create a css class for this img element.

JS

Place this script at the bottom of your html page, right above < /body > tag.

This image is called and
corresponds with the current day!