Ruined My Life

CSS Image Rollover Effects

Note: This is a technique to develop CSS Image Rollovers, however it isn’t the most effective nor correct, for a more indepth, correct technique please use the following to create CSS Image Rollovers.

So I’ve been working on a layout for a website a couple of guys and I are putting together to sell independent games online with. I, myself tend to try and stick with XHTML when designing a site. I’ve heard of people creating Image Rollovers using CSS, and decided to try and figure this out myself, and what do you know, I suceeded! Good bye days of using JavaScript to complete such a feature, and hello my good friend Cascading Style Sheets.

The process for creating image rollovers in CSS is simple, and I’m gonna throw the code and technique in here so all who want to see can. If there are any questions drop a comment and I’ll see what I can do for you.

Cascading Style Sheet (CSS) Image Rollover Code

/* This is the Default Button */
div#button a{
font-family: Arial, Helvetica, Verdana;
font-size: 12px;
color: black;
text-align: center;
width: 100px;
height: 20px;
background-image:url(images/button1.jpg);
background-repeat: no-repeat;
}

/* This is the Highlighted Button */
div#button a:hover, div#button a.current{
background-image:url(images/button2.jpg);
color: black;
}

Pop the above code in your style sheet. In this case, create a DIV with the name of “button”. Inside of the DIV named button you will want to put each element you want to have an Image Rollover on inside of an anchor, you know the good ol “a href” tag. Once that’s done, tweak the CSS to your likings, make sure you change the image names to reflect what you are doing, and you’ll be good to go.

Popularity: 21% [?]

Share This