Jump to content
Fórum Script Brasil
  • 0

Abrir miniatura em POP UP


Denis Sousa

Question

Boa tarde ae galera.

to com uma duvida que não me deixa nem dormi. Seguinte:

To montando uma pagina onde tem uns produtos correto..

esse produtos estam em miniaturas, queria saber como faço para o

cliente passar o mouse sobre a imagem e ela ficar maior. Lembrando que

tenho uma tabela com 9 produtos, então não da pra abrir a imagem grande

nesse tabela senão vai zonear tudo, minha ideia era tipo um pop up, mais que

fechasse quando tirar o mouse de cima.

Aguardo um socorro ae!

falou! :ninja:

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0

usa uma div com style display setado para none e position absolute

onmouseover da miniatura você chama uma função que recebe o nome da foto como parametro

com innerHTML você coloca a foto na div e seta o display para inline

no onmouseout você chama uma função que somente seta o display da div para none

Link to comment
Share on other sites

  • 0

innerHTML => http://www.w3schools.com/htmldom/prop_anchor_innerhtml.asp

onmouseover => http://www.w3schools.com/jsref/jsref_onmouseover.asp

onmouseout => http://www.w3schools.com/jsref/jsref_onmouseout.asp

style display => http://www.w3schools.com/css/pr_class_display.asp

div => http://www.w3schools.com/tags/tag_div.asp

position => http://www.w3schools.com/css/pr_class_position.asp

exemplo
// display
document.getElementById('id_da_div').style.display = 'none';
document.getElementById('id_da_div').style.display = 'inline';

//innerHTML
document.getElementById('id_da_div').innerHTML = parametro;

Link to comment
Share on other sites

  • 0

Vou tentar explicar dando um exemplo certo...

tem o site www.pontofrio.com.br

lá nas ofertas tem as imagem dos produtos...

o que eu qro e q quando a pessoa passe o mouse sobre a figura ela fique maior, num outra janela, e feche quando tirar o mouse...

Ajuda ae de forma mais clara e direta!

obrigado !!!

Link to comment
Share on other sites

  • 0

O que acontece ali no ponto frio é, o cara abre um pop-up no link e passa parâmetros que serão lidos pela linguagem dinâmica usada na loja e essa linguagem vai abrir a imagem maior...

O que o moderador passou é exatamente o que você precisa pra fazer o que você quer... dê uma pesquisa, e volte ao fórum, é o jeito mais correto de aprender, porque quem pega um código já funcionando geralmente não se dá ao trabalho de pensar o "como" foi feito.

Link to comment
Share on other sites

  • 0

É Denis, os moderadores não são maldosos, que não querem dar o código pronto pra você e tal. Mas acontece é que o seu problema é muito simples de resolver, você pode conseguir sozinho mesmo não sabendo essas linguagens como comentou.

Veja, você vai ter que aprender, não tem jeito, porque não dá pra pegar tudo pronto entende? Vai ter que ralar carinha...se está montando um site, tem que no minimo saber sobre html, css e um pouquinho que seja de javascript, é como se eu tentasse consertar um carro sem saber o que cada componente faz, fica muito difícil.

O que eu posso fazer é te dar dicas. Aprenda o html, css que é facil, vá la no site do maujor.com que lá ensina a fazer varias coisas. criarweb.com pra quem está começando também é ótimo. Faça o que está querendo fazer antes em Html e Css, deixa o efeito em javascript pra depois que daí a gente te ajuda.

Não sei como anda o que está fazendo, então estou assumindo que não está nada pronto ainda.

Abraço o/

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152k
    • Total Posts
      651.6k
×
×
  • Create New...