[b]Код:[/b]
<style type="text/css">
#button-spoiler {background-image:url('http://forumupload.ru/uploads/0000/12/13/488-1.gif'); padding:0; line-height:0; background-position:center; background-repeat:no-repeat}
</style>
<script>
function addSpoiler(str,from,internal){
var pos=0,pos2=0,newpos=0
if((pos=str.indexOf("[spoiler]",from))==-1) return str;
if((pos2=str.indexOf("[/spoiler]"),pos+9)==-1) return str;
newpos=str.indexOf("[spoiler]",pos+9)
if(newpos<pos2 && newpos!=-1) str=addSpoiler(str,pos+9,true)
if((pos2=str.indexOf("[/spoiler]",pos+9))==-1) return str;
str=str.substring(0,pos)+makeSpoiler(str.substring(pos+9,pos2))+str.substring(pos2+10,str.length)
if( str.indexOf("[spoiler]")!=-1 && internal==false) str=addSpoiler(str,0,false)
return str}

function makeSpoiler(txt){
txt="<div class=quote-box style='padding:1px'><cite style='width:100%'>Спойлер <input style='width:60px;margin-left:70%;font-size:10px;' type='button' value='Показать' onclick='hideSpoiler(this)'></cite><blockquote style='display:none'>"+txt+"</blockquote></div>"
return txt}

function hideSpoiler(sp){
spoiler=sp.parentNode.parentNode.getElementsByTagName("blockquote")[0]
if(spoiler.style.display=='none'){
spoiler.style.display='inline'
sp.value='Скрыть'}
else{
spoiler.style.display='none'
sp.value='Показать'}}

if(document.URL.indexOf("viewtopic.php")!=-1){
elm=document.getElementById("pun-main").getElementsByTagName("div")
for(x in elm) if(elm[x].className=="post-content"){
var post=elm[x]
post.innerHTML=addSpoiler(post.innerHTML,0,false)}}
if(form=document.getElementById("form-buttons"))
form.getElementsByTagName("tr")[0].insertCell(19).innerHTML="<img  id=\"button-spoiler\" title=\"Спойлер\" onclick=\"bbcode('[spoiler]','[/spoiler]')\" src=\"/i/blank.gif\" />"
</script>

Код:
<table><tr>
<td onclick="return changeVisibility('mycolor', this)"><img src="http://forum.mybb.ru/i/color_swatch.png" alt="Мои цвета" /></td></tr></table>
<div class="container" id="mycolor" style="display:none; width:200px">
	<table cellspacing="0">
<tr>
<td style="background-color:indigo" onclick="bbcode('[color=indigo]', '[/color]'); return changeVisibility('mycolor', this)"></td>
	<td style="background-color:thistle" Height="15px" onclick="bbcode('[color=thistle]', '[/color]'); return changeVisibility('mycolor', this)"></td>
	<td style="background-color:tomato" onclick="bbcode('[color=tomato]', '[/color]'); return changeVisibility('mycolor', this)"></td>
	<td style="background-color:yellowgreen" onclick="bbcode('[color=yellowgreen]', '[/color]'); return changeVisibility('mycolor', this)"></td>
	<td style="background-color:lightslategray" onclick="bbcode('[color=lightslategray]', '[/color]'); return changeVisibility('mycolor', this)"></td>
	<td style="background-color:lightpink" onclick="bbcode('[color=lightpink]', '[/color]'); return changeVisibility('mycolor', this)"></td>
	<td style="background-color:goldenrod" onclick="bbcode('[color=goldenrod]', '[/color]'); return changeVisibility('mycolor', this)"></td>
	<td style="background-color:blue" onclick="bbcode('[color=blue]', '[/color]'); return changeVisibility('mycolor', this)"></td>
	<td style="background-color:silver" onclick="bbcode('[color=silver]', '[/color]'); return changeVisibility('mycolor', this)"></td>
	<td style="background-color:aquamarine" onclick="bbcode('[color=aquamarine]', '[/color]'); return changeVisibility('mycolor', this)"></td>
</tr>
	</table>
	</div>