Colocar imagem escondida, mas que apareca ao clicar no mouse

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&synd=open&w=625&h=535&title=Portugal+Liga+Sagres+-+Classifica%C3%A7%C3%A3o&border=%23ffffff%7C0px%2C1px+solid+%23004488%7C0px%2C1px+solid+%23005599%7C0px%2C1px+solid+%230077BB%7C0px%2C1px+solid+%230088CC&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

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

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

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

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

Até ;]

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.

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.

por MateusV. 10.03.12 22:26

Olá, primeiro, aceda ao seu

Painel de controle Modulos HTML e Java Script Gestão das paginas HTML

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&synd=open&w=625&h=535&title=Portugal+Liga+Sagres+-+Classifica%C3%A7%C3%A3o&border=%23ffffff%7C0px%2C1px+solid+%23004488%7C0px%2C1px+solid+%23005599%7C0px%2C1px+solid+%230077BB%7C0px%2C1px+solid+%230088CC&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

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

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

por MateusV. 10.03.12 23:41

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

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>

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é

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.

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é

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

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

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é

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

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é

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.

por HelixMendix 11.03.12 0:23

Já resolvi o problema!

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?

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é

por HelixMendix 12.03.12 22:52

+1 para voçe!

Colocar imagem escondida, mas que apareca ao clicar no mouse

Colocar imagem escondida, mas que apareca ao clicar no mouse

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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