Menu Imagenes de sustitucion

[experimenta]

Hola amigos bueno quisiera me ayuden con un problema
bueno quisiera saber como puedo hacer esto



que al pasar el mouse cambie de Off a On...
pero con estas 2 imagenes







esto es totalmente diferente a lo que se hace en dreamweaver porque
tienes que sustituir varias mitades de imagen, pero como hago en imagenes completas?
no se si me explique bien.. Porfabor si alguien sabe o tiene un manual pra poder aprenderlo...gracias

[alexk]

aver con esta imagen de ejemplo...

el html del menu

Código HTML:

<ul class="menu">
    <li><a href="#">menu uno</a></li>
    <li><a href="#">menu dor</a></li>
</ul>
 

y el CSS

Código CSS:

.menu li{background:url(menu.png) no-repeat;padding-left:20px;}
.menu li:hover{background-position:0 -30px;}
 

tan solo le damos un fondito al li y con la pseudo clase :hover "movemos" este fondito a la direccion donde esta la imagen de sustitucion y ya, chao y suerte