Why use and img and empty image?

[Carlos]

In a recent project I've been working on I removed the need of an
empty image, changing the rendered img control with a div. So the
resulting script file looks like this.

(function($){
/* Little trick to remove event bubbling that causes events recursion
*/
var CB = function(e)
{
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
};

$.fn.checkbox = function(options) {
/* IE6 background flicker fix */
try { document.execCommand('BackgroundImageCache', false, true); }
catch (e) {}

/* Default settings */
var settings = {
cls: 'jquery-checkbox', /* checkbox */
/* No need of empty.png */
};

/* Processing settings */
settings = $.extend(settings, options || {});

/* Adds check/uncheck & disable/enable events */
var addEvents = function(object)
{
var checked = object.checked;
var disabled = object.disabled;
var $object = $(object);

if ( object.stateInterval )
clearInterval(object.stateInterval);

object.stateInterval = setInterval(
function()
{
if ( object.disabled != disabled )
$object.trigger( (disabled = !!object.disabled) ? 'disable' :
'enable');
if ( object.checked != checked )
$object.trigger( (checked = !!object.checked) ? 'check' :
'uncheck');
},
10 /* in miliseconds. Low numbers this can decrease performance on
slow computers, high will increase responce time */
);
return $object;
};
//try { console.log(this); } catch(e) {}

/* Wrapping all passed elements */
return this.each(function()
{
var ch = this; /* Reference to DOM Element*/
var $ch = addEvents(ch); /* Adds custom events and returns, jQuery
enclosed object */

/* Removing wrapper if already applied */
if (ch.wrapper) ch.wrapper.remove();

/* Creating wrapper for checkbox and assigning "hover" event */
/* Changed img with a div. */
ch.wrapper = $('<span class="' + settings.cls + '"><span
class="mark"><div/></span></span>');
ch.wrapperInner = ch.wrapper.children('span:eq(0)');
ch.wrapper.hover(
function(e) { ch.wrapperInner.addClass(settings.cls + '-
hover');CB(e); },
function(e) { ch.wrapperInner.removeClass(settings.cls + '-
hover');CB(e); }
);

/* Wrapping checkbox */
$ch.css({position: 'absolute', zIndex: -1, visibility:
'hidden'}).after(ch.wrapper);

/* Ttying to find "our" label */
var label = false;
if ($ch.attr('id'))
{
label = $('label[for='+$ch.attr('id')+']');
if (!label.length) label = false;
}
if (!label)
{
/* Trying to utilize "closest()" from jQuery 1.3+ */
label = $ch.closest ? $ch.closest('label') :
$ch.parents('label:eq(0)');
if (!label.length) label = false;
}
/* Labe found, applying event hanlers */
if (label)
{
label.hover(
function(e) { ch.wrapper.trigger('mouseover', [e]); },
function(e) { ch.wrapper.trigger('mouseout', [e]); }
);
label.click(function(e) { $ch.trigger('click',[e]); CB(e); return
false;});
}
ch.wrapper.click(function(e) { $ch.trigger('click',[e]); CB(e);
return false;});
$ch.click(function(e) { CB(e); });
$ch.bind('disable', function()
{ ch.wrapperInner.addClass(settings.cls+'-disabled');}).bind('enable',
function() { ch.wrapperInner.removeClass(settings.cls+'-disabled');});
$ch.bind('check', function() { ch.wrapper.addClass(settings.cls+'-
checked' );}).bind('uncheck', function()
{ ch.wrapper.removeClass(settings.cls+'-checked' );});

/* Disable image drag-n-drop for IE */
$('img', ch.wrapper).bind('dragstart', function () {return
false;}).bind('mousedown', function () {return false;});

/* Firefox antiselection hack */
if ( window.getSelection )
ch.wrapper.css('MozUserSelect', 'none');

/* Applying checkbox state */
if ( ch.checked )
ch.wrapper.addClass(settings.cls + '-checked');
if ( ch.disabled )
ch.wrapperInner.addClass(settings.cls + '-disabled');
});
}
})(jQuery);

A sample css will be:

.jquery-checkbox { display: inline; font-size: 20px; line-height:
20px; cursor: pointer; cursor: hand; }
.jquery-checkbox .mark { display: inline; }
.jquery-checkbox div { vertical-align: middle; width: 60px; height:
20px; }
.jquery-checkbox div { background: transparent url(Images/icons/
UnCheck.png) no-repeat; }
.jquery-checkbox div { background-position: 0px 0px; }
.jquery-checkbox-hover div {}
.jquery-checkbox-checked div {background: transparent url(Images/icons/
Check.png) no-repeat; }
.jquery-checkbox-checked .jquery-checkbox-hover div {}
.jquery-checkbox-disabled div {cursor:default; filter:
alpha(opacity=50); opacity:0.5;}
.jquery-checkbox-checked .jquery-checkbox-disabled div {filter:
alpha(opacity=50); opacity:0.5;}

I think this way it's easier to use your excelent plugin.

Any opinions?