Lesson 28: Creating Banner Ads

Master the art of creating dynamic banner ads with JavaScript through interactive examples and step-by-step visualizations.

❮ Previous Lesson Next Lesson: Slideshow ❯

28.1 Introduction to Banner Ads

Banner ads are graphical advertisements displayed on websites to promote products, services, or brands. They come in standard sizes and can be static images, animated GIFs, or interactive elements created with JavaScript.

Key points:
  • Banner ads are essential for website monetization
  • Standard sizes ensure compatibility across websites
  • JavaScript enables dynamic and interactive ads
  • Good banners balance visibility with user experience

28.2 Creating a Simple Banner Ad

The most basic banner ad is a static image with a link. We can create this using HTML and enhance it with JavaScript:

<div id="banner-ad">
  <a href="https://example.com" target="_blank">
    <img src="banner.jpg" alt="Advertisement">
  </a>
</div>

Example 28.1: Static Banner Ad

Create a simple static banner ad:

28.3 Creating a Rotating Banner Ad

JavaScript allows us to create rotating banners that cycle through multiple ads at set intervals:

let currentAd = 0;
const ads = ['banner1.jpg', 'banner2.jpg', 'banner3.jpg'];
const adLinks = ['link1.html', 'link2.html', 'link3.html'];

function rotateBanner() {
  currentAd = (currentAd + 1) % ads.length;
  document.getElementById('bannerImg').src = ads[currentAd];
  document.getElementById('bannerLink').href = adLinks[currentAd];
}

// Rotate every 5 seconds
setInterval(rotateBanner, 5000);

Example 28.2: Rotating Banner Ad

Create a banner that cycles through multiple ads:

28.4 Creating a Responsive Banner Ad

Responsive banners adapt to different screen sizes using CSS and JavaScript:

function updateBannerSize() {
  const width = window.innerWidth;
  let bannerSize;
  
  if (width >= 1200) {
    bannerSize = 'desktop-banner.jpg';
  } else if (width >= 768) {
    bannerSize = 'tablet-banner.jpg';
  } else {
    bannerSize = 'mobile-banner.jpg';
  }
  
  document.getElementById('responsiveAd').src = bannerSize;
}

// Update on load and resize
window.addEventListener('load', updateBannerSize);
window.addEventListener('resize', updateBannerSize);

Example 28.3: Responsive Banner Ad

Create a banner that changes based on screen size:

28.5 Interactive Banner Ads

JavaScript enables interactive banner ads that respond to user actions:

Interactive Features:
  • Hover effects to reveal more information
  • Click-triggered animations or content changes
  • Mini-games or quizzes within the banner
  • Form elements for lead generation

Example 28.4: Interactive Banner Ad

Create a banner with hover effects and click interaction:

28.6 Banner Ad Best Practices

Effective Banner Design:
  • Keep file sizes small for faster loading
  • Ensure clear call-to-action (CTA)
  • Maintain brand consistency
  • Optimize for all device sizes
  • Track performance with analytics
  • Rotate ads to prevent banner blindness
❮ Previous Lesson Next Lesson: Slideshow ❯