Okay, it's done. It's horribly code inefficient, it would be best to have these classes in a style sheet and such. Having multiple instances of these on a page is bad.
Anywho, the url('') under .spoilershow and .spoilerhide would need to be changed for whatever images you want to use. Also, the width and height specifications need to match that of the image that you want to use.
Code:
<style type="text/css">
.spoiler
{
margin: 0px;
padding: 0px;
width: 23px;
height: 20px;
font-size: 10px;
text-indent: -1000em;
border: 0;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
}
.spoilershow
{
background: transparent url('http://www.ffnet.org/forum/firmament/statusicon/forum_new.gif') no-repeat center top;
}
.spoilerhide
{
background: transparent url('http://www.ffnet.org/forum/firmament/statusicon/forum_old.gif') no-repeat center top;
}
</style>
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<b>Content Hidden!</b> <input value="Show" class="spoiler spoilershow" onclick="if(this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != 'inline')
{ this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'inline'; this.innerText = ''; this.className='spoiler spoilershow'; }
else
{ this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.className='spoiler spoilerhide'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset; padding: 6px;">
<div class="spoiler" style="display: none;">{param}</div>
</div>
</div>
See the post above to see it in use. Try [bspoiler] to try it out yourself.