Sliding Door with one image?

Hi all

Using the sliding door technique I can change an image on hover like so.

http://www.ttmt.org.uk/forum/

Is there another way to get the same effect without two images.

Is there a CSS way to make an images Greyscale and then return it's color
on hover.

Code:
<!DOCTYPE html>

<html>
<head>
	<meta content="text/html; charset=utf-8"/>

	<title>untitled</title>
	<style type="text/css" media="screen">
	 *{
	   margin:0;
	   padding:0;
	 }
	 a{
	   display:block;
	   margin:50px;
	   background:url('1.jpg') top left no-repeat;
	   width:339px;
	   height:235px;
	   text-indent:-999em;
	 }
	 a:hover{
	   background-position:bottom left;
	 }
	</style>
</head>

<body>

  <a href="#">boat</a>

</body>
</html>