Register FAQ / Rules Forum Spy Search Today's Posts Mark Forums Read
Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old May 21, 2013, 01:54 PM   #1
yasyugixyugi
macrumors newbie
 
Join Date: Apr 2013
Anyone know of some code to rotate HTML banners?

Hi everyone,

I've got a few HTML banners that I'd like to rotate on a website. Does anyone know of any code, such as Javascript or something, that will let me randomly rotate these HTML banners? So when you refresh the webpage, the banner will change?

Thanks!
yasyugixyugi is offline   0 Reply With Quote
Old May 21, 2013, 03:10 PM   #2
enigma2118
macrumors member
 
Join Date: Jan 2006
A treasure-trove of goodies for you:

http://www.unheap.com/
enigma2118 is offline   0 Reply With Quote
Old May 25, 2013, 12:58 PM   #3
elppa
macrumors 68040
 
elppa's Avatar
 
Join Date: Nov 2003
It's just a case of sticking the images in a list and picking one at random.

Code:
<!doctype html>
<html>
<head>
	<title>Banners</title>
	<script>
		var banners = [];
		banners.push({src: "image1.png", alt: "Image 1"});
		banners.push({src: "image2.png", alt: "Image 2"});
		banners.push({src: "image3.png", alt: "Image 3"});
		banners.push({src: "image4.png", alt: "Image 4"});
		banners.push({src: "image5.png", alt: "Image 5"});

		window.onload = function() {
			var index = Math.floor(Math.random() * banners.length);
			var ad = document.getElementById("ad");
			ad.setAttribute("src", banners[index].src);
			ad.setAttribute("alt", banners[index].alt);
			ad.style.display = "block";
		}
	</script>
	<style>
		#ad {
			display: none;
		}
	</style>
	<noscript>
		<style>
			#ad {
				display: block;
			}
		</style>
	</noscript>
</head>
<body>
	<img id="ad" src="image1.png" alt="Image 1" />
</body>

Last edited by elppa; May 25, 2013 at 04:45 PM.
elppa is offline   0 Reply With Quote
Old May 30, 2013, 05:08 PM   #4
yasyugixyugi
Thread Starter
macrumors newbie
 
Join Date: Apr 2013
Quote:
Originally Posted by elppa View Post
It's just a case of sticking the images in a list and picking one at random.

Code:
<!doctype html>
<html>
<head>
	<title>Banners</title>
	<script>
		var banners = [];
		banners.push({src: "image1.png", alt: "Image 1"});
		banners.push({src: "image2.png", alt: "Image 2"});
		banners.push({src: "image3.png", alt: "Image 3"});
		banners.push({src: "image4.png", alt: "Image 4"});
		banners.push({src: "image5.png", alt: "Image 5"});

		window.onload = function() {
			var index = Math.floor(Math.random() * banners.length);
			var ad = document.getElementById("ad");
			ad.setAttribute("src", banners[index].src);
			ad.setAttribute("alt", banners[index].alt);
			ad.style.display = "block";
		}
	</script>
	<style>
		#ad {
			display: none;
		}
	</style>
	<noscript>
		<style>
			#ad {
				display: block;
			}
		</style>
	</noscript>
</head>
<body>
	<img id="ad" src="image1.png" alt="Image 1" />
</body>
Thank you very much for that - However the banners are not images, they are HTML banners... So would it be possible to do this same setup, but rotate bits of HTML code rather than images?

Thank you!
yasyugixyugi is offline   0 Reply With Quote
Old May 31, 2013, 01:18 AM   #5
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
see vendor information in user profile
Quote:
Originally Posted by yasyugixyugi View Post
Hi everyone,

I've got a few HTML banners that I'd like to rotate on a website. Does anyone know of any code, such as Javascript or something, that will let me randomly rotate these HTML banners? So when you refresh the webpage, the banner will change?

Thanks!
Try this: http://webscripts.softpedia.com/scri...oad-41613.html

"PHP Random Text Banner Rotator script provides you the simplest way to add banner ads to your website without the need for a database. PHP RandomRotator will also randomise anything you want including: - Plain text, Images, Banners, Quotes, and Links etc. You can place any number of banners, any size, anywhere on your website by using one simple line of code. " (from that site)

On a side note, I would likely add session cookie support to store the ID of the current banner and add a condition so the new randomly generated ID does not match the cookie value to avoid the same banner showing up twice in a row on page refreshes for the end user. Sure, session ID could be used but session cookies alone are traditionally used for simple stuff like this. FYI
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com

Last edited by SrWebDeveloper; May 31, 2013 at 01:37 AM. Reason: fixed typo in link
SrWebDeveloper is offline   0 Reply With Quote
Old Jun 1, 2013, 02:08 AM   #6
yasyugixyugi
Thread Starter
macrumors newbie
 
Join Date: Apr 2013
Quote:
Originally Posted by SrWebDeveloper View Post
Try this: http://webscripts.softpedia.com/scri...oad-41613.html

"PHP Random Text Banner Rotator script provides you the simplest way to add banner ads to your website without the need for a database. PHP RandomRotator will also randomise anything you want including: - Plain text, Images, Banners, Quotes, and Links etc. You can place any number of banners, any size, anywhere on your website by using one simple line of code. " (from that site)

On a side note, I would likely add session cookie support to store the ID of the current banner and add a condition so the new randomly generated ID does not match the cookie value to avoid the same banner showing up twice in a row on page refreshes for the end user. Sure, session ID could be used but session cookies alone are traditionally used for simple stuff like this. FYI
Thank you very much!
yasyugixyugi is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT -5. The time now is 02:01 AM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC