[SOLVED] Menu with changing images

[Andy17]

Dear freaks,

 

 

I am in the process of making a website and I am currently struggling with my menu. I am trying to make a horizontal menu that consists of multiple images that are links (Home, About, Downloads, etc.). I would like each image to change when people hover their mouse over them, but not to the same image. I am making effects with the text I will put on the images, so that's why they cannot be the same.

 

So basically if I have a button with the text "Home" on it, I want the text "Home" to have effects on when the mouse is on top of it. This means that I need different "hover images" for each menu image.

 

I hope that came out somewhat understandable - things are harder to explain than I thought.

 

Anyways, I made it happen with one image, but I was wondering if there is an easy way to make more of these buttons but with different background images (like a line of buttons)?

 

My example (hover mouse over the number):

http://test.jokeheaven.eu/

 

My CSS:

http://test.jokeheaven.eu/style.css

 

Example of what I want (multiple menu images with different effects):

http://www.theflyerwall.co.uk/

 

 

Thank you in advance for your help and I hope that this was all understandable.

[Axeia]

http://www.lightpostcreative.com/image-sprites-tutorial/ ?

Or what exactly are you trying to do..

[Andy17]

That's exactly what I want to do. I have been looking for a tutorial like that. I will try my luck later. Thanks a lot for your help.

[TheFilmGod]

if its a link, just do:

 

a.home {

display: block;

width: 100px;

height: 20px;

background: url(../images/some_image.png) no-repeat;

}

a.home:hover {

background-image: url(../images/some_image_hover.png);

}

 

html:

 

<a class="home"></a>