I don't think there are any reference books on the subject. Whenever I need to customize something, I talk to a web developer (who I found on www.freelancer.com) and describe to him how I want it customized and he usually can take care of it for me. I will usually Google terms like "css example nice html table" which leads to links like this:
http://www.freshdesignweb.com/free-css-tables.html
Then I send these links to my developer and he can usually give me a CSS file or script to add to the SSIWeb Headers (in Survey Settings --> Headers and Footers --> Headers).
Try to avoid HTML changes, because that usually requires free format questions. CSS/jQuery/Javascript are best because you can usually just add them to the header (and sometimes need to give your images a class name).
For example, here's a script that we made just last week from him that makes it so that when you click on an image in a MaxDiff, it also selects the radio button below it. (We used this inside a "Best only" MaxDiff using "Style 3". It is new so I haven't tested to see if it works in other scenarios, but I plan to adapt it to others too when we have time)
Step 1: Each image needs to have "class=img4" in the html tag (e.g., <img src="[%GraphicsPath()%]image.jpg" class="img4" alt="" border="0">).
Step 2: The following goes in the SSIWeb headers.
-------
<style type="text/css">
.img4{
height:100px;
vertical-align:middle;
margin-right:5px;
cursor: pointer;
}
</style>
<script type="text/javascript" src="/[projectfolder]/graphics/system/script.js"></script>
-------
Step 3: The following is all inside script.js in the project's system folder.
-------
$(document).ready(function(){
$(".img4").click(function(){
var index = $(this).parent().parent().index()+1;
$(this).parent().parent().parent().siblings().children().children('.graphical_select').removeClass('radioboxselected');
$(this).parent().parent().parent().siblings().children().children('.graphical_select').addClass('radiobox');
$(this).parent().parent().parent().siblings().children().children('input[type=radio]').attr('checked',false);
$(this).parent().parent().parent().siblings().children().eq(index-1).children('.graphical_select').removeClass('radiobox');
$(this).parent().parent().parent().siblings().children().eq(index-1).children('.graphical_select').addClass('radioboxselected');
$(this).parent().parent().parent().siblings().children().eq(index-1).children('input[type=radio]').attr('checked',true);
});
$(".img4").mouseenter(function(){
var index = $(this).parent().parent().index()+1;
$(this).parent().parent().parent().siblings().children().removeClass('highlight');
$(this).parent().parent().parent().siblings().children().eq(index-1).addClass('highlight');
});
$(".img4").mouseleave(function(){
var index = $(this).parent().parent().index()+1;
$(this).parent().parent().parent().siblings().children().removeClass('highlight');
});
});
