33 Votes

Mouseover buttons using CSS without reloading

Tutorial by SmartUser | 2012-06-15 at 20:09

Different states of a button such as the normal state and the mouseover state are often implemented with JavaScript: We have two images and depending on the state of the button, one of the images loaded, controlled by JavaScript.

By using this solution, there are three nasty things we have to consider: Loading the buttons takes a bit, it gives a small loading break, we are loading two images separately, which are a lot of unnecessary HTTP requests to the server and some users have disabled JavaScript and see nothing of our effort.

In this tutorial, I want to show you a trick, how we get the same result with a single image and CSS without JavaScript, and therefore leave all the problems behind us.

The principle

The principle is demonstrated in this illustration:

Our Image:       Normal Button:       Mouseover:
 
-------                                 -------
--ABC--                                 --ABC--
-------                                 -------
-------          XX-------XX          XX-------XX
--DEF--          XX--ABC--XX          XX--DEF--XX
-------          XX-------XX          XX-------XX
                   -------
                   --DEF--
                   -------

On the left, we can see our image we want to use as background for our button. In the normal state, "ABC" can be seen, in the hover state "DEF" should stand on our button. In our image, we simply set both button states under each other on one image.

In the middle, we can finally see our normal button. The trick is, that the button is smaller than the image. So, only the upper side with the "ABC" is visible on our button. The rest is hidden. The edges of our buttons are marked with "XX".

In the MouseOver state, we move the image up, so that the other side of the image will be invisible. Between the edges marked with "XX", now the "DEF" can be seen clearly and the upper part of the image is hidden.

The CSS

If we translate these ideas into CSS, we get:

#buttonx {
  background: url("pic.png") no-repeat 0px 0px;
  height: 25px;
  width: 100px;
  padding: 0;
  margin: 0;
}
 
#buttonx:hover {
  background-position: 0px -25px;
}

First, we define our button, here we call it "buttonx" with a size of 25 x 100 pixels. As a background image, we define "pic.png" and set the background-position to "0px 0px". That means, that as the background the upper area of "pic.png" is used, which can be seen at the top left from the coordinates 0/0. Everything else is cut off. And exactly in this corner, the image, we want to use as normal button state, should be placed. 

Next, we define a CSS rule for the hover state, that is, when the mouse moves over the button. Here we appoint a different background-position namely "0px -25px". This indicates, when moving the mouse over the area of ??the picture, the frame of the image 25 pixels below the top will be shown. And that is where we should have placed the image for the hover state on our image.

Of course, these are only examples. The picture for the origin button can just as well be placed in a position of "127px 27px" and the button can also have a different size. It's just to make sure that the sizes and details have to fit together.

Other Considerations

This procedure is called the use of CSS sprites. Theoretically, we can now pack all single images of our website into a large image and then we can always use the properties in background-position for each element of our website, to show exactly the part of the large image, in which the current element has its equivalent.

With this, the website is only downloading one image once, which is then saved in the browser cache, and can be repeatedly used. This is much more efficient than a query each time to download a variety of images with an equally large number of HTTP requests.

ReplyPositiveNegative

About the Author

AvatarThe author has not added a profile short description yet.
Show Profile

 

Related Topics

HTML: Use Button as Link

Question | 3 Answers

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.

Participate

Ask your own question or write your own article on askingbox.com. That’s how it’s done.