This is a little helper for converting hands to html. Sites like weaktight can do this, but they always link to their own images for suits etc, and I prefer to use my own. I'm happy for anyone to use it, and if you need it to do a little more, just leave a message on the blog and I'll see what I can do.

You need to enter the hand using TwoPlusTwo format (weaktight or the 2p2 site can do this for you).

It then changes the following;

strips the 'converted by' text (probably against the TOS of the original hand convertor tho!)
changes [color:#xxx] to <span style='color:#xxx'> for the coloured text
changes [b] to <span style='font-weight:bold'> for bold text
changes [i] to <span style='font-style:italic'> for bold text
Note that it doesn't add linebreaks, as my blog does that automatically - I could add it though

If you don't enter a title it encloses the hand with <div class='handhistory'>...</div> so that you can apply a style to the whole hand (ie my blog puts the hand in a box). The style comes from your css file (normally style.css), using for example;

.handhistory
{
border-width: 4px;
border-style: double;
border-color: #aaa;
margin:20px;
padding:20px;
}

If you do enter a title then it's a bit more complicated - it encloses the hand in <div class='handhistory2'> note the style is called handhistory2 this time, this is because we're making it hidden until someone clicks on the title - that means you need to add an extra line to the style, so it's more like



.handhistory
{
border-width: 4px;
border-style: double;
border-color: #aaa;
margin:20px;
padding:20px;
visibility:hidden; ADD THIS LINE!
}

It also puts it some code that looks like;

<ul class='collapsibleMenu'>
<li> <a onclick="toggle(this.parentNode.getElementsByTagName('div')[0])" href="javascript: void(0);">

If you add the following javascript function to your page;

<script type="text/javascript">
function toggle(el) {
  //set the class to hide or show based on what it is right now
  if (el.style.visibility != "visible")
    {
      el.style.visibility = "visible";
      el.style.display = "block";
    }
    else
    {
      el.style.visibility = "hidden";
      el.style.display = "none";
    }
}
</script>


then that means the hand shows just as the title until the user clicks on it and unhides the rest of the hand...