Fórum grátis: ajuda e atendimento ao utilizador Forumeiros.com

Imagem flutuante

3 participantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode

Ir para baixo

Tópico resolvido Imagem flutuante

Mensagem por Pika_mestre 07.08.11 18:32

Qual é minha questão:
Vi neste tutorial, como colocar uma imagem flutuante no fórum:
https://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
Pika_mestre
Pika_mestre
****

Membro desde : 28/06/2011
Mensagens : 362
Pontos : 580

http://pokemestre.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Imagem flutuante

Mensagem por seender 07.08.11 19:16

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'
seender
seender
Membro Entusiasta

Membro desde : 07/04/2009
Mensagens : 9449
Pontos : 12455

http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Ir para o topo Ir para baixo

Tópico resolvido Re: Imagem flutuante

Mensagem por Pika_mestre 07.08.11 21:10

É 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?
Pika_mestre
Pika_mestre
****

Membro desde : 28/06/2011
Mensagens : 362
Pontos : 580

http://pokemestre.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Imagem flutuante

Mensagem por Luciano98 07.08.11 21:15

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.
Luciano98
Luciano98
Membro Entusiasta

Membro desde : 02/09/2010
Mensagens : 7647
Pontos : 11049

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Imagem flutuante

Mensagem por Pika_mestre 07.08.11 21:21

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!
Pika_mestre
Pika_mestre
****

Membro desde : 28/06/2011
Mensagens : 362
Pontos : 580

http://pokemestre.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Imagem flutuante

Mensagem por Luciano98 07.08.11 21:44

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.
Luciano98
Luciano98
Membro Entusiasta

Membro desde : 02/09/2010
Mensagens : 7647
Pontos : 11049

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Imagem flutuante

Mensagem por Pika_mestre 07.08.11 22:13

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?
Pika_mestre
Pika_mestre
****

Membro desde : 28/06/2011
Mensagens : 362
Pontos : 580

http://pokemestre.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Imagem flutuante

Mensagem por Luciano98 07.08.11 22:14

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.
Luciano98
Luciano98
Membro Entusiasta

Membro desde : 02/09/2010
Mensagens : 7647
Pontos : 11049

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Imagem flutuante

Mensagem por Pika_mestre 07.08.11 22:51

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?
Pika_mestre
Pika_mestre
****

Membro desde : 28/06/2011
Mensagens : 362
Pontos : 580

http://pokemestre.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Imagem flutuante

Mensagem por seender 07.08.11 23:08

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 23:37, editado 1 vez(es)
seender
seender
Membro Entusiasta

Membro desde : 07/04/2009
Mensagens : 9449
Pontos : 12455

http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Ir para o topo Ir para baixo

Tópico resolvido Re: Imagem flutuante

Mensagem por Luciano98 07.08.11 23:13

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.
Luciano98
Luciano98
Membro Entusiasta

Membro desde : 02/09/2010
Mensagens : 7647
Pontos : 11049

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Imagem flutuante

Mensagem por Pika_mestre 08.08.11 17:18

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?
Pika_mestre
Pika_mestre
****

Membro desde : 28/06/2011
Mensagens : 362
Pontos : 580

http://pokemestre.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Imagem flutuante

Mensagem por Luciano98 08.08.11 22:57

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.
Luciano98
Luciano98
Membro Entusiasta

Membro desde : 02/09/2010
Mensagens : 7647
Pontos : 11049

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Imagem flutuante

Mensagem por Pika_mestre 09.08.11 19:57

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

Membro desde : 28/06/2011
Mensagens : 362
Pontos : 580

http://pokemestre.forumeiros.com

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode

 
Permissões neste sub-fórum
Não podes responder a tópicos