Criar painel de informações lateral "game state"

Detalhes da questão

Endereço do fórum: http://gsf-nwd.forumeiros.com/forum
Versão do fórum: phpBB3

Descrição

O que eu quero é por isso > , só que igual a isso (CLIQUE), mas como assim igual? Então eu queria que ficasse um botão semelhante ao da print e quando o mouse passasse em cima ele abrisse e mostrasse aquela tabela que mandei print. E após tirar o mouse de cima, ele fechar.


OBS: O fórum que eu vi, o "Facebook e twitter" ficam no portal, o meu eu não quero no portal, eu quero na pagina inicial, /forum


Link do meu fórum: http://gsf-nwd.forumeiros.com/
Link do fórum que eu vi: www.nwdgames.com

O senhor já tem a imagem para "abrir" o conteúdo escondido?

Sim.

Lembrando que a Tabela  HTML deve acompanha as informações conforme a essa tabela > Clique.


Seria quase a mesma coisa deste Tópico, a diferença é que não é no portal, e não é a mesma tabela.

Essa não foi a minha pergunta.
O senhor já tem uma imagem para "mostrar" o conteúdo da tabela?

Por exemplo, no caso do "widget" do facebook, a imagem é essa:
-> http://prntscr.com/g573a7

o/

O que irei usar ainda estou fazendo.. Mas para não atrasar, pode ser estes aqui por enquanto > Link 1 e 2

Olá,

Crie um novo JavaScript investido em todas as páginas com o código:

Código:

(function ($, config, styles) {
  'use strict';

  $(function () {

    $([
      '<div class="fa-server-wrapper">',
      '  <div class="fa-server-toggler">',
      '    <img src="http://i34.servimg.com/u/f34/16/04/51/75/open10.png" alt="Abrir" />',
      '  </div>',
      '  <div class="fa-server-iframe-wrapper">',
      '    ' + $('<iframe>', { 'src': 'http://www.game-state.com/iframe.php?' + config.join('&') }).prop('outerHTML'),
      '  </div>',
      '</div>'
    ].join('\n')).appendTo('body');

    $('<style>', { 'text': styles }).appendTo('head');
   
  });
}(jQuery, [
  'ip=198.100.144.190',
  'port=6545',
  'bgcolor=363636',
  'bordercolor=00FF00',
  'fieldcolor=FFFFFF',
  'valuecolor=EDEDED',
  'oddrowscolor=4D4D4D',
  'showgraph=true',
  'showplayers=true',
  'graphvalues=EDEDED',
  'graphaxis=FFFFFF',
  'width=230',
  'graph_height=105',
  'plist_height=110',
  'font_size=9'
], [
  '.fa-server-wrapper {',
  '  position: fixed;',
  '  top: 30vh;',
  '  right: -240px;',
  '  z-index: 9999;',
  '  transition: all 300ms linear;',
  '}',
  '',
  '.fa-server-wrapper .fa-server-iframe-wrapper > iframe {',
  '  width: 240px;',
  '  height: 382px;',
  '  border: solid 0px;',
  '}',
  '',
  '.fa-server-wrapper .fa-server-toggler {',
  '  position: absolute;',
  '  left: -31px;',
  '  top: 1px;',
  '}',
  '',
  '.fa-server-wrapper:hover {',
  '  right: -10px;',
  '}'
].join('\n')));

Salve e tudo feito!

Espero ter ajudado.
Até mais! o/

---

Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre códigos'.
Título alterado de 'Tabela HTML' para 'Criar painel de informações lateral "game state"'.

Resolvido. Agradeço