Member Avatar for cmills83

Can someone link me to a script that will rotate an ad banner on a website so a different ad appears when you refresh or revisit the page. I have a found a few scripts that rotate images but it has to be able to have the link with it too. Thanks.

  • 3 Contributors
  • 4 Replies
  • 215 Views
  • 5 Years Discussion Span
  • Latest Post Latest Post by shailendrabisht

Dani AI

Generated

Thanks to for posting a working example and to for checking which language was needed. The snippet shown will do the job, but it uses an older pattern (document.write / inline output) that makes maintenance, accessibility, and security harder. Below is a small, modern drop-in pattern that keeps HTML separate, uses DOM methods (no document.write), and optionally rotates sequentially across visits using localStorage. It is easy to extend for weighted rotation, server-side impression counting, or lazy loading.

Place a container where the banner belongs and add this script:

<div id="ad-rotator" aria-label="Advertisement"></div>

<script>
document.addEventListener('DOMContentLoaded', function () {
  const ads = [
    { src: 'ads/ad1.jpg', href: 'https://advertiser.example/offer', alt: 'Special offer' },
    { src: 'ads/ad2.jpg', href: 'https://another.example', alt: 'New product' },
  ];

  const last = parseInt(localStorage.getItem('dw_last_ad') || '-1', 10);
  const idx = (last + 1) % ads.length;
  localStorage.setItem('dw_last_ad', idx);

  const container = document.getElementById('ad-rotator');
  if (!container) return;

  const a = document.createElement('a');
  a.href = ads[idx].href;
  a.target = '_blank';
  a.rel = 'noopener noreferrer nofollow';

  const img = document.createElement('img');
  img.src = ads[idx].src;
  img.alt = ads[idx].alt || '';
  img.style.maxWidth = '100%';
  img.loading = 'lazy';

  a.appendChild(img);
  container.appendChild(a);
});
</script>

Practical notes and gotchas:

  • Avoid document.write; it can break async scripts and blocks rendering. Use DOM APIs instead.
  • Use alt and an aria-label for accessibility.
  • For fair distribution across visits use localStorage (above) or a server-side rotator if you need accurate impression counts or weighting.
  • Add rel="noopener noreferrer" with target="_blank" to prevent window.opener attacks; include nofollow if required by your ad policy.
  • Preload heavy images with new Image() if you want to avoid flicker, and test with common ad blockers so placements degrade gracefully.

Recommended Answers

All 4 Replies

Member Avatar for Member #114696

Which one do you want ASP, PHP, javascript.

Member Avatar for cmills83

Javascript preferably, or else php. Thanks!

Member Avatar for cmills83

Got it, thanks though!

<SCRIPT language=JavaScript>
/*
 +---------------------------------------------------------+
 | Ad Simple                 Copyright www.YugDesign.com   |
 +---------------------------------------------------------+
 | This program may be used and hosted free of charge by   |
 |anyone for personal purpose as long as this copyright    |
 |notice remains intact.                                   |
 +---------------------------------------------------------+
*/

var img_width = "468";
var img_height = "60";
var img_title = "Click Here";


var ad=new Array()
//insert here your images src
ad[0]='gray.jpg';
ad[1]='red.jpg';
ad[2]='black.jpg';

var links=new Array()
//insert here your links
links[0]='http://www.google.com';
links[1]='http://www.yahoo.com';
links[2]='http://www.gmail.com';

var xy=Math.floor(Math.random()*ad.length);
document.write('<a href="'+links[xy]+'" target="_blank"><img src="'+ad[xy]+'" width="'+img_width+'" height="'+img_height+'" alt="'+img_title+'" border="0"></a>');
</SCRIPT>
Member Avatar for shailendrabisht

Emphasized Text Here

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.