Cambiar imagen al pasar el mouse y media queries

[Pejigo]

Buenas, estoy haciendo un menu web que se adapta a diferentes resoluciones por media queries.
Es sencillo cambiar las imágenes en los backgrounds del css.
Pero no encuentro la forma de cambiar las imágenes si utilizo el código que suelo utilizar para cambiar las imágenes al pasar el ratón por encima.

Código HTML:

<img src="URL de la imagen UNO" onmouseover="this.src='URL de la imagen DOS';" onmouseout="this.src='URL de la imagen UNO';"/> 

Que podría hacer?

[cristian_cena]

Pasa que tus media-queries no conocen la existencia de tus rollovers.
Opciones:
Trabajar con la pseudo-clase :hover directamente en tu/s hoja/s de estilos
Trabajar con javascript pero de manera que quites todo el javascript del html, es decír, usando dom y funciones, o bien con una librería como jquery que te ayudará bastante a la hora de seleccionar elementos, y luego detectes resoluciones, en jquery te valdrá http://api.jquery.com/resize/

Saludos.

[Pejigo]

Muchas gracias Cristian
Me podrías indicar un código ejemplo para intentarlo con la propiedad hover css.
Llevo varios intentos y no lo consigo del todo.

Código HTML:

.boton{
background: url(images/selected.png) 0 0 no-repeat;
height:32px; width:125px; display: block;  float: left;
}
.boton:hover{
background: url(images/selected2.png) 0 0 no-repeat;
height:32px; width:125px;
}

Esto estaria bien? Con solo ponerle la clase al enlace <a>, ya sería suficiente, no?

[cristian_cena]

Iniciado por Pejigo

Esto estaria bien? Con solo ponerle la clase al enlace <a>, ya sería suficiente, no?

Si, es más, el width y el height en :hover{ ...aca... } estan demás porque ya lo declaraste antes.

[Pejigo]

Muchas gracias, funciona perfecto!