[html/css] Mouse Hover Button using Sprites

[jayfella]

In this small example, i will be showing you how to create a button with a mouseover effect. This means when you position your mouse over the button, the image will change.

In this example we will be using something called a sprite; an image containing both the regular and mouse-over image.

So.

Let me explain a basic fundamental of CSS before i begin. It is extremely important you understand this if you wish to create valid code, and i see this so many times its just not funny anymore.

There are many ways to "reference" CSS, but there are 2 very common ways; A "class" identifier or an "ID" identifier. A class can be re-used as many times as you like. An ID cannot. It is a unique identifier. You cannot re-use ID's. Doing so will not validate.

Ok. So.

Here is the image we will be using; a very simple example, just to explain the fundamentals of using "hover":



Note how both the regular and hover images are housed in the same image. So why do it like this? For 2 key reasons:

1) Reduced HTTP requests. Every time you request a file, it gives your server more work to do. As a coder, its your job to ensure that you do this as little possible. A bad coder could code a skin with maybe 80 HTTP requests for the various images. A good coder could have maybe reduced 75% of those requests.
2) Seamless, flickerless buttons. If we were not using a sprite, the "mouseover" image would not be "downloaded" until we request it (putting your mouse over the button). On a slow connection the delay is clearly visible. We dont want that. We know better

So. The code for this is very simple and understandable, but i shall explain each part to ensure everything is understood:

First we shall start with the CSS:

#myButton {
    background: url(images/buttonSprite.png) no-repeat;
    height: 50px;
    width: 200px;
    }

#myButton:hover { background-position: 0px -51px }

Ok. Firstly, the # means it is a unique ID, not a class. If we were going to re-use this code, we could simply exchange the # for a full-stop.
The #myButton ID simply states the location of the image, followed by the height and width of the button, NOT the entire image(sprite).

Secondly we see #myButton:hover - This CSS will be called when the user hovers their mouse over the button. Here we see only one property; background-position. We are only going to modify the vertical positioning of the image. The first number (0px) is the horizontal position. We want that to remain 0px. The second number is the vertical position. We want that to change when the user hovers their cursor over the button. And we want it to move up 51px to display the second image in the sprite (the lower image).

Ok. So. Now for the HTML. We did all the hard work in the CSS, so now we can reap the rewards:

<div ID="myButton"></div>

Simple eh

Live Example: http://coding.extremecoderz.com/simpleMouseOver.html

jayfella Reviewed by jayfella on 15th Jun 2010. [html/css] Mouse Hover Button using Sprites In this small example, i will be showing you how to create a button with a mouseover effect. This means when you position your mouse over the button, the image will change. In this example we will be using something called a sprite; an image containing both the regular and mouse-over image. So. Let me explain a basic fundamental of CSS before i begin. It is extremely important you understand this if you wish to create valid code, and i see this so many times its just not funny anymore. Rating: 5

[Amz]

Nice tutorial mate this will be known as the first useful thread of the Development Area.

[Rapid S]

Nice Info .. Brother Thanks

[Nitish]

live example link ain't working

[jayfella]

live example works perfect m8 - its cross-platform valid.

[CM]

Kickass tutorial Jay. Keep 'em comin'!

jayfella is in your box. Eating your cookiez.

[Nitish]

now its working.. i mean the url wasn't working..leave it anyways..good work