Pop-up de imagem

[barbra]

Olá!

Estou precisando de uma ajuda no seguinte caso:

Preciso colocar uma pop-up em div, daquelas com botãozinho fechar e tudo de imagem ( EXEMPLO AQUI );

Mas, não sei o código.

E pra piorar, preciso colocar isso numa página com sistema wordpress. estou totalmente perdida e tudo que procurei na internet não auxilia. Quem poderá me ajudar???

Agradeço desde já! :wacko:

[Toze]

bem como colocar no wordpress é outros 500, mais a div funcionando de pop up não é muito dificil.

eu to sem apache no momento vou fazer o codigo na mão pode ser que saia alguma coisa errada, mais tenta entender o codigo que é 90%.

pelo post não deu pra notar o quanto de experiencia você tem em html, então vou começa do começo.

Ideia:

uma div "em cima" das outras carregando uma imagem.

como div não some por natureza, um javascript se encarregará de sumir com ela quando clicar em fechar beleza?

no css incluiremos

#popup{ //significa que objetos com id="popup" tera os atributos abaixo.
  position: absolute; //pronto a charada morre aqui, isso ira deixar sua div "flutuando"
  z-index: 10px; //garantir que ela ira fica em cima das outras coisas da pagina (exceto flash)
  margin: 50px; // aqui voce ira controlar a posicao que a div ira aparecer.
}

no html inserimos no head

<script type="text/javascript">
function hidden(){
document.getElementById('popup').style.display='none';
}
</script>

no html inserimos no body

<div id="popup">
  <a href="#" onclick="hidden();"><img src="fechar.png"/></a>
  <img src="imagem.png"/>
</div>

se der algum erro ou não conseguir fala q eu arrumo =x kkkk

espero ter ajudado.

Editado Março 24, 2010 por Toze

[barbra]

Então, eu fiz o código. Mas não fecha. Tentei no Firefox e no Internet explorer e nada.

[barbra]

Bem, fiz algumas alterações por funcionalidade e consegui reestruturar o código de um modo que se adapta-se ao site.

De inicio, no Head, coloquei no header.php do wordpress, pelo editor no site mesmo:

<script type="text/javascript" language="javascript">
function displaylayer(nameDiv,personal){
    var nameDiv = document.getElementById(nameDiv);
    if(personal.toLowerCase()=='on') nameDiv.style.display='';
    else if (personal.toLowerCase()=='off') nameDiv.style.display='none';
    else {
      if(nameDiv.style.display == 'none') nameDiv.style.display='';
      else nameDiv.style.display='none';
    }
}
</script>

Após isso, a div que seria responsável pela pop-up de imagem se tornou essa, e precisei acessar a index.php em raiz:

<div id="promo" style="position:absolute; left:314px; top:290px; z-index:2">
  <table border="0" cellpadding="0" cellspacing="0">

    <tr>
      <td height="20" align="right"><a href="java script:void(0);" onclick="displaylayer('promo','off');" title="[x]FECHAR"><img src="http://www.chasquedoconhaque.com.br/chasque/wp-content/uploads/2010/03/fechar.png" border="0" /></a></td>
    </tr>
    <tr>
      <td align="center" valign="middle">
        <a href="http://www.chasquedoconhaque.com.br/" target="_blank" onclick="displaylayer('promo','off');" title="Aguarde!"><img src="http://www.chasquedoconhaque.com.br/chasque/wp-content/uploads/2010/03/imagem.jpg" border="0" style="border:1px solid #000000;" /></a>
      </td>
    </tr>
  </table>
</div>

O único problema que encontrei, no momento, é que ela não se sobrepõe a animação em flash que tem no site. Gostaria de saber se há como fazer ela ficar sobre a animação, que faz parte da estrutura toda.

[Toze]

foi so um erro meu por isso não tava fexando...

estava

<script type="text/javascript">
function hidden(){
document.getElementById('popup').style.display='block';
}
</script>

mudei para none agora funcionaria normal, mais voce já achou a solucao correto?

<script type="text/javascript">
function hidden(){
document.getElementById('popup').style.display='none';
}
</script>

pra deixar o popup atraz do flash

utilize:

<param name="wmode" value="opaque">

e dentro da tag <embled> coloque wmode="opaque" tambem.

ps: coloque nos dois, caso so tenha em um, não funcionará nos dois navegadores (IE e firefox)

espero ter ajudado.

[Lucas Abranches]

wmode="opaque

na verdade voce tem que acrescentar é:

wmode="transparent"

[Toze]

que eu saiba wmode="opaque" deixa outros objetos sobrepor o flash e wmode="transparent" onde tiver transparencia no flash fica trasparent, se wmode="transparent" tb deixar objetos em cima do flash, acabo de aprender mais uma :)