Hi Guys,
I was hoping someone could point me in the right direction, I'm currently using javascript for an image hover effect, it's just effectively an replacement image on hover, however, I would quite like to do it in CSS.

You can find it online at http://broadcastforensics.com/newsite/index.php
It's the home/clients/about/contact menu, I can set it up so a single arrow appears in the background - this is using PNG's in a background however which is uncompatible with IE6 and below (meh!)

I would like it so a different arrow appears for each, I have searched online but can't seem to find a CSS image replacement function?

Thanks in advance if you can help.
Andy

Short tutorial:
Step 1:
Put the images together in one image, under each other is probably best.
Then go to your menu and define the style something like this:

.menu a {
	background: #fff url(images/background.jpg) no-repeat 0px 0px;			/* Replacement color / Path to the combined image / Non repeating / Get the 'first' image */
	height: 100px; 											/* The height of 'one' image */
}
.menu a:hover {
	background-image: #fff url(images/background.jpg) no-repeat 100px 0px;	/* Replacement color / Same combined image / Non repeating / Make sure we get the 'second' image this time
	height: 100px;											/* Still the height of 'one' image */
}

I'll dig you up a link to a better tutorial as well. :P

This gives a full explanation for a full menu, but I think only the rollover part matters to you.
http://www.ssi-developer.net/css/men...r-effect.shtml