GUIDE: Basic Banners for your site - ♺ ∙ Web Crafting Materials

Basic Banners

A BUNCH of people have been asking me if they can copy the code from the melonland eLink banner system to their site . SO I made a very quick edited down version of the code that you can use to host banners on your own site!

This is not intended to be a whole fake ad network (although you could use it for that if you put it in an iframe), its mostly intended for you to make your own pretend banners on your site!

Features:

Lets you set a url, image and alt text for each banner
Unlimited banners!
Have an unlimited number of banners on each page!
Auto refreshes banners every few seconds!
Limit: this version of the script only works with one size of banner, so pick wisely!

Tip: you can search "banner ad sizes" to get an idea of typical banner sizes, HOWEVER I highly recommend you change them a bit, (use 700x80 instead of 728x90) - this is because many ad-blockers will block typical banner size images. I also suggest you avoid using the word "ad" anywhere in the link or alt text because those get blocked too!

Setup:
1. Include this in your CSS styling, update the size to match the size of your banner images!

Code

.miniBanner img {
    width: 32px;
    height: 32px;
}

2. Next include this JavaScript, either directly on your page in <script> tags OR save it as miniBanner.js and link it on your page:

Code

// Basic Banner Script v0.1 by Melon
// This script lets you create auto changing banners on your site!
// Get help with this script here: https://forum.melonland.net/index.php?topic=4584

let miniBanner = {}; // This is a box for your banner related variables
miniBanner.loop = undefined; // do not edit
miniBanner.count = -1; // do not edit
miniBanner.links = []; // do not edit

// ==== DO Your EDIT here!! ====
// Add your links and images here: miniBanner.links.push({ url: "", image: "", alt: "" });
miniBanner.links.push({ url: "", image: "", alt: "" });
miniBanner.links.push({ url: "", image: "", alt: "" });
// paste as many of these as you like ^^

miniBanner.loopTime = 20; // In seconds - how often does your banner refresh

// ==== No need to edit anything below here unless you wanna experiment! =====
// Startup function to get everything going when the page loads!
window.addEventListener("DOMContentLoaded", (event) => {
    if (miniBanner.elements != undefined)
        return; // The script has already been setup
    miniBanner.elements = document.getElementsByClassName("miniBanner");
    updateBanners(); // First banners
    setInterval(updateBanners, miniBanner.loopTime * 1000); // Banner loop
});

// This is the function that updates the image and link on each banner!
function updateBanners() {
    for (let i = 0; i < miniBanner.elements.length; i++) {
        let miniBannerElement = miniBanner.elements[i];
        
         // Pick the next banner!
        miniBanner.count++;
        if(miniBanner.count > miniBanner.links.length-1) miniBanner.count = 0;
        let newBannerLink = miniBanner.links[miniBanner.count];
        
        // Set up the banner if its the first time!
        if (!miniBannerElement.hasChildNodes()) {
            let link = document.createElement("a");
            link.target = "_blank";
            link.href = "#";
            let img = document.createElement("img");
            img.alt = "Loading...";
            img.src = "#";
            link.appendChild(img);
            miniBannerElement.appendChild(link);
        }
        
        // Update the banner!
        miniBannerElement.firstChild.href = newBannerLink.url;
        miniBannerElement.firstChild.firstChild.alt = newBannerLink.alt;
        miniBannerElement.firstChild.firstChild.src = newBannerLink.image;
    }
}

3. To add your banner links and images, just replace the "miniBanner.links.push" lines with your own images and links, you can add as many push lines as you like! For example:

Code

miniBanner.links.push({ url: "/home.html", image: "/images/totoro.JPG", alt: "My Homepage" });

4. FINALLY: to make banners appear on your page, just add a bunch of elements with the miniBanner class set, this script will replace any element with miniBanner as its class with a mini banner!
For example, you might put of few of these around your site:

Code

<span class="miniBanner"></span>

Good luck making banners!