Post by Smangii on Jul 25, 2007 1:56:04 GMT -5
One of those funky roll over legends, just scroll over the box to see what color that group represents
Live Preview: click here!
You can put this anywhere, really. Main footers is preferred if you want it right below the info center
Live Preview: click here!
You can put this anywhere, really. Main footers is preferred if you want it right below the info center
<script type="text/javascript">
<!--
/* Smangii's "Roll-Me-Over" User Legend - http://smangii.proboards78.com
Do not Repost without permission */
document.write('<table width="200px"><tr><td align="left" width="100%"><div id="theL"><b>User Legend:</b></div></td></tr><tr><td align="left" width="100%"><div id="theboxes"></div></td></tr></table>')
var boxwidth = '15px'; // width of the box buttons
var boxheight = '15px'; // height of the box buttons
var bordwidth = '2'; // Width between each button
var bgcolor = 'FFFFFF'; // Color of your background
var groups = [
// Edit below as such: ['Title of the Group','Color of the Group']
['Owner','FF0000'],
['Administrator','00FF00'],
['Global Moderator','0000FF'],
['Moderator','8000FF'],
['Designer','FF3C14'],
['Coder','862D59'],
['Veteran','FF0080'],
['Premium Member','009966'],
['Registered Member','003399'],
['Banned Member','000000'] // No Comma at the end of the last line!
];
// Do not touch anything below!
for(a=0;a<groups.length;a++){
document.getElementById("theboxes").innerHTML += '<div style="width: '+boxwidth+'; height: '+boxheight+'; border: '+bordwidth+'px solid #'+bgcolor+'; float: left; background-color: #'+groups[a][1]+';" onmouseover="showL(\'<font color='+groups[a][1]+'>'+groups[a][0]+'</font>\');" onmouseout="hideL()"></div>';
}
function showL(name){document.getElementById('theL').innerHTML = '<b>'+name+'</b>';}
function hideL(){document.getElementById('theL').innerHTML = '<b>User Legend:</b>';}
//-->
</script>