Plugin de Wordpress para função mouseover

Função que ajuda a dar mais dinamismo ao conteúdo, a mouseover pode encontrar algumas complicações em alguns sites Wordpress. Veja esta dica de plugin para contornar o problema de forma fácil.

Desenvolvendo o conteúdo de uma página em Wordpress me deparei com uma grande complicação para uma coisa simples: a função mouseover. Também chamada de "rollover", a função consiste, simplesmente, em um botão ou imagem "animada", que reage e muda a aparência quando se passa o ponteiro do mouse em cima. Pois bem, o problema se deu que os formatos de diagramação em Wordpress não aceitavam códigos em JavaScript e HTML para a função. Tentei vários deles até buscar um plugin para Wordpress que realizasse a tarefa. Posso até dizer que tentei por último o que deveria ser a primeira opção, mas vamos ao que interessa.

O nome do plugin é Image Mouseover e para usar é muito simples. Basta acessar o link oficial para baixar e aprender a instalar.

Feito isso, monte as imagens que você deseja usar como botão. A imagem inicial (ON) e a outra (OVER), que irá aparecer ao passar o mouse, conforme o exemplo abaixo.

Depois é só usar o comando HTML tradicional para inserção de imagens: <img src="link da imagem ON" />. Agora é a hora da mágica. Adiocione as tags class="mouseover" e data-oversrc="link da imagem OVER" ao comando e a mágica acontece. Seu código deverá ficar assim:

<img class="mouseover" src="link da imagem ON" data-oversrc="link da imagem OVER" />

O resultado final será este:

 

Observação 1: suas imagens devem estar hospedadas em um servidor ou na própria galeria de mídia do seu Wordpress.

Observação 2: como este site não é em Wordpress, usei um comando de JavaScript no corpo da postagem com o seguinte código:

<img src="Link da imagem ON" onMouseOver="this.src='Link da imagem OVER'" onMouseOut="this.src='Link da imagem ON'" />

Façam bom proveito!