Imagem flutuante

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Imagem flutuante

Mensagem por Pika_mestre em 07/08/11, 02:32 pm

Qual é minha questão:
Vi neste tutorial, como colocar uma imagem flutuante no fórum:
http://ajuda.forumeiros.com/t15824-

Tem como colocar um botão pra fechar essa imagem?

Endereço do meu fórum:
http://pokemestre.forumeiros.com

Versão do meu fórum:
PHPBB3
avatar

Pika_mestre
Usuário avançado

Masculino
Inscrito dia : 28/06/2011
Mensagens : 362
Pontos Ativos : 580

Ver perfil do usuário http://pokemestre.forumeiros.com

Resolvido Re: Imagem flutuante

Mensagem por seender em 07/08/11, 03:16 pm

Olá!

Utilize este código:

<style type="text/css">
<!--
#nomeDiv{
position:absolute;
z-index:1;
width:200px;
height:200px;
left: 166px;
top: 209px;
}

#nomeDiv a{
padding:5px;
border:1px solid #000;
text-decoration:none;
background:#000;
color:#fff;
}
#nomeDiv a:hover{
background:#fff;
color:#000;
}
-->
</style>

<script language="JavaScript">
function controlaCamada(nomeDiv)
{
if( document.getElementById(nomeDiv).style.visibility

== "hidden" )
{
document.getElementById(nomeDiv).style.visibility =

"visible";
} else
{
document.getElementById(nomeDiv).style.visibility =

"hidden";
}
}
</script>

</head>

<body>

<div id="nomeDiv">
<a href="#" onClick="controlaCamada('nomeDiv')">Fechar</a>

<img src=Endereço-da-imagem>
</div>
Modifique o local de vermelho pelo endereço da imagem.

Melhores cumprimentos,
seender

Tópico movido para 'Questões sobre códigos'
avatar

seender
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 07/04/2009
Mensagens : 9450
Pontos Ativos : 12457

Ver perfil do usuário http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Resolvido Re: Imagem flutuante

Mensagem por Pika_mestre em 07/08/11, 05:10 pm

É pra colocar este código no CSS? Se for, coloquei e disse que têm muitas tags HTML, e ele "melhorou" o código, mas não deu certo...

Se não for, onde é pra colocar?
avatar

Pika_mestre
Usuário avançado

Masculino
Inscrito dia : 28/06/2011
Mensagens : 362
Pontos Ativos : 580

Ver perfil do usuário http://pokemestre.forumeiros.com

Resolvido Re: Imagem flutuante

Mensagem por Luciano98 em 07/08/11, 05:15 pm

josedaPM escreveu:É pra colocar este código no CSS? Se for, coloquei e disse que têm muitas tags HTML, e ele "melhorou" o código, mas não deu certo...

Se não for, onde é pra colocar?
Em que local da tela você quer que a imagem flutue?
Você quer ela fixa na tela ou rolando junto com a barra de rolagem?
Poderia passar o link da imagem? Qual o link que você quer que ela vá ao clicar nela?

Até mais.
avatar

Luciano98
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 01/09/2010
Mensagens : 7648
Pontos Ativos : 11045

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Imagem flutuante

Mensagem por Pika_mestre em 07/08/11, 05:21 pm

@Luciano98 escreveu:
Em que local da tela você quer que a imagem flutue?
Você quer ela fixa na tela ou rolando junto com a barra de rolagem?
Poderia passar o link da imagem? Qual o link que você quer que ela vá ao clicar nela?

Até mais.

Em que local da tela você quer que a imagem flutue? No canto inferior esquerdo

Você quer ela fixa na tela ou rolando junto com a barra de rolagem? Rolando junto com a Barra de rolagem

Poderia passar o link da imagem? Bom, ainda não fiz uma imagem, decidi testar antes, então peguei o link da imagem do avatar do seender, mas eu vou tirar quando eu conseguir o que eu quero tá seender?

Qual o link que você quer que ela vá ao clicar nela? Quero que vá até esta parte do meu fórum: http://pokemestre.forumeiros.com/t69-novo-nome-do-forum#423

Espero que possam me ajudar, obrigado!
avatar

Pika_mestre
Usuário avançado

Masculino
Inscrito dia : 28/06/2011
Mensagens : 362
Pontos Ativos : 580

Ver perfil do usuário http://pokemestre.forumeiros.com

Resolvido Re: Imagem flutuante

Mensagem por Luciano98 em 07/08/11, 05:44 pm

Olá!

Aqui está o código, coloque no mesmo local que você colocou o código anterior:
Código:
<style>#nomeDiv{position:absolute;z-index:1;width:200px;height:200px;left:166px;top:209px}#nomeDiv a{padding:5px;border:1px solid #000;text-decoration:none;background:#000;color:#fff}#nomeDiv a:hover{background:#fff;color:#000}</style><div style=position:fixed;bottom:0px;right:0px id=bidf><a href="/t69-"><img src="http://aux.iconpedia.net/uploads/1302741749974481030.png"></a><br><div id=nomeDiv><a href="#" onclick="jQuery('#bidf').hide();return false">Fechar</a></div></div>

Até mais.
avatar

Luciano98
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 01/09/2010
Mensagens : 7648
Pontos Ativos : 11045

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Imagem flutuante

Mensagem por Pika_mestre em 07/08/11, 06:13 pm

Tá tudo funcionando legal Luciano98, menos uma coisa:

" O Botão fechar não está aparecendo! Parece que é o tamanho que tá definido errado..."

Pode me ajudar?
avatar

Pika_mestre
Usuário avançado

Masculino
Inscrito dia : 28/06/2011
Mensagens : 362
Pontos Ativos : 580

Ver perfil do usuário http://pokemestre.forumeiros.com

Resolvido Re: Imagem flutuante

Mensagem por Luciano98 em 07/08/11, 06:14 pm

Olá!

Teste esse:
Código:
<style>#nomeDiv{z-index:1;width:200px;height:200px}#nomeDiv a{padding:5px;border:1px solid #000;text-decoration:none;background:#000;color:#fff}#nomeDiv a:hover{background:#fff;color:#000}</style><div style=position:fixed;bottom:0px;right:0px id=bidf><a href="/t69-"><img src="http://aux.iconpedia.net/uploads/1302741749974481030.png"></a><br><div id=nomeDiv><a href="#" onclick="jQuery('#bidf').hide();return false">Fechar</a></div></div>

Até mais.
avatar

Luciano98
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 01/09/2010
Mensagens : 7648
Pontos Ativos : 11045

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Imagem flutuante

Mensagem por Pika_mestre em 07/08/11, 06:51 pm

@Luciano98 escreveu:Olá!

Teste esse:
Código:
<style>#nomeDiv{z-index:1;width:200px;height:200px}#nomeDiv a{padding:5px;border:1px solid #000;text-decoration:none;background:#000;color:#fff}#nomeDiv a:hover{background:#fff;color:#000}</style><div style=position:fixed;bottom:0px;right:0px id=bidf><a href="/t69-"><img src="http://aux.iconpedia.net/uploads/1302741749974481030.png"></a><br><div id=nomeDiv><a href="#" onclick="jQuery('#bidf').hide();return false">Fechar</a></div></div>

Até mais.

Descupe, ainda sem resultados...

Pode me ajudar?
avatar

Pika_mestre
Usuário avançado

Masculino
Inscrito dia : 28/06/2011
Mensagens : 362
Pontos Ativos : 580

Ver perfil do usuário http://pokemestre.forumeiros.com

Resolvido Re: Imagem flutuante

Mensagem por seender em 07/08/11, 07:08 pm

Olá!

Aqui está o código por completo, terá de adiciona-lo na mensagem da home page:
Código:
<style type="text/css">
<!--
#nomeDiv{
position:absolute;
z-index:1;
width:200px;
height:200px;
left: 955px;
top: 410px;
display: scroll;
position: fixed;
}

#nomeDiv a{
padding:5px;
border:1px solid #000;
text-decoration:none;
background:#000;
color:#fff;
}
#nomeDiv a:hover{
background:#fff;
color:#000;
}
div.pop-up{
}
-->
</style>

<script language="JavaScript">
function controlaCamada(nomeDiv)
{
if( document.getElementById(nomeDiv).style.visibility

== "hidden" )
{
document.getElementById(nomeDiv).style.visibility =

"visible";
} else
{
document.getElementById(nomeDiv).style.visibility =

"hidden";
}
}
</script><div id="nomeDiv">
<a href="#" onClick="controlaCamada('nomeDiv')">Fechar</a>

<img src=http://aux.iconpedia.net/uploads/1302741749974481030.png>
</div>
O código deve ser adicionado em:
Painel...-> Visualização -> Home page -> Geral / Mensagem na home page

Melhores cumprimentos,
seender


Última edição por seender em 07/08/11, 07:37 pm, editado 1 vez(es)
avatar

seender
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 07/04/2009
Mensagens : 9450
Pontos Ativos : 12457

Ver perfil do usuário http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Resolvido Re: Imagem flutuante

Mensagem por Luciano98 em 07/08/11, 07:13 pm

Olá!

Teste esse código:
Código:
<style>#nomeDiv2{z-index:1;width:200px;height:200px}#nomeDiv2 a{padding:5px;border:1px solid #000;text-decoration:none;background:#000;color:#fff}#nomeDiv2 a:hover{background:#fff;color:#000}</style><div style=position:fixed;bottom:0px;right:0px;z-index:1 id=bidf><a href="/t69-"><img src="http://aux.iconpedia.net/uploads/1302741749974481030.png"></a><br><div id=nomeDiv2><a href="#" onclick="jQuery('#bidf').hide();return false">Fechar</a></div></div>

Até mais.
avatar

Luciano98
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 01/09/2010
Mensagens : 7648
Pontos Ativos : 11045

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Imagem flutuante

Mensagem por Pika_mestre em 08/08/11, 01:18 pm

Ebaaaaaaaaaaaaaa! Muito obrigado aos dois! O últimos código dado por Luciano98 Resolveu meu problema, mas, antes de bloquear, luciano você pode me dizer, caso eu queira mover esta imagem pelo meu fórum (com abaixar ela ou subir mais, ou posicioná-la no centro), qual dos valores do código eu tenho que alterar?
avatar

Pika_mestre
Usuário avançado

Masculino
Inscrito dia : 28/06/2011
Mensagens : 362
Pontos Ativos : 580

Ver perfil do usuário http://pokemestre.forumeiros.com

Resolvido Re: Imagem flutuante

Mensagem por Luciano98 em 08/08/11, 06:57 pm

Olá!

Código:
<style>#nomeDiv2{z-index:1;width:200px;height:200px}#nomeDiv2 a{padding:5px;border:1px solid #000;text-decoration:none;background:#000;color:#fff}#nomeDiv2 a:hover{background:#fff;color:#000}</style><div style=position:fixed;bottom:0px;right:0px;z-index:1 id=bidf><a href="/t69-"><img src="http://aux.iconpedia.net/uploads/1302741749974481030.png"></a><br><div id=nomeDiv2><a href="#" onclick="jQuery('#bidf').hide();return false">Fechar</a></div></div>
bottom = "bottom" significa que a imagem ficará na parte de baixo, pode ser substituído por "top" (topo).
right = "right" significa que a imagem ficará no lado direito da página, pode ser substituido por "left" (esquerda).
0px = Número de pixels que a imagem ficará afastada do topo, da direita ou dependendo do valor que vem antes dele.

Ou seja, agora a imagem está 0 pixels afastada da parte de baixo da página e 0 pixels afastada da direita.

Até mais.
avatar

Luciano98
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 01/09/2010
Mensagens : 7648
Pontos Ativos : 11045

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Imagem flutuante

Mensagem por Pika_mestre em 09/08/11, 03:57 pm

Obrigado aos dois! Dei uma ajustadinha no código do Luciano98 e ele ficou exatamente onde eu queria!
avatar

Pika_mestre
Usuário avançado

Masculino
Inscrito dia : 28/06/2011
Mensagens : 362
Pontos Ativos : 580

Ver perfil do usuário http://pokemestre.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum