May 8, 2013 19:35:22 GMT -5 Preview: 



Same as the original for v4 (and honestly, that one works too). This one is just edited a little bit and easier to add into layout templates.

Add this part wherever you want the legend to show. This can be in your layout templates (like the Info Center) or in HTML for side tables, or in any headers/footers.


<div id="thenames"></div><div id="theboxes"></div>

And add this code to your global footers, and edit the properties to however you want!


<script type="text/javascript">
/*
Smangii's "Roll-Me-Over" User Legend for v5
This legend will appear wherever this line of code is:
<div id="thenames"></div><div id="theboxes"></div>
*/

var legendname = "User Legend:"; // name of the legend
var boxwidth = "10px"; // width of the boxes
var boxheight = "20px"; // height of the boxes
var boxspace = "1px"; // space between the boxes
var namespace = "5px"; // space between the names and the boxes

// Edit each group as: ["Group title","Group color"]
var groups = [
["Owner","3366FF"],
["Administrator","CC33FF"],
["Global Moderator","FF3366"],
["Moderator","FF6633"],
["Premium Member","66CC99"],
["Registered Member","33CCFF"],
["Banned Member","ADAD00"] // No Comma on last line!
];
// below, you change "bold" to "normal" if you prefer
document.getElementById("thenames").style.fontWeight = "bold";

for(a=0;a<groups.length;a++){
document.getElementById("theboxes").innerHTML += '<div style="margin: '+namespace+' '+boxspace+' 0 0; width: '+boxwidth+'; height: '+boxheight+'; display: inline-block; background-color: #'+groups[a][1]+';" onmouseover="showL(\'<font color='+groups[a][1]+'>'+groups[a][0]+'</font>\');" onmouseout="hideL()"></div>';
}
document.getElementById("thenames").innerHTML = legendname;
function showL(name){document.getElementById("thenames").innerHTML = name;}
function hideL(){document.getElementById("thenames").innerHTML = legendname;}
//-->
</script>

If you need help editing anything let me know by replying.