Aumentar imagem on mouse over

maurov · 13 de Junho de 2012, 11:32

Vi uma série de scripts em java pela web, mas não achei minha reposta.
Tenho várias imagens no site, e todas tem tamanhos diferentes. Existe algum script para ampliar tipo 20% ou 50%?

[ ]

irtigor · 13 de Junho de 2012, 13:14

Dá pra fazer só com css, usando a pseudo classe hover, com css3 você consegue até efeito de transação, o problema é com o IE.

Outra saída é usar os eventos onmouseover e onmouseout do javascript. Tem uma dúzia de exemplos na internet, se você já usa uma biblioteca é até mais fácil.

Obs: java?! Tá usando um canhão pra matar mosquito ou errou na hora de escrever?

maurov · 13 de Junho de 2012, 13:57

Onmouseover e onmouseout:
são ótimos, mas bagunçam o layout quando a imagem está numa tabela.

BigImg: (exemplo da a w3schools.com na web)

Código Selecionar

!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function bigImg(x)
{
x.style.height="64px";
x.style.width="64px";
}
function normalImg(x)
{
x.style.height="32px";
x.style.width="32px";
}
</script>
</head>
<body>
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32" />
</body>
</html>

Achei que é um javascript (hehe), mas precisa definir os tamanhos de exibição, e não os normais das imagens. E nem entendi diretito o funcionamento.

irtigor · 13 de Junho de 2012, 17:28

Não bagunçam nada, são eventos. O que você fez neles, ou o que fica ao redor, é que está errado.

Esse código que você colou altera as propriedades width e height do marcador img, usando pixel como unidade.
Intenda as propriedades de css que as imagens podem ter, que você vai conseguir usar adequadamente os eventos (ou nem usar, como eu disse, dá pra fazer só com css).

...deve envolver o uso de porcentagem.

maurov · 13 de Junho de 2012, 17:44

Eu vi que para texto, usando CSS, dá para usar porcentagens, tipo 250% nos h1. Para imagens não achei.

Já li um monte de coisas na web e fiquei confuso. Sabes onde acho algo objetivo sobre isso em CSS?

irtigor · 13 de Junho de 2012, 18:23

O principio é que qualquer elemento que suporta a propriedade X, vai aceitar o X como um todo. O width: http://reference.sitepoint.com/css/width

Boas referencias: http://w3fools.com/
Exemplo de galeria com o efeito (sem usar javascript): http://www.cssplay.co.uk/menu/lightbox.html

maurov · 14 de Junho de 2012, 08:57

Em www.cssplay.co.uk/menu/lightbox.html tem um efeito bem legal. Percebi que a página foi montada em ul, e não em tables, mas acho que não dá nada se for aumentar a imagem.
No do código, em landscapes, primeira imagem, aparece:

Código Selecionar

<li><a href="lbox/landscape1.jpg"></li>
No li está apenas o href. Onde fica a imagem da página normal, e onde está o class que fez esta ampliação. Vi que tem outras coisas acima e uns class, mas não parecem ser desta foto em especial.

irtigor · 14 de Junho de 2012, 09:13

Ele só mexe na altura e largura, são imagens 200px × 150px escaladas pra 100px × 75px. Não existe jogo de "miniatura" e "original".

cerebro · 19 de Junho de 2012, 12:26

Eu usei o onmuseover e o outro que é o posto dele q eu ja estou esqueci mais era so para alterar a imagem por outro do mesmo tamanho, funcionou beleza.
Para que não bagunce o seu layout é só vc definir o seu layout para o a imagem maior