CSS controlled images & buttons - revisited

In my last article on the subject I ended up with something I liked. Now I've got something I like even more. See it in action! Now, code, reveal yourself!

// HTML header"text/javascript">/* Convenience function for the multiple class system in CSS to switch button images. */function setBtnEvent(btn, event){var classes = btn.className.split(' ');classes[classes.length-1] = event; btn.className = classes.join(' ');} // HTML body "image"    title="A little button!"    class="btnBase btnDerived idle"    onmouseover="javascript: setBtnEvent(this, 'over');"    onmouseout="javascript: setBtnEvent(this, 'idle');"    onmousedown="javascript: setBtnEvent(this, 'click');"    onclick="document.location.href='.'; return false;"    src="transp_pixel.gif" />  // CSS .btnBase{cursor: pointer;border: none;}.btnDerived{background: url(idle.gif) center center;width: 91px;height: 40px;}.btnDerived.over{background: url(over.gif) center center;}.btnDerived.click{background: url(click.gif) center center;}

I implemented an inheritance like behaviour for classes by using multiple classes and multiple selectors to create a btnBase class for all buttons. I then made a small &#106avascript function that takes care of the class changing for me, since I want to keep the base class and the real class but change the behaviour class (the last one). This makes a strong coupling between the markup and stylesheet, but since it's part of a system then I think it's ok. I guess you could implement functions per event so you don't get typographical errors like "ovre" instead of "over".<br/><br/>Of course, this does <em>not</em> work in IE if you have more than one different button because of a CSS parsing bug. It just uses the last multiple selector definition...<br/><br/>Another flaw is that it doesn't preload images which causes flickering. This can be solved with <a href="http://www.alistapart.com/articles/sprites">sprites</a>. If someone knows of a better way, let me know.<div> </div>

Discussion