on hoover, show image and change color

[Acternaweb]

I want to "add" an image on a hoover, can anyone help.

Currently I have:

A.leftnav:link { color: #003366; font-size: 12px; font-weight: 600 }
A.leftnav:active { color: #003366; font-size: 12px; font-weight: 600 }
A.leftnav:visited { color: #003366; font-size: 12px; font-weight: 600 }
A.leftnav:hover { color: #ff6600; font-size: 12px; font-weight: 600 } <-- want image and color change here.

Thanks,

[MWpro]

The only way to add images on hover using CSS would be to use a background image; to do this you would have to set the "a" as display: block; and you would probably want to set a width and height. The background declaration would be as follows:

background: #color url(image.gif) no-repeat;

Hope that's what you were asking, if you have a more specific question, feel free to ask.

[Acternaweb]

Nope that isn't it, it just put an image in the backgroun in the top corner.

I have seen this many times, but now that I want to see how it is done, I can't find it.

When you rollover a link, and image, usally an arrow, appears. The link is text based.

Almost like a decoration, but it is an image.

Thanks,

[DrDoc]

usally an arrow, appears

That is usually because the links are formatted as a list.
But, it can still be done with a background image. You just need to create the arrow, give the link some padding, and then position the background image. :)

[Acternaweb]

I have this so far and it nearly works, so I think. I need some help positioning the arrow though please.

A.leftnav:hover { color: #ff6600; font-size: 12px; font-weight: 600;
background: url("../images/arrow2.gif") top left no-repeat;}

[DrDoc]

Change "top left" to "left center"?

[Acternaweb]

Thanks but changing left top to left center didn't do anything. The image (arrow) is at the first letter of the link. Is there a way to force it over a few pixels to the left? I tried playing with the padding and margins for the column but that didn't work