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":
[slide]http://coding.extremecoderz.com/images/buttonSprite.png[/slide]
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:
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:
Simple eh 
Live Example: http://coding.extremecoderz.com/simpleMouseOver.html
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":
[slide]http://coding.extremecoderz.com/images/buttonSprite.png[/slide]
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:
Code:
#myButton {
background: url(images/buttonSprite.png) no-repeat;
height: 50px;
width: 200px;
}
#myButton:hover { background-position: 0px -51px }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:
Code:
<div ID="myButton"></div>Live Example: http://coding.extremecoderz.com/simpleMouseOver.html
