Mouser over med CSS, hjälp att utvidga exempel script

Hej

Jag hittade detta exemplet för hur man kan på ett enkelt sätt få mouse over funktionen med hjälp av CSS.

http://wellstyled.com/files/css-nopreload-rollovers/example2.html

Jag använder idag 6 st olika bilder som jag skulle vilja byta ut mot andra bilder när jag kör mouse over.

Hur skulle man då kunna utvidga denna koden?

div.outer {
	float: left;
	width: 120px; height: 25px;
	margin: 0 3px 0 0;
	background: url( 'bars.gif' ) 0 -50px no-repeat;
	}

div.outer a {
	display: block;
	margin: 0; padding:0;
	width:100%; height:100%;
	overflow:hidden;
	font: bold 13px/1 Georgia, serif;
	color:#039;
	text-decoration: none;
	background: url( 'bars.gif' ) top left no-repeat;
	}
div.outer span {
	display: block;
	margin:0; padding: 7px 0 0 13px;
	}
div.outer a:hover {
	background-image: none;
	color: yellow;
	}
div.outer a:active {
	color: black;
	}