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

CSS controlled images & buttons - revisited

Sign in to follow this  
Seriema

209 views

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

"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".

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  


2 Comments


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.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!