Imagem flutuante

3 participantes

Ver o tópico anterior Ver o tópico seguinte 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 avançado

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

http://pokemestre.forumeiros.com

Ir para o topo Ir para baixo

Principal contribuidor

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
Principal contribuidor
Principal contribuidor

Masculino
Membro desde : 07/04/2009
Mensagens : 9449
Pontos ativos : 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 avançado

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

http://pokemestre.forumeiros.com

Ir para o topo Ir para baixo

Principal contribuidor

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
Principal contribuidor
Principal contribuidor

Masculino
Membro desde : 02/09/2010
Mensagens : 7647
Pontos ativos : 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 avançado

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

http://pokemestre.forumeiros.com

Ir para o topo Ir para baixo

Principal contribuidor

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
Principal contribuidor
Principal contribuidor

Masculino
Membro desde : 02/09/2010
Mensagens : 7647
Pontos ativos : 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 avançado

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

http://pokemestre.forumeiros.com

Ir para o topo Ir para baixo

Principal contribuidor

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
Principal contribuidor
Principal contribuidor

Masculino
Membro desde : 02/09/2010
Mensagens : 7647
Pontos ativos : 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 avançado

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

http://pokemestre.forumeiros.com

Ir para o topo Ir para baixo

Principal contribuidor

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
Principal contribuidor
Principal contribuidor

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

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

Ir para o topo Ir para baixo

Principal contribuidor

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
Principal contribuidor
Principal contribuidor

Masculino
Membro desde : 02/09/2010
Mensagens : 7647
Pontos ativos : 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 avançado

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

http://pokemestre.forumeiros.com

Ir para o topo Ir para baixo

Principal contribuidor

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
Principal contribuidor
Principal contribuidor

Masculino
Membro desde : 02/09/2010
Mensagens : 7647
Pontos ativos : 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 avançado

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

http://pokemestre.forumeiros.com

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo


Permissões neste fórum
Você não pode responder aos tópicos