Nevermind...

AoC Guild Bar v1.0 (outdated) | WoW Guild Bar: v1.0 (outdated) | v1.1 (TBC) | v1.2 (WotLK) | 1.21 (Ulduar) | v1.22 (Crusader) | v 1.23 (Icecrown)

---

************************************
There is a newer version of this bar:

The instructions are not as detailed as they are
in this post, but they are basically the same.
View Guild Bar version 1.23 here.

************************************

Edit: I apologize for rushing to finish this, I didn't even test it on Internet explorer, nor did I try to actually put it into the banner area (half the script gets cut) *hang head*. Internet Explorer doesn't like it when I use "class" as a javascript variable, so it's now "classrq". The post below is now updated!

Ok I did have some time... I actually spent more time writing up this post than I did to make it!

This is a combined World of Warcraft status bar. It's original form is seen on the Crit Happens website, but it has been modified here for easier updating for everyone. This bar is best added in the Banner Area of your website (you will need a paid subscription), but you can add it anywhere on the page - read the customizing section below for more details. See this bar in action here

Banner Area or Content Box

The HTML portion can be put into the banner area or a content box. The CSS can also be put into the Custom StyleSheet, but the "#dhtmltooltip" is automatically added by GuildPortal and is over-ridden. So if you don't care about the tooltip background color or it's border, then put it into the Custom StyleSheet.

<!-- HTML Combined Box (with image)
************************************ -->
<table class="guildBar">
<tr>
 <td id="recruitBar"></td>
 <td id="wowImage"></td>
 <td id="raidingBar"></td>
</tr>
</table>

<!-- Stylesheet
************************************ -->
<style type="text/css">
.guildBar { width:740px; margin-right:auto; margin-left:auto;}
#wowImage { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/TBC.png) center center no-repeat; width:175px; height:90px; }
.dim { opacity: .3; filter: alpha(opacity=30); }

#recruitBar { width:280px; text-align:right; vertical-align:bottom; font-family:sans-serif; font-size:70%; white-space:nowrap; }
#recruitBar a, #recruitBar img { color:#999; text-decoration:none; border:0px; width:20px; height:20px; padding:0px 1px 0px 0px; }
.recruitToolTip { color: orange; font-weight: bold; vertical-align:top; }

#raidingBar { width:280px; text-align:left; vertical-align:bottom; color:#999; font-family:sans-serif; font-size:70%; white-space:nowrap; }
#raidingBar a, #raidingBar img { color:#999; text-decoration:none; border:0px; width:20px; height:20px; padding:0px 1px 0px 0px; }
.raidingToolTip { color: #0080ff; font-weight: bold; vertical-align:top; }

.killedBoss { color:#888888; text-decoration: line-through; }
.toKillBoss { color: #dddddd; text-decoration: none; }
.killedText { color: #ff0000; }

#dhtmltooltip { position: absolute; width: 150px; border: #888888 1px solid; padding: 3px; background: #222222; color: #dddddd; visibility: hidden; z-index: 100; }
</style>
<script src="http://www.axiomfiles.com/Files/243007/guildbar.js"></script>

File to make "guildbar.js"

If you want to add this guild bar into the banner area, it will be necessary to put the javascript below into a file. Copy and paste the code below into notepad and save the file as "guildbar.js". You need to do this because the script is too long to fit into the Banner Area. If you put this into a content box and want to include the javascript, just slap a "<script type=text/javascript>" to the top and a "</script>" at the bottom.

You can use the File Manager (Control Panel > File Manager) built into Guild Portal, but I recommend using a free hosting site like "ripway.com" to host the file. The reason is ripway provides an online text editor, you can easily update the information in the script, save and you're done. With the GuildPortal File Manager, you can upload the updated file and it should replace the existing one, but it's been hit or miss for me. Update the URL in green above to where you saved your file.

var classrq = new Array();
var progress = new Array();

/* Recruitment Bar - Class Needs
 ********************************************
- Each class variable is set up as follows:
   classrq.push ([ "Thumbnail Image URL",
    "Class Name",
    "Class Needs"
   ])
- recruitKeyWord defines the word to match
  in the "Class Needs" to set icon dimmer,
  the text is case sensitive.
- All apostrophes/single quotes (') are replaced
  with "&#92;&#39;". This is required for the
  tooltips to work properly.
 ******************************************** */
var recruitTitle = "Recruitment";
var recruitKeyWord = "Closed";
var recruitImagesPerRow = 10;
var linkToRecruitmentPost = "http://recruitme.com";

classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/druid.gif",
 "Druid",
 "Feral<br>Resto"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/hunter.gif",
 "Hunter",
 "BM/Marksman (650+ DPS only)"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/mage.gif",
 "Mage",
 "Frost/Arcane"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/paladin.gif",
 "Paladin",
 "Prot<br>Holy"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/priest.gif",
 "Priest",
 "Shadow<br>Holy"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/rogue.gif",
 "Rogue",
 "Closed"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/shaman.gif",
 "Shaman",
 "Resto"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/warlock.gif",
 "Warlock",
 "Affliction"
]);
classrq.push (["http://www.guildportal.com/GuildImages/WOWRosterImages/warrior.gif",
 "Warrior",
 "Closed"
]);
classrq.push (["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/dk.png",
 "Death Knight",
 "Closed"
]);
/* Progress Bar - Instance and Boss status
********************************************
- Each progression variable is set up as follows:
   progress.push ([
    ["Thumbnail Image URL"],
    ["Instance Name", "Instance Status"],
    ["Instance Boss #1", "Boss #1 Status"],
    ["Instance Boss #2", "Boss #2 Status"],
    ...
    ["Last Instance Boss", "Last Boss Status"]
   ]);
- The "raidingKeyWord" defines the word to match
  in the "Instance Status" to set icon dimmer, the
  text is case sensitive. Default is set to "No"...
  so, the words "No", "Not", "None" and "Noogies"
  will all cause the instance icon to dim.
- The "bossKilledKeyWord" defines the word to match
  to then apply the "killedBoss" and "killedText"
  CSS classes to the text.
- All apostrophes/single quotes (') are replaced
  with "&#92;&#39;". This is required for the
  tooltips to work properly.
******************************************** */
var raidingTitle = "Progression";
var raidingKeyWord = "No";
var bossKilledKeyWord = "Killed";
var raidingImagesPerRow = 11;
var linkToRaidingSite = "http://www.wowjutsu.com/us/";

/* ********************************************
   The Burning Crusade
   ******************************************** */
// KARAZHAN
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Kar.gif"],
 ["Karazhan", "(Farm)"],
 ["Animal Boss", "Killed"],
 ["Attumen the Huntsman", "Killed"],
 ["Moroes", "Killed"],
 ["Maiden of Virtue", "Killed"],
 ["Opera Event", "Killed"],
 ["Nightbane", "Killed"],
 ["The Curator", "Killed"],
 ["Shade of Aran", "Killed"],
 ["Terestian Illhoof", "Killed"],
 ["Netherspite", "Killed"],
 ["Chess Event", "Killed"],
 ["Prince Malchezaar", "Killed"]
]);
// ZUL'AMAN
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/ZA.gif"],
 ["Zul&#92;&#39;Aman", "(in progress)"],
 ["Nalorakk", "Killed"],
 ["Akil&#92;&#39;Zon", "Killed"],
 ["Jan&#92;&#39;Alai", "Killed"],
 ["Halazzi", "Killed"],
 ["Malacrass", "60%"],
 ["Zul&#92;&#39;jin", ""]
]);
// DOOM LORD KAZZAK
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/DLK.gif"],
 ["Doom Lord Kazzak", "Noogied us"],
 ["Doom Lord Kazzak", ""]
]);
// DOOMWALKER
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/DW.gif"],
 ["Doomwalker", ""],
 ["Doomwalker", ""]
]);
// GRUUL'S LAIR
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/GL.gif"],
 ["Gruul&#92;&#39;s Lair", "(Farm)"],
 ["High King Maulgar", "Killed"],
 ["Gruul", "Killed"]
]);
// MAGTHERIDON'S LAIR
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Mag.gif"],
 ["Magtheridon&#92;&#39;s Lair", "(Farm)"],
 ["Magtheridon", "Killed"]
]);
// SERPENTSHRINE CAVERN
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/SSC.gif"],
 ["Serpentshrine Cavern", ""],
 ["Lurker", "Killed"],
 ["Hydross", "Killed"],
 ["Morogrim", "Killed"],
 ["Leotheras", "Killed"],
 ["Karathress", "Killed"],
 ["Lady Vashj", "Killed"]
]);
// THE EYE, TEMPEST KEEP
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/TK.gif"],
 ["The Eye", ""],
 ["Void Reaver", "Killed"],
 ["Al&#92;&#39;ar", "Killed"],
 ["Solarian", "Killed"],
 ["Kael&#92;&#39;thas", "Killed"]
]);
// BATTLE FOR MOUNT HYJAL
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/MH.gif"],
 ["Battle for Mount Hyjal", "(in progress)"],
 ["Rage Winterchill", "Killed"],
 ["Anetheron", "Killed"],
 ["Kaz&#92;&#39;rogal", "Killed"],
 ["Azgalor", "Killed"],
 ["Archimonde", "10%"]
]);
// BLACK TEMPLE
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/BT.gif"],
 ["Black Temple", "(in progress)"],
 ["High Warlord Naj&#92;&#39;entus", "Killed"],
 ["Supremus", "Killed"],
 ["Shade of Akama", "Killed"],
 ["Teron Gorefiend", "40%"],
 ["Gurtogg Bloodboil", ""],
 ["Reliquary of Souls", ""],
 ["Mother Shahraz", ""],
 ["The Illidari Council", ""],
 ["Illidan Stormrage", ""]
]);
// SUNWELL PLATEAU
progress.push ([
 ["http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/SP.gif"],
 ["Sunwell Plateau", "Nothing to see here, move along"],
 ["Kalecgos", ""],
 ["Brutallus", ""],
 ["Felmyst", ""],
 ["Eredar Twins", ""],
 ["M&#92;&#39;uru", ""],
 ["Kil&#92;&#39;jaeden", ""]
]);

/* ********************************************
   Don't change anything below
   ******************************************** */
// Recruitment bar
var rb = "<div><a href=\"" + linkToRecruitmentPost + "\">" + recruitTitle + "</a></div>";
 for (var j=0; j<classrq.length; j++) {
  rb += "<a href=\"" + linkToRecruitmentPost;
  rb += "\" =\"ddrivetip('<span class=recruitToolTip>";
  rb += classrq[j][1];
  rb += "</span><br>" + classrq[j][2];
  rb += "', '', '300');\" =\"hideddrivetip()\"><img src=\"";
  rb += classrq[j][0] + "\"";
   if (classrq[j][2] == recruitKeyWord) { rb += " class=dim"; }
  rb += "></a>";
 if ( (j+1)%recruitImagesPerRow == 0 ) { rb += "<br>"; }
 }
 rb += '</a>';

// Progression Bar
var pb = "<div><a href=\"" + linkToRaidingSite + "\">" + raidingTitle + "</a></div>";
 for (var inst=0; inst < progress.length; inst++) {
  pb += "<a href=\"" + linkToRaidingSite;
  pb += "\" =\"ddrivetip('<table><tr><td class=raidingToolTip width=200px>";
  pb += progress[inst][1][0] + "</td><td>" + progress[inst][1][1] + "</td></tr>";
  for (var boss=2; boss < (progress[inst].length); boss++) {
   if (progress[inst][boss][1].match(bossKilledKeyWord)) {
    pb += "<tr><td class=killedBoss>" + progress[inst][boss][0] + "</td><td class=killedText>";
   } else {
    pb += "<tr><td class=toKillBoss>" + progress[inst][boss][0] + "</td><td>";
   }
  pb += progress[inst][boss][1] + "</td></tr>";
  }
  pb += "</table>', '', '300');\" =\"hideddrivetip()\"><img src=\"";
  pb += progress[inst][0] + "\"";
   if (progress[inst][1][1].match(raidingKeyWord) || (progress[inst][1][1] == "" && progress[inst][2][1] == "")) pb += " class=dim";
  pb += "></a>";
   if ( (inst+1)%raidingImagesPerRow == 0 ) { pb += "<br>"; }
 }
 pb += "</a>";
 document.getElementById('recruitBar').innerHTML = rb;
 document.getElementById('raidingBar').innerHTML = pb;

Customizing the Script

Recruitment Bar

CSS

• "#recruitBar" defines the recruitment box size and font size.
• "#recruitBar a, #recruitBar img" defines the text color of the title and the image size and border color.
• ".recruitToolTip" defines the style and color of the tooltip title.
• "#dhtmltooltip" define the tooltip box, this is basically a copy of the default one with a different background color.

Variables (in red)

• Box Title (recruitTitle):
  Default is set to "Recruitment". See the CSS above on how to change it's style.
• Icon dimming (recruitKeyWord):
  The script looks for a keyword in your class needs to determine if the class image needs to be dimmed. Default is set to "Closed". The keyword is case sensitive.
• Icon arrangement (recruitImagesPerRow):
  At this time, there are ten classes. The bar is designed to allow you to set the number of icons per row, default is set to 10. See the second image above to see what it looks like set to 5.
• Icon link (linkToRecruitmentPost):
  The URL to your recruitment requirements or application thread should be typed in here. Default is "http://recruitme.com".
• Class needs:
  Change your class needs as desired. The script is set up as follows:
  
  classrq.push ([ "Thumbnail Image URL",
    "Class Name",
    "Class Needs"
  ])
  
  You only need to change the "Class Needs" portion. In the example for Druids, you will see the class needs text looks like this: "Feral<br>Resto". The <br> in the middle is HTML code for new line. You can basically type in anything you want here except for apostrophes/single quote (') - if you want to add one, replace it with "&#92;&#39;". Sorry, but this is the only way to do it without breaking the tooltip.

Progression Bar

CSS

• "#raidingBar" defines the progression box size and font size
• "#raidingBar a, #raidingBar img" defines the text color of the title and the image size and border color.
• ".raidingToolTip" defines the style and color of the tooltip title.
• "#dhtmltooltip" defines the tooltip box, this is basically a copy of the default one with a different background color.
• ".killedBoss" defines the boss name style when it has been killed. The default is set to put a line through the name.
• ".toKillBoss" defines the boss name style when it hasn't been killed.
• ".killedText" defines the style for the boss status when it has been killed. The default style makes the text red.

Variables (in red)

• Box Title raidingTitle):
  Default is set to "Progression". See the CSS above on how to change the style of this text.
• Icon dimming (raidingKeyWord):
  The script looks for a keyword in your instance status to determine if the image needs to be dimmed. Default is set to "No". The keyword is case sensitive. You can also just leave the status blank and it will dim the icon if the first boss status is also blank.
• Style for a killed boss (killedKeyWord):
  The script looks for this keyword in your boss status text to determine if it needs to apply CSS to it. Default is set to "Killed". The keyword is case sensitive.
• Icon arrangement (raidingImagesPerRow):
  At this time, there are Eleven boss encounters listed (for TBC expansion). The bar is designed to allow you to set the number of icons per row, default is set to 11. See the second image above to see what it looks like set to 6.
• Icon link (linkToRaidingSite):
    The URL to your a raiding status/ranking site can be added here. The default is "http://www.wowjutsu.com/us/".
• Progression status:
  Change your instance and boss status as desired. The script is set up as follows:
  
  progress.push ([
   ["Thumbnail Image URL"],
   ["Instance Name", "Instance Status"],
   ["Instance Boss #1", "Boss #1 Status"],
   ["Instance Boss #2", "Boss #2 Status"],
   ...
   ["Last Instance Boss", "Last Boss Status"]
  ]);
  
  You only need to change the "Instance Status" and "Boss ## Status" portions of each instance. You can basically type in anything you want as a status except for an apostrophes/single quote (') - if you want to add one, replace it with "&#92;&#39;". Sorry, but this is the only way to do it without breaking the tooltip.

Bar Style

The Guild Bar has three portions. The left side has the recruitment bar, the middle has the logo and the right side has the raiding bar. The HTML is in blue above. If you want to switch them or use only one of the bars. Replace the HTML in blue with:

Recruitment Bar only:
<div id="recruitBar></div>

Raiding Bar only:
<div id="raidingBar></div>

If you decided to have these two bars switch places, edit the "#recruitBar" and "#raidingBar" in the CSS and switch the "text-align:" as well.

The WoW image in the middle can be replaced by your guild tabard or anything you want. Keep the image narrow, no more than 200px wide - you can adjust the size of the image box in the CSS (#wowImage) as needed. I also have a WotLK logo prepared, link to it at:
http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/WotLK.png



Updated 7/22/2008: (1) I fixed a problem with the bars always being vertical in Internet Explorer. (2) In the raid progression bar, I changed the javascript to now dim the icon if you leave the instance status blank. It will only dim the icon if the first boss status is also blank. This should make it easier to just leave the status of an entire instance blank until you get in there. 

AHHHH! I knew this would drive me nuts. I should have never tried. LMAO

Here's the code I have when finished. I took out the stuff that I thought was unneeded. What am I doing wrong?

<!-- HTML Combined Box (with image)
************************************ -->
<table class="guildBar">
<tr>
 <td id="recruitBar"></td>
 <td id="wowImage"></td>
 <td id="raidingBar"></td>
</tr>
</table>

<!-- Stylesheet
************************************ -->
<style type="text/css">
.guildBar { width:740px; margin-right:auto; margin-left:auto;}
#wowImage { background: url(http://tbn0.google.com/images?q=tbn:EoLwwYqJfqIXaM:http://www.thecircleofpain.com/Uploads/Conan/AgeOfConan.jpg)center center no-repeat; width:110px; height:138px; }
.dim { opacity: .3; filter: alpha(opacity=30); }

#recruitBar { width:350px; text-align:right; vertical-align:bottom;font-family:sans-serif; font-size:70%;}
#recruitBar a, #recruitBar img { color:#999; text-decoration:none; border:0px;width:20px; height:20px; padding:0px 2px 0px 2px; }
.recruitToolTip { color: orange; font-weight: bold; vertical-align:top; }

#raidingBar { width:350px; text-align:left; vertical-align:bottom; color:#999;font-family:sans-serif; font-size:70%; }
#raidingBar a, #raidingBar img { color:#999; text-decoration:none; border:0px;width:20px; height:20px; padding:0px 2px 0px 2px; }
.raidingToolTip { color: #0080ff; font-weight: bold; vertical-align:top; }

.killedBoss { color:#888888; text-decoration: line-through; }
.toKillBoss { color: #dddddd; text-decoration: none; }
.killedText { color: #ff0000; }

#dhtmltooltip { position: absolute; width: 150px; border: #888888 1px solid;padding: 3px; background: #222222; color: #dddddd; visibility: hidden; z-index:100; }
</style>
<script type="text/javascript">
var class = new Array();
var progress = new Array();

var recruitTitle = "Recruitment";
var recruitKeyWord = "Closed";
var recruitImagesPerRow = 12;
var linkToRecruitmentPost = " http://sgo.guildportal.com/Guild.aspx?ForumID=1206558&GuildID=250738&TabID=2108295";

class.push (["http://www.axiomfiles.com/Files/250738/assassin1.jpg",
 "Assassin",
 "Open"
]);
class.push (["http://www.axiomfiles.com/Files/250738/barbarian1.jpg",
 "Barbarian",
 "Open”
]);
class.push (["http://www.axiomfiles.com/Files/250738/bearshaman1.jpg",
 "Bear Shaman",
 "Open"
]);
class.push (["http://www.axiomfiles.com/Files/250738/conquerer1.jpg",
 "Conquerer",
 "Open"
]);
class.push (["http://www.axiomfiles.com/Files/250738/darktemplar1.jpg",
 "Dark Templar",
 "Open"
]);
class.push (["http://www.axiomfiles.com/Files/250738/demonologist1.jpg",
 "Demonologist",
 "Open"
]);
class.push (["http://www.axiomfiles.com/Files/250738/hox1.jpg",
 "Herald of Xotli",
 "Open"
]);
class.push (["http://www.axiomfiles.com/Files/250738/necromancer1.jpg",
 "Necromancer",
 "Open"
]);
class.push (["http://www.axiomfiles.com/Files/250738/priestofmitra1.jpg",
 "Priest of Mitra",
 "Open"
]);
class.push (["http://www.axiomfiles.com/Files/250738/ranger1.jpg",
 "Ranger",
 "Open"
]);

class.push (["http://www.axiomfiles.com/Files/250738/soldier1.jpg",
 "Soldier",
 "Open"
]);
class.push (["http://www.axiomfiles.com/Files/250738/tempestofset1.jpg.jpg",
 "Tempest of Set",
 "Open"
]);

   progress.push ([
    ["Thumbnail Image URL"],
    ["Instance Name", "InstanceStatus"],
    ["Instance Boss #1", "Boss#1 Status"],
    ["Instance Boss #2", "Boss#2 Status"],
    ...
    ["Last Instance Boss", "LastBoss Status"]
   ]);

var raidingTitle = "Progression";
var raidingKeyWord = "No";
var bossKilledKeyWord = "Killed";
var raidingImagesPerRow = 5;
var linkToRaidingSite = "http://forums.ageofconan.com/showthread.php?t=130986";


progress.push ([
 ["http://www.axiomfiles.com/Files/250738/kyllikkiscrypt.jpg"],
 ["Kyllikki’s Crypt", "inprogress"],
 ["Champion of the Honorguard", "No"],
 ["Kyllikki", "No"],
]);

progress.push ([
 ["http://www.axiomfiles.com/Files/250738/yakhmarscave.jpg"],
 ["Yakhmar’s Cave", "(inprogress)"],
 ["Yakhmar", "No"],
]);

progress.push ([
 ["http://www.axiomfiles.com/Files/250738/thedragonslair.jpg"],
 ["The Dragon’s Lair", "(inprogress)"],

 ["Vistrix", "No"],
]);
 
progress.push ([
 ["http://www.axiomfiles.com/Files/250738/blackrockcitadel.jpg"],
 ["Black Ring Citadel", "(inprogress)"],
 ["Ahazu-Zagam", "No"]
 ["Incubus and Succubus", "No"]

 ["Seruah","No"]

 [“ChathaCommander of Demons, "No"]

]);
 
progress.push ([
 ["http://www.axiomfiles.com/Files/250738/tothamonsstronghold.jpg"],
 ["Thoth Amon’s Stronghold", "(inprogress)"],
]);
 


var rb = '<a href="' + linkToRecruitmentPost + '">' +recruitTitle + '<br>';
 for (var j=0; j<class.length; j++) {
  rb += "<span =\"ddrivetip('<spanclass=recruitToolTip>";
  rb += class[j][1];
  rb += "</span><br>" + class[j][2];
  rb += "', '', '300');\"=\"hideddrivetip()\"><img src=\"";
  rb += class[j][0] + "\"";
   if (class[j][2] == recruitKeyWord) rb += " class=dim";
  rb += "></span>";
 if ( (j+1)%recruitImagesPerRow == 0 ) rb += "<br>";
 }
 rb += '</a>';


var pb = "<a href=\"" + linkToRaidingSite +"\">" + raidingTitle + "<br>";
 for (var inst=0; inst < progress.length; inst++) {
  pb += "<span=\"ddrivetip('<table><tr><tdclass=raidingToolTip width=200px>";
  pb += progress[inst][1][0] + "</td><td>" +progress[inst][1][1] + "</td></tr>";
  for (var boss=2; boss < (progress[inst].length); boss++) {
   if (progress[inst][boss][1].match(bossKilledKeyWord)) {
    pb += "<tr><td class=killedBoss>" +progress[inst][boss][0] + "</td><td class=killedText>";
   } else {
    pb += "<tr><td class=toKillBoss>" +progress[inst][boss][0] + "</td><td>";
   }
  pb += progress[inst][boss][1] + "</td></tr>";
  }
  pb += "</table>', '', '300');\"=\"hideddrivetip()\"><img src=\"";
  pb += progress[inst][0] + "\"";
   if (progress[inst][1][1].match(raidingKeyWord)) pb += "class=dim";
  pb += "></span>";
   if ( (inst+1)%raidingImagesPerRow == 0 ) pb +="<br>";
 }
 pb += "</a>";
 document.getElementById('recruitBar').innerHTML = rb;
 document.getElementById('raidingBar').innerHTML = pb;
</script>

 

Ciannon, I think everything goes in the Banner area.

I just checked Mottie's test site and it appears it doesn't work in IE, although it works fine with Firefox.

I'll leave it to Mad Mottie to figure it out. He's like a mad genius that just blows my mind with his wild inventions!

EDIT: I tried entering Mottie's example on my paid site, only it gets cut off part way like I exceeded the Banner Area's limit or something.

EDIT2: Ok, apparently it's too big for the Banner Area, but work fine in Firefox in a Freeform/HTML box, like on his test site.