Dica da semana Expansão de foto em postagem

Uma dica interessante para certos usos de imagens em blogs é uma codificação para que a imagem seja expandida quando a seta do mouse está sobre ela.

O blog Templates & Acessórios ensina dois métodos para isso. Vamos ver o mais simples (porém o outro está no link há pouco indicado do blog).

Basta colocar o código abaixo (no espaço de edição HTML), no lugar onde aparecerá a imagem. Se você já subiu uma foto para o blog, simplesmente copie o endereço completo da mesma para o campo indicado abaixo ("aqui o endereço da imagem"), e apague as demais codificações desse primeiro upload.
<img class="expa" src="AQUI_0_ENDERECO_DA_IMAGEM" />
<style>
img.expa {
cursor: pointer;
max-width: 150px;
}
img.expa:hover {
max-width: none;
}
</style>No caso das imagens acima, foram utilizadas tabelas em HTML (falaremos disso na próxima postagem) para diagramar melhor a postagem. Ao mesmo tempo definiu-se um valor de "width" para a imagem, correspondendo à expansão máxima desejada. Se não houver esse valor, a expansão será conforme o tamanho original da foto. Exemplificando, no caso da primeira foto, o código ficou assim:
<img class="expa" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPdVFhsZqLL-8i4-PLDQMisK1jFEqbdBnqXOCkBzlXqnu4195M47dB8QwyEY9pXWay6pkBmwbQtqlbJLGJQUvPkpThfy8Q5o7PTHLtdDjWSKE1UFjpwMDdOYvbyZEVdUGpEwjNiQG5eotS/s1600/PN+HM.jpg" width="450px" />
<style>
img.expa {
cursor: pointer;
max-width: 120px;
}
img.expa:hover {
max-width: none;
}
</style>Repare, então, que a expansão estipulada foi de "450px". Mas esse valor é de acordo com o desejo do usuário.

Em tempo, as fotos acima são do World Press Photo, 2012, referente a fotos do ano passado. A imagem do meio foi a vencedora. A da direita é de uma rádio no Haiti, país onde metade da população é analfabeta e, por isso, os meios de comunicações audiovisuais têm grande importância. Cada foto, no link mencionado, possui explicações, além dos créditos, como essa.