Colocar imagem escondida, mas que apareca ao clicar no mouse

3 participantes

Ir para baixo

Tópico resolvido Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por HelixMendix 10.03.12 0:37

Qual é minha questão:
Bem o que eu queria era o seguinte, vai ser dificil de explicar mas espero consegui-lo fazer.

É o seguinte, por exemplo ao entrarmos neste fórum --> http://pkmgoldenfit.forumeiros.com/forum vimos que no lado direito existe uma chatbox escondida e que aparece se clicar-mos com o mouse.


Eu queria fazer a mesma coisa mas com uma imagem que dá uma informação ao usuários.


Assim sendo a imagem/informação que eu queria que estivesse escondida era esta que está num código abaixo que é um script da Google

Código:
<script src="//www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/105284976166860547573/campeonato-portugues.xml&amp;synd=open&amp;w=625&amp;h=535&amp;title=Portugal+Liga+Sagres+-+Classifica%C3%A7%C3%A3o&amp;border=%23ffffff%7C0px%2C1px+solid+%23004488%7C0px%2C1px+solid+%23005599%7C0px%2C1px+solid+%230077BB%7C0px%2C1px+solid+%230088CC&amp;output=js"></script>



E a baixo a imagem que ficaria visivel no forum, onde ao clicar com o mause aparecesse a informação a cima

Colocar imagem escondida, mas que apareca ao clicar no mouse Liga%2Bsagre

Medidas que eu tomei para corrigir o problema:
Nothing

Links e imagens do meu problema:


Endereço do meu fórum:
http://www.ps3g.com/

Versão do meu fórum:
PUNBB
HelixMendix
HelixMendix
Membro

Membro desde : 06/02/2011
Mensagens : 837
Pontos : 1260

http://tugamovel.foruns.com.pt/

Ir para o topo Ir para baixo

Tópico resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por HelixMendix 10.03.12 21:16

Seria bom que alguem conseguisse fazer isto e tambem daria muito jeito a futuros usuários.

Ajuda-me MateusV. por favor
HelixMendix
HelixMendix
Membro

Membro desde : 06/02/2011
Mensagens : 837
Pontos : 1260

http://tugamovel.foruns.com.pt/

Ir para o topo Ir para baixo

Tópico resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por Josh 10.03.12 21:27

Boa noite,

Experimente este código:
<div style="overflow: visible; position: fixed; bottom: 30px; height: 350px; right: 0px; z-index:1000;"><iframe src="/chatbox" id="chatboxpop" scrolling="yes" style="height: 350px; float: right; overflow-x: visible; overflow-y: visible; display: none; width:700px" marginwidth="0" marginheight="0" frameborder="0"></iframe><div onclick="jQuery('#chatboxpop').animate({width:'toggle'},1200); jQuery('#chatboxopen,#chatboxclose').toggle();" style="margin-top: 10px; cursor :pointer; float:left"><img src="https://i.servimg.com/u/f34/16/04/51/75/open10.png" id="chatboxopen" style="display: inline; "><img src="https://i.servimg.com/u/f34/16/04/51/75/close10.png" id="chatboxclose" style="cursor: pointer; display: none; "></div></div>
Vermelho: O campo define se a imagem de abertura fica fixa na lateral do fórum ou se ela acompanha o chatbox em seu distender. Em 'right', a imagem acompanhará o chat e, em 'left', a imagem fica fixa na tela e o chat box se estende a sua esquerda.
Laranja: O campo define o tamanho em qual a largura do chat irá distender.
Azul: O valor deste campo define em quanto tempo o chat se abrirá por total. A cada 1000 = 1 segundo. Se o valor for 0, não há deslize e ele abre imediatamente.

Adicione o código em:
Painel de controle -> Módulos -> Portal & Widgets -> Gestão dos widgets (fórum/portal) -> Colocar imagem escondida, mas que apareca ao clicar no mouse Criar10

Até ;]
Josh
Josh
Super Membro

Membro desde : 03/03/2012
Mensagens : 1170
Pontos : 1512

Ir para o topo Ir para baixo

Tópico resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por HelixMendix 10.03.12 21:38

Mas isso fica num widget normalmente isso já tinha testado e eu não quero isso, quero no fórum inicial, onde a imagem Colocar imagem escondida, mas que apareca ao clicar no mouse Liga%2Bsagre fique visivel no forum e depois ao clicar nela que apareca o resto da informação que está no script.
HelixMendix
HelixMendix
Membro

Membro desde : 06/02/2011
Mensagens : 837
Pontos : 1260

http://tugamovel.foruns.com.pt/

Ir para o topo Ir para baixo

Tópico resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por HelixMendix 10.03.12 22:20

O código que voçe me deu é exactamente para colocar uma chatbox na lateral do forum e não é nada disso que eu estou a pedir neste tópico.
HelixMendix
HelixMendix
Membro

Membro desde : 06/02/2011
Mensagens : 837
Pontos : 1260

http://tugamovel.foruns.com.pt/

Ir para o topo Ir para baixo

Tópico resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por MateusV. 10.03.12 22:26

Olá, primeiro, aceda ao seu
Painel de controle Seta Modulos Seta HTML e Java Script Seta Gestão das paginas HTML
:seta2: Crie uma pagina HTML com as seguintes opções
Titulo: Oque desejar
Você deseja utilizar o início e o final da página do seu fórum ? Não
Usar esta página como página inicial? Não
Código HTML * :
Código:
<script src="//www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/105284976166860547573/campeonato-portugues.xml&amp;synd=open&amp;w=625&amp;h=535&amp;title=Portugal+Liga+Sagres+-+Classifica%C3%A7%C3%A3o&amp;border=%23ffffff%7C0px%2C1px+solid+%23004488%7C0px%2C1px+solid+%23005599%7C0px%2C1px+solid+%230077BB%7C0px%2C1px+solid+%230088CC&amp;output=js"></script>
Feito isso copie o url da pagina criada e crie um widget personalizado como citado acima, mas com este codigo
<div style="overflow: visible; position: fixed; bottom: 30px; height: 350px; right: 0px; z-index:1000;"><iframe src="URL DA PAGINA CRIADA" id="chatboxpop" scrolling="yes" style="height: 350px; float: right; overflow-x: visible; overflow-y: visible; display: none; width:700px" marginwidth="0" marginheight="0" frameborder="0"></iframe><div onclick="jQuery('#chatboxpop').animate({width:'toggle'},1200); jQuery('#chatboxopen,#chatboxclose').toggle();" style="margin-top: 10px; cursor :pointer; float:left"><img src="https://i.servimg.com/u/f34/16/04/51/75/open10.png" id="chatboxopen" style="display: inline; "><img src="https://i.servimg.com/u/f34/16/04/51/75/close10.png" id="chatboxclose" style="cursor: pointer; display: none; "></div></div>
Cordialmente. Feliz
MateusV.
MateusV.
Membro Entusiasta

Membro desde : 30/10/2011
Mensagens : 7017
Pontos : 9284

http://mateusv.site11.com/gerador2.html

Ir para o topo Ir para baixo

Tópico resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por HelixMendix 10.03.12 23:39

Agora decidi colocar no lado direito do forum por uma questão de visual, só que algo fica mal o close fica daquele lado, como o coloco para o outro lado onde está o rectangulo?

Ver imagem abaixo

Colocar imagem escondida, mas que apareca ao clicar no mouse Bavuxunmx9wbouocqv7h
HelixMendix
HelixMendix
Membro

Membro desde : 06/02/2011
Mensagens : 837
Pontos : 1260

http://tugamovel.foruns.com.pt/

Ir para o topo Ir para baixo

Tópico resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por MateusV. 10.03.12 23:41

Olá, deseja trocar de lado para a esquerda todo o codigo?
Cordialmente. Café
MateusV.
MateusV.
Membro Entusiasta

Membro desde : 30/10/2011
Mensagens : 7017
Pontos : 9284

http://mateusv.site11.com/gerador2.html

Ir para o topo Ir para baixo

Tópico resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por HelixMendix 10.03.12 23:43

Sim, eu já coloquei no lado esquerdo como pode ver na imagem, mas apenas o botão close é que fica desconfigurado.

Deixo aqui o código

Código:
<div style="overflow: visible; position: fixed; bottom: 30px; height: 430px; right: 0px; z-index:1000;"><iframe src="   http://www.ps3g.com/h6-liga-sagres" id="chatboxpop" scrolling="yes" style="height: 450px; float: right; overflow-x: visible; overflow-y: visible; display: none; width:700px" marginwidth="0" marginheight="0" frameborder="0"></iframe><div onclick="jQuery('#chatboxpop').animate({width:'toggle'},1200); jQuery('#chatboxopen,#chatboxclose').toggle();" style="margin-top: 10px; cursor :pointer; float:left"><img src="http://2.bp.blogspot.com/_nbk6dlAk0P8/SxFknXzpV6I/AAAAAAAAAGI/3kajF48Hx3g/s200/liga+sagres_logo.png" id="chatboxopen" style="display: inline; "><img src="http://i34.servimg.com/u/f34/16/04/51/75/close10.png" id="chatboxclose" style="cursor: pointer; display: none; "></div></div>
HelixMendix
HelixMendix
Membro

Membro desde : 06/02/2011
Mensagens : 837
Pontos : 1260

http://tugamovel.foruns.com.pt/

Ir para o topo Ir para baixo

Tópico resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por MateusV. 10.03.12 23:52

Olá, substitua o codigo por este
Código:
<div style="overflow: visible; position: fixed; bottom: 30px; height: 430px; right: 0px; z-index:1000;"><iframe src="  http://www.ps3g.com/h6-liga-sagres" id="chatboxpop" scrolling="yes" style="height: 450px; float: right; overflow-x: visible; overflow-y: visible; display: none; width:700px" marginwidth="0" marginheight="0" frameborder="0"></iframe><div onclick="jQuery('#chatboxpop').animate({width:'toggle'},1200); jQuery('#chatboxopen,#chatboxclose').toggle();" style="margin-top: 10px; cursor :pointer; float:right"><img src="http://2.bp.blogspot.com/_nbk6dlAk0P8/SxFknXzpV6I/AAAAAAAAAGI/3kajF48Hx3g/s200/liga+sagres_logo.png" id="chatboxopen" style="display: inline; "><img src="http://i34.servimg.com/u/f34/16/04/51/75/close10.png" id="chatboxclose" style="cursor: pointer; display: none; "></div></div>
Cordialmente. Café
MateusV.
MateusV.
Membro Entusiasta

Membro desde : 30/10/2011
Mensagens : 7017
Pontos : 9284

http://mateusv.site11.com/gerador2.html

Ir para o topo Ir para baixo

Tópico resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por HelixMendix 10.03.12 23:56

Eu acho que voçe se enganou, agora voçe colocou no lado direito e eu já tinha no lado ESQUERDO, apenas o botao close é que não fica bem quando o código passa para o lado esquerdo.
HelixMendix
HelixMendix
Membro

Membro desde : 06/02/2011
Mensagens : 837
Pontos : 1260

http://tugamovel.foruns.com.pt/

Ir para o topo Ir para baixo

Tópico resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por MateusV. 10.03.12 23:58

Olá, pelo que eu entendi o botão continua na direita certo? Substitua o codigo por este
Código:
<div style="overflow: visible; position: fixed; bottom: 30px; height: 430px; right: 0px; z-index:1000;"><iframe src="  http://www.ps3g.com/h6-liga-sagres" id="chatboxpop" scrolling="yes" style="height: 450px; float: left; overflow-x: visible; overflow-y: visible; display: none; width:700px" marginwidth="0" marginheight="0" frameborder="0"></iframe><div onclick="jQuery('#chatboxpop').animate({width:'toggle'},1200); jQuery('#chatboxopen,#chatboxclose').toggle();" style="margin-top: 10px; cursor :pointer; float:left"><img src="http://2.bp.blogspot.com/_nbk6dlAk0P8/SxFknXzpV6I/AAAAAAAAAGI/3kajF48Hx3g/s200/liga+sagres_logo.png" id="chatboxopen" style="display: inline; "><img src="http://i34.servimg.com/u/f34/16/04/51/75/close10.png" id="chatboxclose" style="cursor: pointer; display: none; "></div></div>
Cordialmente. Café
MateusV.
MateusV.
Membro Entusiasta

Membro desde : 30/10/2011
Mensagens : 7017
Pontos : 9284

http://mateusv.site11.com/gerador2.html

Ir para o topo Ir para baixo

Tópico resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por HelixMendix 11.03.12 0:04

Sim agora está no lado esquerdo, depois eu pego um melhor para substiuir esse, apenas apara acabar há uma coisa que me deixa mal que é este espaço que voçe vê na seta (ver imagem a baixo).

Tem como retirar?

Colocar imagem escondida, mas que apareca ao clicar no mouse Xj8ekghu03x7pv5binlp
HelixMendix
HelixMendix
Membro

Membro desde : 06/02/2011
Mensagens : 837
Pontos : 1260

http://tugamovel.foruns.com.pt/

Ir para o topo Ir para baixo

Tópico resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por MateusV. 11.03.12 0:06

Olá, sim, substitua o codigo por este
<div style="overflow: visible; position: fixed; bottom: 30px; height: 430px; right: 10px; z-index:1000;"><iframe src=" http://www.ps3g.com/h6-liga-sagres" id="chatboxpop" scrolling="yes" style="height: 450px; float: left; overflow-x: visible; overflow-y: visible; display: none; width:700px" marginwidth="0" marginheight="0" frameborder="0"></iframe><div onclick="jQuery('#chatboxpop').animate({width:'toggle'},1200); jQuery('#chatboxopen,#chatboxclose').toggle();" style="margin-top: 10px; cursor :pointer; float:left"><img src="http://2.bp.blogspot.com/_nbk6dlAk0P8/SxFknXzpV6I/AAAAAAAAAGI/3kajF48Hx3g/s200/liga+sagres_logo.png" id="chatboxopen" style="display: inline; "><img src="https://i.servimg.com/u/f34/16/04/51/75/close10.png" id="chatboxclose" style="cursor: pointer; display: none; "></div></div>
Modifique o que esta me vermelho até ficar como desejado..
Cordialmente. Café
MateusV.
MateusV.
Membro Entusiasta

Membro desde : 30/10/2011
Mensagens : 7017
Pontos : 9284

http://mateusv.site11.com/gerador2.html

Ir para o topo Ir para baixo

Tópico resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por HelixMendix 11.03.12 0:11

Não, ai o que muda é a imagem que fica visivel no forum para ser clicada e não o espaço, se calhar não dá ou dá?
HelixMendix
HelixMendix
Membro

Membro desde : 06/02/2011
Mensagens : 837
Pontos : 1260

http://tugamovel.foruns.com.pt/

Ir para o topo Ir para baixo

Tópico resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por MateusV. 11.03.12 0:15

Olá, substitua o codigo por este
<div style="overflow: visible; position: fixed; bottom: 30px; height: 430px; right: 10px; z-index:1000;"><iframe src=" http://www.ps3g.com/h6-liga-sagres" id="chatboxpop" scrolling="yes" style="height: 450px; float: left; overflow-x: visible; overflow-y: visible; display: none; width:700px" marginwidth="0" marginheight="0" frameborder="0"></iframe><div onclick="jQuery('#chatboxpop').animate({width:'toggle'},1000); jQuery('#chatboxopen,#chatboxclose').toggle();" style="margin-top: 10px; cursor :pointer; float:left"><img src="http://2.bp.blogspot.com/_nbk6dlAk0P8/SxFknXzpV6I/AAAAAAAAAGI/3kajF48Hx3g/s200/liga+sagres_logo.png" id="chatboxopen" style="display: inline; "><img src="https://i.servimg.com/u/f34/16/04/51/75/close10.png" id="chatboxclose" style="cursor: pointer; display: none; "></div></div>
Cordialmente. Café
MateusV.
MateusV.
Membro Entusiasta

Membro desde : 30/10/2011
Mensagens : 7017
Pontos : 9284

http://mateusv.site11.com/gerador2.html

Ir para o topo Ir para baixo

Tópico resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por HelixMendix 11.03.12 0:18

Ficou tudo na mesma, se calhar não dá mesmo deve ser o código script que não permite.

No entanto levou um OBRIGADO MateusV.
HelixMendix
HelixMendix
Membro

Membro desde : 06/02/2011
Mensagens : 837
Pontos : 1260

http://tugamovel.foruns.com.pt/

Ir para o topo Ir para baixo

Tópico resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por HelixMendix 11.03.12 0:23

Já resolvi o problema!


Última edição por HelixMendix em 12.03.12 22:44, editado 1 vez(es)
HelixMendix
HelixMendix
Membro

Membro desde : 06/02/2011
Mensagens : 837
Pontos : 1260

http://tugamovel.foruns.com.pt/

Ir para o topo Ir para baixo

Tópico resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por HelixMendix 12.03.12 22:43

Olá MateusV.

Queria fazer o mesmo processo mas desta vez com este código


Código:

<iframe src="http://www.tvdez.com/embed.php?c=sporttvalternativa&height=500&width=650&logofile=http://www.televisaofutebol.com/images/logostream.png&logolink=http://www.tvdez.com/sporttvalternativa" height="500" width="650" scrolling="no" border="0" frameborder="0" marginwidth="0" marginheight="0"></iframe>

O processo é o mesmo?
HelixMendix
HelixMendix
Membro

Membro desde : 06/02/2011
Mensagens : 837
Pontos : 1260

http://tugamovel.foruns.com.pt/

Ir para o topo Ir para baixo

Tópico resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por MateusV. 12.03.12 22:45

Olá, use este codigo
Código:
<div style="overflow: visible; position: fixed; bottom: 30px; height: 430px; right: 10px; z-index:1000;">
<iframe src="http://www.tvdez.com/embed.php?c=sporttvalternativa&height=500&width=650&logofile=http://www.televisaofutebol.com/images/logostream.png&logolink=http://www.tvdez.com/sporttvalternativa" id="chatboxpop" height="500" width="650" scrolling="no" border="0" frameborder="0" marginwidth="0" marginheight="0"></iframe><div onclick="jQuery('#chatboxpop').animate({width:'toggle'},1000); jQuery('#chatboxopen,#chatboxclose').toggle();" style="margin-top: 10px; cursor :pointer; float:left"><img src="http://2.bp.blogspot.com/_nbk6dlAk0P8/SxFknXzpV6I/AAAAAAAAAGI/3kajF48Hx3g/s200/liga+sagres_logo.png" id="chatboxopen" style="display: inline; "><img src="http://i34.servimg.com/u/f34/16/04/51/75/close10.png" id="chatboxclose" style="cursor: pointer; display: none; "></div></div>
Cordialmente. Café
MateusV.
MateusV.
Membro Entusiasta

Membro desde : 30/10/2011
Mensagens : 7017
Pontos : 9284

http://mateusv.site11.com/gerador2.html

Ir para o topo Ir para baixo

Tópico resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por HelixMendix 12.03.12 22:52

+1 para voçe!
HelixMendix
HelixMendix
Membro

Membro desde : 06/02/2011
Mensagens : 837
Pontos : 1260

http://tugamovel.foruns.com.pt/

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

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