Character Powers in MP

[Wormopolis]

browsers tested: IE, FF, and Chrome
placement: global footer

this is an admin editable code that assigns character names to each user along with a list of powers that popup next to the character name on hover. CSS examples included



<style type="text/css">
.powersTable {border: #0044FF 1 px solid; background-color: #222222; width:80%; padding: 1px;}
.powersTableHeader {background-color: #333333; font-size:12px; font-weight:bold; color: #999900;}
.powersTableEntry {font-weight:bold; color: #FFFFDD;}
.powersBox {border: #00FF44 2px solid; background-color:#222222; color: #FF2200; padding: 2px;}
</style>

<script type="text/javascript">
<!--
//  Character Powers in MP
//  v1.0
//  by Wormopolis - www.wormocodes.com
//  idea by charoum
//  keep header intact - do not repost

var characterPowerUserArray=new Array();
//  EDIT the array below
characterPowerUserArray['admin']=[
['Superman','flight,speed,strength,xray vision,heat vision,invulnerability,freeze breath'],
['Flash','superspeed,time travel,vibrate molecules'],
['Wolverine','enhanced senses,regeneration,adamantium skeleton,retractable claws']
];
characterPowerUserArray['jahman']=[
['Green Lantern','flight,power ring constructs,shields'],
['Captain Marvel','flight,speed,strength,invulnerability,magic lightning'],
['Iron Man','powersuit,flight,various weapons,computer control,omni beam']
];
characterPowerUserArray['netmaster']=[
['Hulk','super strength,invulnerability,healing,jump,rage'],
['Batman','detective,intelligence,strategy,vast resources,body armor,various tools and vehicles,martial arts'],
['Spiderman','enhanced reflexes,climb walls,webshooters,intelligence,precognition']
];

// ---------------------


var CPtableTitle="Characters:";

//  no need to edit below

function getOffsetLeft(obj) {
 if (obj.offsetParent) return (obj.offsetLeft + getOffsetLeft(obj.offsetParent));
 else return 0;
}
function getOffsetTop(obj) {
 if (obj.offsetParent) return (obj.offsetTop + getOffsetTop(obj.offsetParent));
 else return 0;
}
function showPowers(chr) {
 var powers=chr.nextSibling.value.split(',');
 document.getElementById('powersBox').innerHTML='';
 for (pp=0;pp<powers.length;pp++) document.getElementById('powersBox').innerHTML+=powers[pp]+'<br>';
 var getLeft=getOffsetLeft(chr)+chr.offsetWidth+10;
 var getTop=getOffsetTop(chr);
 document.getElementById('powersBox').style.position='absolute';
 document.getElementById('powersBox').style.left=getLeft;
 document.getElementById('powersBox').style.top=getTop;
 document.getElementById('powersBox').style.display='';
}
function hidePowers() {   document.getElementById('powersBox').style.display='none'; }

document.write('<div style="display:none" id="powersBox" class="powersBox"></div>');
for (td=document.getElementsByTagName('td'), tt=0; tt<td.length; tt++) {
 if (td[tt].width=='20%' && td[tt].vAlign=='top' && td[tt].className.match(/windowbg/) && td[tt].innerHTML.match(/action=viewprofile/)) {
   var mpname=td[tt].getElementsByTagName('b')[0];
   var mpuname=mpname.getElementsByTagName('a')[0].href.split(/user=/)[1];
   if (characterPowerUserArray[mpuname]) {
     var cptable='<br><br><table align="center" class="powersTable"><tr><td align="center" class="powersTableHeader">'+ CPtableTitle + '</td></tr>';
     for (cc=0; cc<characterPowerUserArray[mpuname].length; cc++) {
       cptable+='<tr><td class="powersTableEntry"><span onmouseover="showPowers(this)" onmouseout="hidePowers()">' + characterPowerUserArray[mpuname][cc][0] + '</span><input type="hidden" value="' + characterPowerUserArray[mpuname][cc][1] + '"></td></tr>';
     }
     cptable+='</table>';
     td[tt].innerHTML+=cptable;
   }
 }
}


//-->
</script>