I'd like to have one image for the background and then reuse that for any size button with any text on it by just using a CSS class. So, I'd like to have the button, the moused-over and clicked button as images, but then use CSS to apply that to a button so that I can change the text in the HTML (rather than having to recreate the button image everytime the text changes or I need a new button with new text). Also, that'll allow me to change the color of ALL buttons in one place.

I do web development only part time, so a bit of a newbie at the CSS stuff.

1 answer

Ktash 1851
1
point

This is a common thing to do, but you'll want to make sure that your image is big enough to cover all words entirely. Here is a basic code on how to do it, and an explanation of it. This is for 3 separate images, as opposed to a single, sprite image.

HTML

<div id="navigation">
    <a href="link1.html">Home</a>
    <a href="link2.html">About</a>
    ...
</div>

CSS

#navigation a:link, #navigation a:visited {
    display: inline-block; /* So you can set a width and height on the link */
    text-align: center; /* So that the text is still in the middle */
    width: 120px; /* Width of the image */
    height: 25px; /* Height of the image */
    background: transparent url(menu-background.png) scroll no-repeat left top; /* Default image */
}
#navigation a:hover {
    background-image: url(menu-hover-image.png); /* The image while hovered */
}
#navigation a:active {
    background-image: url(menu-click-image.png); /* The image when clicked */
}

Explanation

This is for 3 separate images which have the states default (menu-background.png), hover (menu-hover-image.png), and "clicked" (menu-click-image.png). Now, I put clicked in quotes, because its not quite a click. To do a real click image, you'll need to use javascript, but we'll get there. Basically, you setup the default image, and then, when the user hovers over the link, it swaps it out with the correct one. This won't work in IE6 (for which you'll need javascript again) but in other, modern browsers it will work perfectly fine.

Why do I need JavaScript for a real click?

CSS doesn't have any realy 'clicking' or 'clicked' state, so there is no way to style it for such. What you need to do is setup a click event in javascript, and then add the appropriate class. Or for a mouse down and then mouse up events. But this leads me to...

Why its not worth the hassle for click menu links most of the time

Most of the time, the link will be directing the user away from the page, so the amount of time the clicked image will be displayed will be small (hopefully) and can take more time to load the image at times then it takes to redirect your user. I understand this is not always the case, and if that is true for you, then I would recommend looking into some jQuery plugins. I don't know any myself to do this, but I'd recommend looking through the Menu Plugins to see if there is a good one in there (unless someone else here can recommend a good one).

Answered over 5 years ago by Ktash