How do you make an image link flip so it's backwards when you hover over it? I know that made no sense, but I hope you know what I mean. So if you have a link and then you mouseover it and the image is backwards? I know there is a way to do it, at least with text, so can someone help me?

Here you go....I hope it works ok!

<STYLE type="text/css"><!--
A:link{color:COLOR;text-decoration:none}
A:visited{color:COLOR;text-decoration:none}
A:active{color:COLOR;text-decoration:none}
A:hover{color:COLOR;text-decoration:none;filter:fliph; height:0;}
--></STYLE>

I was wondering if you can choose which way it flips instead of backwards. (like face south, north, west etc)

You could open the normal image in your favourite image editing program and then flip it in the direction you want, save the image with a different name and then enter this piece of javascript which will make the first image change to the second image (which you flipped in the image software) giving the impression that the image has been flipped. All you are really doing is changing the image.

<img border="0" src="image_unflipped.gif" onMouseOver="javascript:src='image_flipped.gif'" onMouseOut="javascript:src='image_unflipped.gif'">

Change "image_unflipped.gif" to the location of your original image and "image_flipped.gif" to the location of your 'flipped' image.

This will replace the image with the flipped one when hovered over, and then back to the original when the cursor is moved away.

HTH,

The way that bellportal suggesting was using javascript and I think that using CSS is a lot easier.

filter:flipv = vertical flip (notice the "v"?)
filter:fliph = horizontal flip (notice the "h"?)

Hope that helps :) .