CSS Image rollovers??

[DagGz]

I've just made a site template which has 6 page links on it. I want these to change colour as i mouseover them but i dont want to do it the conventional way. I believe it can be achieved using CSS. I've googled it and cant find any easy to follow answers. This could of course be because it might not actually be easy! nevertheless, i thought id ask you guys to see if you can help.


body {
background-color: #333333;
}
font {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #CCFF00;
}
table {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #CCFF00;
font-size: xx-small;
}


this is my css as it stands at the moment. its just specifying the text colour, size and bg colour. what would i need to include if say i wanted the home button to be a rollover, if the below are the filenames.

home.jpg
homeover.jpg

also would i need to incorporate any additional code in the html document to call this info from the css script?

thanks in advance

[degsy]

You need to explain yourself more clearly.

I want these to change colour as i mouseover them but i dont want to do it the conventional way
What is the conventional way?


what would i need to include if say i wanted the home button to be a rollover, if the below are the filenames.

home.jpg
homeover.jpg

First you mention links and mouseover, now images.

Which do you want?

[DagGz]

i made the template in photoshop. the links to the pages are images. im going to make a rollover state for each of the images and was using home.jpg and homeover.jpg as the examples. im sorry but i thought mouse over and rollover are the same things.

in referance to the "conventional way" i was refering to creating the 2 images and then using the process in dreamweaver to create the rollover. i wanted to replicate what this procedure does but using css.

i hope this clarifies things

[rockboy]

There are various things you can do with CSS hover. Lots of links, examples and sample code at these sites...

http://css.maxdesign.com.au/listamatic/

http://tutorials.alsacreations.com/modelesmenus/

[DagGz]

ive decided to forget about the images themselves and just use text. however, that doesnt want to work for me now either.

when i define the a:hover attribute it works fine when tested. and also when i assign a colour for the a:link attribute. when i define either a:visited or a:active, the hover no longer works. heres the code ive got.


body {
background-color: #333333;
}
font {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #CCFF00;
}
table {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #CCFF00;
font-size: xx-small;
}
a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFF00;
}
a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: B4F10F;
}
a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: B4F10F;
}
a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFF00;
}


any ideas??

[degsy]

You need to put them in the right order
http://www.w3schools.com/css/css_pseudo_classes.asp