Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS

Moderador: web

 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 237
Localização: Florianópolis/SC
Contato:

zoom em img

02-10-2007 16:56

olá, esto procurando por um script que ao passar o mouse de um zoom na imagem, achei vários na net, mas todos com a mesma lógica, aumentam o tamanho da div, e usam a imagem como background.

isto deforma a pagina, tabela, paragrafos, tudo.

eu tenho a img com 100x100px
ela esta redimensionada com propriedades para 50x50, esta dentro de uma tabela com 70px de altura

o ideal seria que ao passar mouse , acionasse um layer, uma div com um z-index maior, sobre a imagem pequena, para cobrir ela, e ao tirar o mouse deste layer, ele fique oculto novamente.

alguma dica?
0
MIDZ.com.br
http://www.midz.com.br
Soluções Web
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17253
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

zoom em img

02-10-2007 18:19

Montei um script, mas, trabalhando com uma imagem fixa, note que o script é para resolução de 1024 de largura, depois, só fazer uns ifs para outras resoluções.

Montei como base para o documento que vai ter o zoom ser chamado por um iframe de 600 de largura por 600 de altura.

PARTE EM JAVASCRIPT
<script type="text/javascript"> if(screen.width==1024) { document.write('<style type="text/css">') document.write('#aqui{position: fixed; top: 0px; left: 390px;}') document.write('* html #aqui{position: absolute;') document.write('top:expression(body.scrollTop + 0 + "px"); left:expression(body.scrollLeft + 390 + "px");') document.write('}</style>') } </script> <script type="text/javascript"> function mostra(figura) { document.getElementById("aqui").style.display="block"; document.getElementById("aqui").innerHTML="<img src='"+figura+"' width='200' height='200'>"; } function retira() { document.getElementById("aqui").style.display="none"; document.getElementById("aqui").innerHTML=""; } </script>

PARTE EM HTML
<div id="aqui"></div>

<img src="figura.jpg" border="0" width="100" height="100" onmouseover="mostra('figura.jpg')" onmouseout="retira()">

Ao rolar o documento com o código, a div sempre carrega fixa.
* Testada no FF e IE.
0
Criar site grátis Wix
Hospedagem de sites Hostgator
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum
:rock:
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 237
Localização: Florianópolis/SC
Contato:

zoom em img

02-10-2007 19:25

blz, funcionou certinho, so pra nao quebrar a cabeça com negocio de resolução e navegador, ai mudei o css usando porcentagem, a imagem se inicia no meio da tela,

ficou blz, o problema seria se bem no meio tivese a img pequena, ai qdo colocasse o mouse a img grande iria aparecer sobre a pequena, assim perde o foco e a grande some, mas no meu layout nao ocorre isto, ficou legal.

valeu

(as alterações que fiz no css)
<style type="text/css"> #aqui{ position: fixed; top: 50%; left: 50%; } * html #aqui{ position: absolute; top:expression(body.scrollTop + 50 + "%"); left:expression(body.scrollLeft + 50 + "%"); } </style>

0
MIDZ.com.br
http://www.midz.com.br
Soluções Web
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17253
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

zoom em img

02-10-2007 19:33

Boa idéia ¨laughing¨
0
Criar site grátis Wix
Hospedagem de sites Hostgator
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum
:rock:

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado