Estilo css enlace imagen

[rafret]

Hola que tal estoy haciendo una web con hoja de estilos y tengo una consulta:

<li class="left"><a id="uno" href=""><img src="images/a1.jpg"></a></li>


Como puedo hacerlo el hover para que cargue otra imagen.

Porfavor urgente

[Elfede171]

Podés utilizar una función javascript junto con un onMouseOver:

Código HTML:

<script language="javascript">
function cambiar(){
images['imagen'].src="images/a2.jpg";
}
</script>
 
<li class="left">
     <a id="uno" href="">
           <img name="imagen" src="images/a1.jpg" onMouseOver="cambiar();">
     </a>
</li>
 

[rafret]

hola que tal,
tendria que cambiarle la imagen para cada enlace no ?


<script language="javascript">
function cambiar(){
images['imagen'].src="images/a2.jpg";
}
</script>

Es un menu horizontal el que estoy haciendo.
Osea para cada <a> le debo anteceder la funcion de java script con la imagen que quiero cambiar no ?
Espero me salga saludos

[ArturoGallegos]

mmm javascript mala idea, yo optaría CSS sprite... que seria crear un gif de 1x1 transparente y la imagen a mostrar colocar los dos estados en una sola imagen

por ejemplo para mostrar una imagen de 100x100 con relover... el código seria algo así

Código HTML:

<li class="left"><a id="uno" href=""><img src="spacer.gif"></a></li>
 

Código CSS:

#uno img{width:100px;height:100px;background:url(imagenbg.jpg) top left;}
#uno:hover img{background:url(imagenbg.jpg) bottom left;}
 

imagenbg.jpg seria tu imagen a mostrar con las medidas 100x200 ya que cuenta con las dos imágenes una arriba y otra abajo