A short description and breakdown of how the bannerlink works.

How it Works: The BannerLink

This is the first in a series of posts that explain how the various projects I build work. My hope is that folks will be able to use these breakdowns to encourage their own projects.

Technologies used

The bannerlink relies on Javascript as the programming language, and uses a simply formatted CSV file.

The CSV File

The CSV file operates here like a simple database. It has two columns:

The banner image is the image that will be displayed. All of the images are of uniform dimensions, in this case a standard of 468 pixels wide by 60 pixels high. The reason for the standard image size is that it allows many users to put the banner on their website and plan for the dimensions in their website design.

The URL is a fully featured URI, and this allows the string to be inserted into an HTML link element on the page.

This file is hosted separately to allow for ease of maintenance. When I initially took the code from hbaguette it had two Arrays that were hard-coded (or as part of the code script directly). This has the draw back of more points of failure and harder to maintain in the long term. The benefits of transitioning the code for a separate file makes it both easier to maintain manually, and also leaves open the opportunity for programmatic maintenance.

The Code

<script type="text/javascript">
        // Rewritten from the original BannerLink code from https://hbaguette.neocities.org/#misc-bannerlink
        // Improved to use CSV instead of static listing, allowing for future automation and ease of maintenance.
        function randImg(csvData) {
        try{
            var splitData = csvData.split("\n");
            var size = splitData.length;
            var x = Math.floor(size * Math.random());
            var adData = splitData[x-1].split(",");
            document.getElementById('image').style.backgroundImage = "url('"+adData[0]+"')";
            document.getElementById('imglink').href = adData[1];
            setTimeout(randImg, 30000);
        } catch (error) {
            randImg(csvData);
        }

        }

        async function fetchCSV(url) {
            try {
                const response = await fetch(url);
                const data = await response.text();
                randImg(data);
            } catch (error) {
                console.error('Error fetching CSV:', error);
            }
        }
    fetchCSV("https://j4yc33.neocities.org/bannerLink/bannerads.csv");
    </script>

The code consists of 2 functions, fetchCSV, and randImg.

The first function, fetchCSV takes a URL and downloads a CSV file from a provided URL. It then takes this data, as an array of lines, and sends it to the randImg function. If it fails to download the CSV, it will log the error to the browser console.

The randImg function then takes this Array of elements and chooses a random line from the CSV file. That line is split into it’s parts by using the comma as a delimiter (as is standard for Comma Separated Value, or CSV, files). This line is then made into an array variable with 2 elements, element 0 is an Image URL, and element 1 is the URL it needs to link to.

Using these elements, the Image URL is assigned to the backgroundImage attribute of the HTML element given the ID ‘image’. The URL value is assigned to the href element of the HTML link element given the ID ‘imglink’. Assuming the correct elements exist on the HTML page, the banner will now show the chosen image linked to the chosen page. If it fails, it tries again. There are some instances where the random choice will return undefined, although it is extremely uncommon to happen twice in a row. For that reason, the try,catch pair for this function is recursive.

It then waits 30,000 miliseconds (roughly 30 seconds) and will change the page elements to another randomly chosen banner.