css list with multiple backgr. images

[t888eddy]

Hi! I want to make this kind of list with links: link 1 (18, arial, with a background back.jpg when the user points the link with the mouse pointer the background should change in back_1.jpg and the link to be in red) link 2 (16, arial, with a background back_2.jpg when the user points the link with the mouse pointer the background should change in back_3.jpg and the link to be in blue) link 3 (14, arial, with a background back_4.jpg when the user points the link with the mouse pointer the background should change in back_5.jpg and the link to be in white) link 4 (12, arial, with a background back_6.jpg when the user points the link with the mouse pointer the background should change in back_7.jpg and the link to be in yellow) I tried something with rollover images (buttons), but if I want to modify the text I have to modify the whole image. So, how can I do this? Same list, multiple background images, multiple background images when touch the link, multiple format for all links... How can I do it? Thanks in advance and have a nice day!

Edited April 18, 2012 by t888eddy

[eTianbun]

Example:

.link1{font:18px arial; background-image:url('back.jpg')}.link1:hover{background-image:url('back_1.jpg'); color:red}

To make sure all images loads properly when it is hovered, Use Image sprite!

Edited April 19, 2012 by eTianbun