Enlaces de imagenes diferentes con listas

[JuanKa]

Buenas Tardes a todos
Como podria hacer para que cuando me ubica sobre unos enlaces , me cambie la imagen es decir, el Hover

Tengo una lista con 6 enlaces donde la imagen de forma active es figura1_A, Figura2_A, figura3_A, figura4_A, etc

y cuando paso por encima debe de cambiar a : figura1_B, Figura2_B, figura3_B, figura4_B, etc

Código HTML:

 <div id="bar_opciones">
				<ul id="opciones">
					<li><a href="autoescuela.php"><img src="../Imagenes/bot_autoescuela_a.jpg"></a></li>
					<li><a href="permisos.php"><img src="../Imagenes/bot_permisos_a.jpg"></a></li>
					<li><a href="horarios.php"><img src="../Imagenes/bot_horarios_a.jpg"></a></li>
					<li><a href="vehiculos.php"><img src="../Imagenes/bot_vehiculos_a.jpg"></a></li>										
					<li><a href="ubicacion.php"><img src="../Imagenes/bot_ubicacion_a.jpg"></a></li>					
					<li><a href="informacion.php"><img src="../Imagenes/bot_informacion_a.jpg"></a></li>
				</ul><!-- Fin de id="menu"  -->
			</div> 

En la clase tengo:

Código:

#bar_opciones{
margin-top:5px;
margin-left:auto;
margin-right:auto;
padding:0px;
width:762px;
height:35px;
}
ul#opciones{
list-style:none;
margin:0px;
padding:0px;
}
ul#opciones li {
padding:0px;
float:left;
border:0px;

}

ul#opciones li a {
display:block;
width:127px;
heigh:35px;
text-decoration:none;
}

ul#opciones li a:hover {
margin-top:0px;
}

He puesto muchas cosas par que me salga pero nada, inclusive estuve colocando un id para cada enlace y nada, luego un class para cada enlace y tampoco nada.

Existe alguna forma de como hacer esto. ????


Gracias y saludos

[Ekbrilo]

Si no he entendido mal, lo que quieres es hacer un rollover con CSS; en ese caso mira a ver si te sirve de algo este método: http://ervdesign.net/blog/?p=88