« tópico anterior tópico seguinte »
Páginas: [1]   Ir para o Fundo

Autor Tópico: Aumentar imagem on mouse over  (Lida 5040 vezes)

Offline maurov

  • Usuário Ubuntu
  • *
  • Mensagens: 446
    • Ver perfil
Aumentar imagem on mouse over
« Online: 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%?

[ ]
Registrado

Offline irtigor

  • Equipe Ubuntu
  • Usuário Ubuntu
  • *****
  • Mensagens: 4.344
  • Delete, delete, delete!
    • Ver perfil
Re: Aumentar imagem on mouse over
« Resposta #1 Online: 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?
Registrado

Offline maurov

  • Usuário Ubuntu
  • *
  • Mensagens: 446
    • Ver perfil
Re: Aumentar imagem on mouse over
« Resposta #2 Online: 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.
Registrado

Offline irtigor

  • Equipe Ubuntu
  • Usuário Ubuntu
  • *****
  • Mensagens: 4.344
  • Delete, delete, delete!
    • Ver perfil
Re: Aumentar imagem on mouse over
« Resposta #3 Online: 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.
« Última modificação: 13 de Junho de 2012, 17:42 por irtigor »
Registrado

Offline maurov

  • Usuário Ubuntu
  • *
  • Mensagens: 446
    • Ver perfil
Re: Aumentar imagem on mouse over
« Resposta #4 Online: 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?
Registrado

Offline irtigor

  • Equipe Ubuntu
  • Usuário Ubuntu
  • *****
  • Mensagens: 4.344
  • Delete, delete, delete!
    • Ver perfil
Re: Aumentar imagem on mouse over
« Resposta #5 Online: 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
Registrado

Offline maurov

  • Usuário Ubuntu
  • *
  • Mensagens: 446
    • Ver perfil
Re: Aumentar imagem on mouse over
« Resposta #6 Online: 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.
Registrado

Offline irtigor

  • Equipe Ubuntu
  • Usuário Ubuntu
  • *****
  • Mensagens: 4.344
  • Delete, delete, delete!
    • Ver perfil
Re: Aumentar imagem on mouse over
« Resposta #7 Online: 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".
Registrado

Offline cerebro

  • Usuário Ubuntu
  • *
  • Mensagens: 19
  • Liberdade!
    • Ver perfil
Re: Aumentar imagem on mouse over
« Resposta #8 Online: 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
Registrado
By Cerebro Vasconcelos
Páginas: [1]   Ir para o Topo
« tópico anterior tópico seguinte »