// HTML header"text/javascript"</span>><br><span class="cpp-comment">/* Convenience function for the multiple class system in CSS to switch button images. */</span><br>function setBtnEvent(btn, event)<br>{<br>var classes = btn.className.split(' ');<br>classes[classes.length-<span class="cpp-number">1</span>] = event; <br>btn.className = classes.join(' ');<br>} <br>// 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 javascript 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>
