Jump to content
  • Advertisement
Sign in to follow this  
  • entries
  • comments
  • views

CSS controlled images & buttons - revisited

Sign in to follow this  


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

// HTML body

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

cursor: pointer;
border: none;

background: url(idle.gif) center center;
width: 91px;
height: 40px;
background: url(over.gif) center center;
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".

Of course, this does not 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...

Another flaw is that it doesn't preload images which causes flickering. This can be solved with sprites. If someone knows of a better way, let me know.
Sign in to follow this  


Recommended Comments

lol... I have Drupal on seriema.net! :P Currently I'm using my personal space to play around with it (you need to know the secret link!). But the code in the post I developed for work.

Share this comment

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Advertisement

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!