My first website I built.

on the character selection:
when mouseover the picture, it would be great if it stands out eg.
[INDENT]border/ border color
swap image(low saturation to normal/ outline to normal/ or even, blink the eye)
displacement/ change size[/INDENT]

Might I suggest using it like a sprite sheet, if that isn't too complicated for your class.

 Spoiler

Code:

<style>
.link {
width: 32px;
height: 128px;
cursor: pointer;
}
.link:hover {
opacity: 0.5;
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
}
</style>
<table style="border-collapse: collapse;" align="center" cellpadding="0"><tr>
<td><div class="link" onclick="window.location='/blahblah/'" style="background: url(http://kenthian.webs.com/hisouten.jpg) -0px no-repeat;"></div></td>
<td><div class="link" style="background: url(http://kenthian.webs.com/hisouten.jpg) -32px no-repeat;"></div></td> <!-- you can use the onclick part if you want-->
<td><div class="link" style="background: url(http://kenthian.webs.com/hisouten.jpg) -64px no-repeat;"></div></td>
<td><div class="link" style="background: url(http://kenthian.webs.com/hisouten.jpg) -96px no-repeat;"></div></td>
<td><div class="link" style="background: url(http://kenthian.webs.com/hisouten.jpg) -128px no-repeat;"></div></td>
<td><div class="link" style="background: url(http://kenthian.webs.com/hisouten.jpg) -160px no-repeat;"></div></td>
<td><div class="link" style="background: url(http://kenthian.webs.com/hisouten.jpg) -192px no-repeat;"></div></td>
<td><div class="link" style="background: url(http://kenthian.webs.com/hisouten.jpg) -224px no-repeat;"></div></td>
<td><div class="link" style="background: url(http://kenthian.webs.com/hisouten.jpg) -256px no-repeat;"></div></td>
<td><div class="link" style="background: url(http://kenthian.webs.com/hisouten.jpg) -288px no-repeat;"></div></td>
<td><div class="link" style="background: url(http://kenthian.webs.com/hisouten.jpg) -320px no-repeat;"></div></td>
<td><div class="link" style="background: url(http://kenthian.webs.com/hisouten.jpg) -352px no-repeat;"></div></td>
<td><div class="link" style="background: url(http://kenthian.webs.com/hisouten.jpg) -384px no-repeat;"></div></td>
<td><div class="link" style="background: url(http://kenthian.webs.com/hisouten.jpg) -416px no-repeat;"></div></td>
<td><div class="link" style="background: url(http://kenthian.webs.com/hisouten.jpg) -448px no-repeat;"></div></td>
<td><div class="link" style="background: url(http://kenthian.webs.com/hisouten.jpg) -512px no-repeat;"></div></td>
<td><div class="link" style="background: url(http://kenthian.webs.com/hisouten.jpg) -544px no-repeat;"></div></td>
<td><div class="link" style="background: url(http://kenthian.webs.com/hisouten.jpg) -574px no-repeat;"></div></td>
<td><div class="link" style="background: url(http://kenthian.webs.com/hisouten.jpg) -608px no-repeat;"></div></td>
</tr></table>