Colocar imagem escondida, mas que apareca ao clicar no mouse

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

Resolvido Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por HelixMendix em 09/03/12, 09:37 pm

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



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
avatar

HelixMendix
Usuário destaque

Masculino
Inscrito dia : 06/02/2011
Mensagens : 836
Pontos Ativos : 1262

Ver perfil do usuário http://tugamovel.foruns.com.pt/

Resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por HelixMendix em 10/03/12, 06:16 pm

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

Ajuda-me MateusV. por favor
avatar

HelixMendix
Usuário destaque

Masculino
Inscrito dia : 06/02/2011
Mensagens : 836
Pontos Ativos : 1262

Ver perfil do usuário http://tugamovel.foruns.com.pt/
  • 0

Resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por Josh em 10/03/12, 06:27 pm

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="http://i34.servimg.com/u/f34/16/04/51/75/open10.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>
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) ->

Até ;]
avatar

Josh
Membro do Fórum

Inscrito dia : 03/03/2012
Mensagens : 1170
Pontos Ativos : 1512

Ver perfil do usuário

Resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por HelixMendix em 10/03/12, 06:38 pm

Mas isso fica num widget normalmente isso já tinha testado e eu não quero isso, quero no fórum inicial, onde a imagem fique visivel no forum e depois ao clicar nela que apareca o resto da informação que está no script.
avatar

HelixMendix
Usuário destaque

Masculino
Inscrito dia : 06/02/2011
Mensagens : 836
Pontos Ativos : 1262

Ver perfil do usuário http://tugamovel.foruns.com.pt/

Resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por HelixMendix em 10/03/12, 07:20 pm

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.
avatar

HelixMendix
Usuário destaque

Masculino
Inscrito dia : 06/02/2011
Mensagens : 836
Pontos Ativos : 1262

Ver perfil do usuário http://tugamovel.foruns.com.pt/

Resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por MateusV. em 10/03/12, 07:26 pm

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="http://i34.servimg.com/u/f34/16/04/51/75/open10.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. Feliz
avatar

MateusV.
Principal contribuidor
Principal contribuidor

Inscrito dia : 30/10/2011
Mensagens : 7017
Pontos Ativos : 9289

Ver perfil do usuário http://mateusv.site11.com/gerador2.html

Resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por HelixMendix em 10/03/12, 08:39 pm

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

avatar

HelixMendix
Usuário destaque

Masculino
Inscrito dia : 06/02/2011
Mensagens : 836
Pontos Ativos : 1262

Ver perfil do usuário http://tugamovel.foruns.com.pt/

Resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por MateusV. em 10/03/12, 08:41 pm

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

MateusV.
Principal contribuidor
Principal contribuidor

Inscrito dia : 30/10/2011
Mensagens : 7017
Pontos Ativos : 9289

Ver perfil do usuário http://mateusv.site11.com/gerador2.html

Resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por HelixMendix em 10/03/12, 08:43 pm

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>
avatar

HelixMendix
Usuário destaque

Masculino
Inscrito dia : 06/02/2011
Mensagens : 836
Pontos Ativos : 1262

Ver perfil do usuário http://tugamovel.foruns.com.pt/

Resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por MateusV. em 10/03/12, 08:52 pm

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é
avatar

MateusV.
Principal contribuidor
Principal contribuidor

Inscrito dia : 30/10/2011
Mensagens : 7017
Pontos Ativos : 9289

Ver perfil do usuário http://mateusv.site11.com/gerador2.html

Resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por HelixMendix em 10/03/12, 08:56 pm

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.
avatar

HelixMendix
Usuário destaque

Masculino
Inscrito dia : 06/02/2011
Mensagens : 836
Pontos Ativos : 1262

Ver perfil do usuário http://tugamovel.foruns.com.pt/

Resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por MateusV. em 10/03/12, 08:58 pm

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é
avatar

MateusV.
Principal contribuidor
Principal contribuidor

Inscrito dia : 30/10/2011
Mensagens : 7017
Pontos Ativos : 9289

Ver perfil do usuário http://mateusv.site11.com/gerador2.html

Resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por HelixMendix em 10/03/12, 09:04 pm

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?

avatar

HelixMendix
Usuário destaque

Masculino
Inscrito dia : 06/02/2011
Mensagens : 836
Pontos Ativos : 1262

Ver perfil do usuário http://tugamovel.foruns.com.pt/

Resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por MateusV. em 10/03/12, 09:06 pm

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="http://i34.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é
avatar

MateusV.
Principal contribuidor
Principal contribuidor

Inscrito dia : 30/10/2011
Mensagens : 7017
Pontos Ativos : 9289

Ver perfil do usuário http://mateusv.site11.com/gerador2.html

Resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por HelixMendix em 10/03/12, 09:11 pm

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á?
avatar

HelixMendix
Usuário destaque

Masculino
Inscrito dia : 06/02/2011
Mensagens : 836
Pontos Ativos : 1262

Ver perfil do usuário http://tugamovel.foruns.com.pt/

Resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por MateusV. em 10/03/12, 09:15 pm

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="http://i34.servimg.com/u/f34/16/04/51/75/close10.png" id="chatboxclose" style="cursor: pointer; display: none; "></div></div>
Cordialmente. Café
avatar

MateusV.
Principal contribuidor
Principal contribuidor

Inscrito dia : 30/10/2011
Mensagens : 7017
Pontos Ativos : 9289

Ver perfil do usuário http://mateusv.site11.com/gerador2.html

Resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por HelixMendix em 10/03/12, 09:18 pm

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.
avatar

HelixMendix
Usuário destaque

Masculino
Inscrito dia : 06/02/2011
Mensagens : 836
Pontos Ativos : 1262

Ver perfil do usuário http://tugamovel.foruns.com.pt/

Resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por HelixMendix em 10/03/12, 09:23 pm

Já resolvi o problema!


Última edição por HelixMendix em 12/03/12, 07:44 pm, editado 1 vez(es)
avatar

HelixMendix
Usuário destaque

Masculino
Inscrito dia : 06/02/2011
Mensagens : 836
Pontos Ativos : 1262

Ver perfil do usuário http://tugamovel.foruns.com.pt/

Resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por HelixMendix em 12/03/12, 07:43 pm

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?
avatar

HelixMendix
Usuário destaque

Masculino
Inscrito dia : 06/02/2011
Mensagens : 836
Pontos Ativos : 1262

Ver perfil do usuário http://tugamovel.foruns.com.pt/
  • 0

Resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por MateusV. em 12/03/12, 07:45 pm

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é
avatar

MateusV.
Principal contribuidor
Principal contribuidor

Inscrito dia : 30/10/2011
Mensagens : 7017
Pontos Ativos : 9289

Ver perfil do usuário http://mateusv.site11.com/gerador2.html

Resolvido Re: Colocar imagem escondida, mas que apareca ao clicar no mouse

Mensagem por HelixMendix em 12/03/12, 07:52 pm

+1 para voçe!
avatar

HelixMendix
Usuário destaque

Masculino
Inscrito dia : 06/02/2011
Mensagens : 836
Pontos Ativos : 1262

Ver perfil do usuário http://tugamovel.foruns.com.pt/

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