InícioImagem 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
Página 1 de 1 • Compartilhe
Imagem flutuante
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
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- ****
- Membro desde : 28/06/2011
Mensagens : 362
Pontos : 580 -
Re: Imagem flutuante
por seender 07.08.11 19:16
Olá!
Utilize este código:
Melhores cumprimentos,
seender
Tópico movido para 'Questões sobre códigos'
Utilize este código:
Modifique o local de vermelho pelo endereço da imagem.<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>
Melhores cumprimentos,
seender
Tópico movido para 'Questões sobre códigos'
seender- Membro Entusiasta
- Membro desde : 07/04/2009
Mensagens : 9449
Pontos : 12455 -
Re: Imagem flutuante
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?
Se não for, onde é pra colocar?
Pika_mestre- ****
- Membro desde : 28/06/2011
Mensagens : 362
Pontos : 580 -
Re: Imagem flutuante
por Luciano98 07.08.11 21:15
Em que local da tela você quer que a imagem flutue?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?
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- Membro Entusiasta
- Membro desde : 02/09/2010
Mensagens : 7647
Pontos : 11049 -
Re: Imagem flutuante
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- ****
- Membro desde : 28/06/2011
Mensagens : 362
Pontos : 580 -
Re: Imagem flutuante
por Luciano98 07.08.11 21:44
Olá!
Aqui está o código, coloque no mesmo local que você colocou o código anterior:
Até mais.
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- Membro Entusiasta
- Membro desde : 02/09/2010
Mensagens : 7647
Pontos : 11049 -
Re: Imagem flutuante
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?
" O Botão fechar não está aparecendo! Parece que é o tamanho que tá definido errado..."
Pode me ajudar?
Pika_mestre- ****
- Membro desde : 28/06/2011
Mensagens : 362
Pontos : 580 -
Re: Imagem flutuante
por Luciano98 07.08.11 22:14
Olá!
Teste esse:
Até mais.
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- Membro Entusiasta
- Membro desde : 02/09/2010
Mensagens : 7647
Pontos : 11049 -
Re: Imagem flutuante
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- ****
- Membro desde : 28/06/2011
Mensagens : 362
Pontos : 580 -
Re: Imagem flutuante
por seender 07.08.11 23:08
Olá!
Aqui está o código por completo, terá de adiciona-lo na mensagem da home page:
Painel...-> Visualização -> Home page -> Geral / Mensagem na home page
Melhores cumprimentos,
seender
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>
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- Membro Entusiasta
- Membro desde : 07/04/2009
Mensagens : 9449
Pontos : 12455 -
Re: Imagem flutuante
por Luciano98 07.08.11 23:13
Olá!
Teste esse código:
Até mais.
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- Membro Entusiasta
- Membro desde : 02/09/2010
Mensagens : 7647
Pontos : 11049 -
Re: Imagem flutuante
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- ****
- Membro desde : 28/06/2011
Mensagens : 362
Pontos : 580 -
Re: Imagem flutuante
por Luciano98 08.08.11 22:57
Olá!
Código:
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.
Código:
bottom = "bottom" significa que a imagem ficará na parte de baixo, pode ser substituído por "top" (topo).<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>
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- Membro Entusiasta
- Membro desde : 02/09/2010
Mensagens : 7647
Pontos : 11049 -
Re: Imagem flutuante
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- ****
- Membro desde : 28/06/2011
Mensagens : 362
Pontos : 580 -
Tópicos semelhantes» Imagem flutuante
» Imagem flutuante no fórum
» Imagem flutuante ao lado
» Imagem flutuante
» Imagem flutuante com link a uma página
» Imagem flutuante no fórum
» Imagem flutuante ao lado
» Imagem flutuante
» Imagem flutuante com link a uma página
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
Facebook
Twitter
Youtube
