Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Rotating Banner Image
BThayer (New Admin) 5/19/2008 3:27 AM EST : Rotating Banner Image
BThayer
Posts: 624
Zomgawsh Poster

What I'm trying to do is set up the banner area to randomly rotate images when the page is loaded. I imagine Java can be used in the "Custom HTML - Banner Area" but I can't seem to find any solid leads as to whether or not this works.

Anyone happen to know if/how this is done?

Please reply here or send me a note.
TopBottom

Mottie (MVP) 5/19/2008 5:57 AM EST : RE: Rotating Banner Image
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Try this, but without the reload button

http://www.dmxzone.com/ShowDetail.asp?NewsId=5427
TopBottom

Everdark (MVP) 5/19/2008 1:34 PM EST : RE: Rotating Banner Image
GuildPortal MVP
Everdark
Posts: 3949
Zomgawsh Poster

Sweet and Simple! That's a great find, Mottie!

"The person who says it cannot be done should not interrupt the person doing it." 

 
Everdark (T), Evadarr, Nevinn (AC), Soninn, Croninn, Zakarr, Avirded (SC)
TopBottom

BThayer (New Admin) 6/2/2008 8:32 AM EST : RE: Rotating Banner Image
BThayer
Posts: 624
Zomgawsh Poster

Mottie said:
Try this, but without the reload button

http://www.dmxzone.com/ShowDetail.asp?NewsId=5427



Thanks! That did the trick.
TopBottom

Mottie (MVP) 6/21/2008 6:18 PM EST : RE: Rotating Banner Image
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Because I'm picky and obsessive *blink*. I changed and cleaned up the code for a random image display. This will work for a banner image or any image box on your site.

If you want to use it for your banner image, just add it to your banner area HTML (Control Panel > Style & Colors > Banner Area) or paste it for your random images into a "free form text/HTML" box. The only problem with this is it doesn't detect your image sizes, so make sure your images don't blow out the sides of your content box 
<script type="text/javascript">
var images = new Array();

// ********************************
// Add images below
// images.push ("Add URL here");
// ********************************

images.push ("http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_cobblestone.gif");
images.push ("http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_dirt.gif");
images.push ("http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_floor.gif");
images.push ("http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_grass.gif");
images.push ("http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_lava.gif");
images.push ("http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_outland2.gif");

// ********************************
// Don't change anything below this line
// ********************************

var inc = Math.floor( Math.random() * images.length );
var img = "<center><img src=" + images[inc] + " border=0></center>";
(img);
</script>
TopBottom

Smackler (New Admin) 7/1/2008 4:01 AM EST : RE: Rotating Banner Image
Smackler
Posts: 441
Fingers of Fury!

I find these forums and all of your insight very useful for a lot of the questions and issues that I have been encountering. One question that I have is would your code here work for a random background image? I attempted using it by putting it into my CSS but it doesnt seem to work.

I have also tried using othercode that I have found on the web with no success. Can you offer some advice?

Thanks in advance!
TopBottom

Mottie (MVP) 7/1/2008 6:40 AM EST : RE: Rotating Banner Image
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi,

A random background image can pretty much use the same script.
<script type="text/javascript">
var bkgd = new Array();

// **************************************
// Add background images below
// bkgd.push ("Add URL here");
// **************************************

bkgd.push ("http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/green.jpg");
bkgd.push ("http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/bkgd_stone1.jpg");
bkgd.push ("http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/bkgd_default.jpg");
bkgd.push ("http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/bkgd_parch2.jpg");

// **************************************
// Don't change anything below this line
// **************************************

var inc = Math.floor( Math.random() * bkgd.length );
var bkgdimg = "<style>body {background: #000000 url(" + bkgd[inc] + ");}</style>";
document.write(bkgdimg);
</script>
TopBottom

HaleGnomeMage (New Admin) 7/17/2008 8:56 AM EST : RE: Rotating Banner Image

HaleGnomeMage
Posts: 805
Zomgawsh Poster

I am currently using this on my guildportal site and one of the images I want to use in the banner is a SWF file... when I add the hosted url to the code it doesn't load.  Is it possible to use a flash file in this script?
TopBottom

Mottie (MVP) 7/17/2008 10:13 AM EST : RE: Rotating Banner Image
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

No sorry, this code only works for images. I'll have to work on a  way to make it work with flash files (it's embeded versus being an image). But in the mean time, could you maybe use an animated gif that displays something similar?
TopBottom

Mottie (MVP) 7/17/2008 11:21 AM EST : Random Banner Image (now with Flash!)
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

LOL ok, nevermind.... here is the code that will put up random images or flash! YAY!

Random Image/Flash Code
<div id="banner" align=center></div>
<script type="text/javascript">
var images = new Array();

/* ********************************
 Add images: images.push (["Add URL here"]);
 Add Flash:  images.push (["Add URL here","Width","Height"]);
 note for flash, add brackets around the three parts
 ******************************** */

images.push (["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_cobblestone.gif"]);
images.push (["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_dirt.gif"]);
images.push (["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_floor.gif"]);
images.push (["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_grass.gif"]);
images.push (["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_lava.gif"]);
images.push (["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_outland2.gif"]);
images.push (["http://70.85.12.163/albino_flash06s/badger(www.albinoblacksheep.com).swf","400","350"]);

// ********************************
// Don't change anything below this line
// ********************************

var inc = Math.floor( Math.random() * images.length );
var img = "";
 if (images[inc][0].match(".swf")) {
  img = "<object width='" + images[inc][1] + "' height='" + images[inc][2];
  img += "'><param name='movie' value='" + images[inc][0];
  img += "'></param><embed src='" + images[inc][0] + "' type='application/";
  img += "x-shockwave-flash' width='" + images[inc][1] + "' height='" + images[inc][2];
  img += "'></embed></object>";
 } else {
  img = "<img src=" + images[inc][0] + " border=0>";
 }
document.getElementById("banner").innerHTML = img;
</script>
Customizing
  • Images: Add the image as before, replace the URL in orange with your image URL. Add and remove the lines as needed.

    images.push (["Add URL here"]);

  • Flash: Add flash by replacing the URL in orange, then add the width and height of your flash in red, as follows:

    images.push (["Add URL here","Width","Height"]);
*Note: You MUST have the brackets "[]" (in blue) around the parts for this to work!

Enjoy!

Edit: Updated this script to work with IE, just add brackets around the image URL... my apologizes for not testing this on IE before posting.
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%