$('.demo').hide();

var BUTTONS = 3;
var STYLE =
  ".tick     { height: 48px; width: 48px; float: left;}\n" +
  ".tick-off { background-image: url(http://drnicwilliams.com/wp-content/uploads/2006/08/tick-grey.png); }\n" +
  ".tick-on  { background-image: url(http://drnicwilliams.com/wp-content/uploads/2006/08/tick-blue.png); }\n" +
  ".announcement  { height: 48px; font-size: 48px; font-family: serif; margin: 0px; padding; 0px; }\n";

document.write("<style>" + STYLE + "</style>");

document.write("<div>");
for (var i=0; i < BUTTONS; i++) {
  document.write('<div class="tick tick-off" id="button' + (i+1) + '">&nbsp;</div>');
}
document.write("<div>");
document.write('<p id="button-ann" class="announcement"></p>');

$(".tick").hover(function() {
    $(this).removeClass("tick-off").addClass("tick-on").announceButton(this);                                   
}, function() {
    $(this).removeClass("tick-on").addClass("tick-off");
});

$.fn.announceButton = function(a) {
  document.getElementById('button-ann').innerHTML = this.get(0).id; // only announce the first button; else use this.each
  return this;
};