Bem, neste post estarei colocando como podemos criar rollover de imagens de maneira muito fácil e prática.

Para iniciar, é necessário a biblioteca jQuery. E também a seguinte extensão jquery.rollover.js, caso não tenha uma pasta específica que guarde apenas seus arquivos javascript, o ideal é que crie uma pasta js, por exemplo, e coloque esses arquivos dentro da mesma.

Após isso, você deve chamar tais arquivos do html que se encontra as imagens:

<script src="js/jquery.js"></script>
<script src="js/jquery.rollover.js"></script>

As imagens que serão o "hover", ou seja, que aparecerão após passar o mouse, deverão ter o mesmo nome da imagem inicial, seguido de _o, exemplo: Imagem: menu_home.jpg , Imagem Hover: menu_home_o.jpg , e devem estar no mesmo diretório.

Para aplicar o efeito, é necessário apenas chamar a classe ro das imagens, exemplo:

<img src="images/menu_home.jpg" class="ro" height="40" width="100" />
<input src="images/enviarf.jpg" class="ro" type="image" />

É posível aplicar este efeito nas tags <img> e <input type="image"> .

Clique aqui para ver uma demonstração.