If you have a static site and you want to make the pages more “dynamic” your options are limited.

Let’s say you want to render a random image every time you page is loaded or refreshed.

JavaScript is the only option that can help you. Here is the step by step instructions on how to implement displaying a random image on HTML refresh. You can see the example of this on the site - see the ads image changes evry time the page refreshes. BTW, you can click the ads and follow advertiser’s shop to support my site.

Below I’ll show how on this site a random ads image with a corresponding link is rendered.

Import JQuery

In the head section of your HTML add JQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

You can use this (pretty old) or the latest version of JQuery

Add an empty div

In your HTML add an empty div where you want to display a random image with the id ads-image

  <div id="ads-image"></div>

Create a script to render a random image

Add a new JavaScript file to the folder where all other JavaScript files are stored on your site. Let’s say the folder is js

    var images = ['bulldog-renovation-team.gif', 
        'bulldog-oops-wasnt-me.gif', 
        'bulldog-wall-what-wall.gif', 
        'bulldog-wall-what-wall-no-text.gif', 
        'cane-corso-boo.gif',
        'cane-corso-american-flag.gif',
        'cane-corso-patriotic.gif',
        'cane-corso-patriotic-1.gif'];
    var urls = ['https://www.etsy.com/shop/DigitalScapeArts?search_query=renovation+team', 
        'https://www.etsy.com/shop/DigitalScapeArts?search_query=bulldog+oops',
        'https://www.etsy.com/shop/DigitalScapeArts?search_query=bulldog+wall+what+wall',
        'https://www.etsy.com/shop/DigitalScapeArts?search_query=playful+bulldog',
        'https://www.etsy.com/shop/DigitalScapeArts?search_query=cane+corso+boo',
        'https://www.etsy.com/shop/DigitalScapeArts?search_query=cane+corso+american+flag',
        'https://www.etsy.com/shop/DigitalScapeArts?search_query=cane+corso+american+flag',
        'https://www.etsy.com/shop/DigitalScapeArts?search_query=cane+corso+american+flag'];
    var ind = Math.floor(Math.random() * images.length);

    $('<a href="' + urls[ind] + '" target="_blank"><img width="250" height="250" alt="" border="0" src="/image/folder/' + images[ind] + '"></a>').appendTo('#ads-image')

Replace /image/folder/ with your image folder where your images are stored

Add script to HTML

Somewhere in the footer of your HTML add this

<script src="/js/ads.js"></script>

That’s it. Enjoy!

You may also find these posts interesting: