Crie uma Imagem que muda quando o usuário passar o cursor do mouse, utilizando um código bem simples, que não precisa de CSS. Você pode utilizar este tipo de imagem nos artigos do seu blog ou num elemento de página, adicionado na barra lateral ou em qualquer outra parte do seu blog.

Para criar uma imagem que muda ao passar o cursor do mouse, é bem simples, apenas copie este código abaixo, salve no Bloco de Notas e adicione os links Das Imagens no local indicado no código:

<center>
<img src="LINK COMPLETO DA PRIMEIRA IMAGEM"
onmouseover="this.src='LINK COMPLETO DA SEGUNDA IMAGEM'"
onmouseout="this.src='LINK COMPLETO DA PRIMEIRA IMAGEM'" />
</center>

- "Center" a imagem fica centralizada (left = a imagem fica na esquerda, right = a imagem fica na direita).
- "Primeira imagem" é a imagem que fica exposta, antes do usuário passar o cursor do mouse sobre ela (ver imagem deste artigo)!
- "Segunda imagem" é a imagem que ficará exposta, quando o usuário passar o cursor do mouse sobre ela (ver imagem deste artigo)!

 Caso você queira adicionar um link para alguma página, adicione o código acima, dentro destas linhas abaixo:

<a href="LINK COMPLETO DO SITE">
CÓDIGO AQUI!
</a>

Vai ficar assim:

<center>
<a href="LINK COMPLETO DO SITE">
<img src="LINK COMPLETO DA PRIMEIRA IMAGEM"
onmouseover="this.src='LINK COMPLETO DA SEGUNDA IMAGEM'"
onmouseout="this.src='LINK COMPLETO DA PRIMEIRA IMAGEM'" />
</a>
</center>

Se você deseja adicionar a imagem num artigo (Blogger, Blogspot), faça upload das imagens para o artigo e, clique no botão de link "HTML" que está localizado acima do editor de texto do seu blog. Copie os endereços Urls das imagens, adicione no local indicado no código, e apague os links das imagens que estão no editor de texto do seu blog. Cole o código com os endereços Urls das imagens no editor de texto do seu blog, visualize para ver se está tudo certo. Clique em "Publicar".

Para adicionar a imagem num gadget do blog, você precisa hospedar as imagens num servidor! Depois que você hospedar as imagens, copie os endereços Urls das imagens e adicione no local indicado no código. Acesse o painel de controle do Blogger ==> Layout ==> Adicionar um Gadget ==> HTML/JavaScript ==> Cole o código ==> Clique em "Salvar.

No caso das imagens adicionadas em elementos de páginas do blog ou até mesmo nos artigos, você deve tomar cuidado com a largura das imagens. Verifique a largura do local onde você deseja adicionar as imagens. Outra coisa muito importante: As imagens devem ter o mesmo tamanho!

Imagens: www.3rdbillion.net e www.hdw.eweb4.com.