Códigos para efeitos

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

Resolvido Códigos para efeitos

Mensagem por pyrohinotama em 25/05/13, 11:36 am

Qual é minha questão:
Ola, alguém conhece um código html que possa ser postado em tópicos e mensagens que ao passar o mouse por cima de uma imagem ou informação aconteça um efeito que faz aparecer outra imagem ou informação 

Endereço do meu fórum:
http://rpgadventure.umforum.net

Versão do fórum:
PHPBB2


Última edição por pyrohinotama em 25/05/13, 09:05 pm, editado 1 vez(es)
avatar

pyrohinotama
Usuário destaque

Masculino
Inscrito dia : 29/03/2013
Mensagens : 852
Pontos Ativos : 1304

Ver perfil do usuário http://rpgadventure.umforum.net/h2-alianca-katsuo

Resolvido Re: Códigos para efeitos

Mensagem por Sking em 25/05/13, 01:13 pm

Olá,
isso não e possível
por que usa Java script

Até mais

Sking
Membro do Fórum

Masculino
Inscrito dia : 10/10/2011
Mensagens : 1750
Pontos Ativos : 2484

Ver perfil do usuário https://www.facebook.com/davis.natsu

Resolvido Re: Códigos para efeitos

Mensagem por pyrohinotama em 25/05/13, 02:33 pm

na verdade existe sim aqui está um exemplo( lá em observações ):

Spoiler:
<link href='http://fonts.googleapis.com/css?family=Wire+One' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Montez' rel='stylesheet' type='text/css'><center><div style="width: 600px; padding: 2px; border-right: 8px solid #B8860B; border-left: 8px solid #B8860B; -moz-border-radius: 50px 50px 30px 30px; border-radius: 50px 50px 30px 30px;"><div style="width: 500px; height: 200px; background-image: url(http://media.tumblr.com/tumblr_lvovjcEUrE1r3h4ef.gif); -moz-border-radius: 50px 50px 50px 50px; border-radius: 50px 50px 50px 50px;"></div><BR><div style="width:450px; color: #DAA520; font-family: Montez; text-align: left; font-size:40px; padding-top: 0px; padding-bottom: 0px;">Cause i'm only a crack...</div>
<div style="width:450px; color: gray; font-family: Wire One; font-size: 24px; text-transform: uppercase; text-align: Right; padding-top: 0px; padding-bottom: 0px;">In this Castle Of Glass.</div>
<div style="width: 450px; padding: 5px; border-right: 1px dotted #B8860B; border-left: 1px dotted #B8860B; font-family: trebuchet ms; font-size: 11px; text-align: justify; letter-spacing: 2px; overflow: auto;">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

<center><style text="text/css">#image { width: 420px; height: 150px; background-image: url(xxx); border-top: 1px dashed #9C9C9C; border-bottom: 1px dashed #9C9C9C; }#box { width: 420px; }#box:hover #info { display: block; }#infotitle { width: 305px; background-color: #B8860B; padding: 10px; text-align: center; font-family:wire one; font-size: 30px; letter-spacing: 5; color: #FFFFFF; text-transform: uppercase; -webkit-transition-property: color, background-color, letter-spacing; -webkit-transition-duration: .5s, .5s, .5s; -webkit-transition-timing-function: linear, ease-in; -moz-transition-property: color, background-color; -moz-transition-duration: .5s, .5s, .5s; -moz-transition-timing-function: linear, ease-in; }#infotitle:hover { display: block; width: 305px; background-color: #B8860B; padding: 10px; text-align: center; font-family: wire one; font-size: 30px; letter-spacing: 15; color: #FFFFFF; text-transform: uppercase; }#info { display: none; -moz-transition: display .5s ease-in; -webkit-transition: display .5s ease-in; width: 305px; padding: 10px; background-color: #B8860B; text-align: justify; font-family: tahoma; font-size: 12px; color: #FFFFFF; line-height: .9; -webkit-border-radius: 0px 0px 10px 10px; -moz-border-radius: 0px 0px 50px 50px;} #box { width: 320px; }#boxy:hover #plotting { display: block; } #plotting { display: none; -moz-transition: display .5s ease-in; -webkit-transition: display .5s ease-in; width: 220px; border-left: 15px solid #FFFFFF; border-right: 15px solid #FFFFFF; border-bottom: 15px solid #FFFFFF; padding: 10px; background-color: #B8860B; text-align: justify; font-family: arial; font-size: 9px; color: #EE3B3B; line-height: .9; } </style><center><BR><BR><link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'><style class="text/css">@import url(http://fonts.googleapis.com/css?family=Wire+One);</style></div><div style="position: relative; "><div id="box"><div id="infotitle">OBSERVAÇÕES</div><div id="info">
Armas


Arma I Descrição.

Poderes Ativos


Poder Ativo I Descrição.

Poderes Passivos


Poder Passivo I Descrição.

Enfim, editem aqui conforme a criatividade de vocês.</div>
<BR><BR>
</div></div></div></center>



</div></center>
avatar

pyrohinotama
Usuário destaque

Masculino
Inscrito dia : 29/03/2013
Mensagens : 852
Pontos Ativos : 1304

Ver perfil do usuário http://rpgadventure.umforum.net/h2-alianca-katsuo

Resolvido Re: Códigos para efeitos

Mensagem por Folit em 25/05/13, 02:37 pm

<div id="box"><div id="infotitle">OBSERVAÇÕES</div><div id="info"><br><div style="margin:auto;text-align:center;width:100%"><strong><font color="#CD3333">Armas</font></strong></div><br><br>Arma I <strong><font color="#CD3333">▬</font></strong> Descrição.<br><br><div style="margin:auto;text-align:center;width:100%"><strong><font color="#CD3333">Poderes Ativos</font></strong></div><br><br>Poder Ativo I <strong><font color="#CD3333">▬</font></strong> Descrição.<br><br><div style="margin:auto;text-align:center;width:100%"><strong><font color="#CD3333">Poderes Passivos</font></strong></div><br><br>Poder Passivo I <strong><font color="#CD3333">▬</font></strong> Descrição.<br><br>Enfim, editem aqui conforme a criatividade de vocês.</div><br><br><br><br></div>
Vou por o codigo

Código:
<div id="box"><div id="infotitle">OBSERVAÇÕES</div><div id="info"><br><div style="margin:auto;text-align:center;width:100%"><strong><font color="#CD3333">Armas</font></strong></div><br><br>Arma I <strong><font color="#CD3333">▬</font></strong> Descrição.<br><br><div style="margin:auto;text-align:center;width:100%"><strong><font color="#CD3333">Poderes Ativos</font></strong></div><br><br>Poder Ativo I <strong><font color="#CD3333">▬</font></strong> Descrição.<br><br><div style="margin:auto;text-align:center;width:100%"><strong><font color="#CD3333">Poderes Passivos</font></strong></div><br><br>Poder Passivo I <strong><font color="#CD3333">▬</font></strong> Descrição.<br><br>Enfim, editem aqui conforme a criatividade de vocês.</div><br>
avatar

Folit
Nível 8

Masculino
Inscrito dia : 28/04/2013
Mensagens : 120
Pontos Ativos : 187

Ver perfil do usuário http://folit.forumeiro.com/

Resolvido Re: Códigos para efeitos

Mensagem por MateusA em 25/05/13, 02:43 pm

Olá! Vocês bugaram o tópico ¬¬'


Código:
<span style="font-size:10px;"> <center><div class="informações">
<span style="display: block; width: 400px; height: 100px; background: url(http://i70.servimg.com/u/f70/16/88/27/59/paisdo12.png) center center no-repeat;">
<span class="informações_conteudo ">O País do Relâmpago (Rai no Kuni ) é um território pouco explorado. É um dos grandes países do mundo Shinobi, sendo composto por grandes cadeias montanhas que culminam em lagos e riachos nos seus vales. No seu interior e bem protegida encontra-se Kumogakure no Sato
</span>
</span><br /><strong></strong> </td><style>
.informações{border:2px solid #E3D9C7;box-shadow:1px 1px 1px #191817;display:block;height:100px;margin:auto;overflow:hidden;width:400px}.informações_conteudo{-webkit-transition:all 2s ease 0;background-color:#FFF;color:#636363;display:block;font-size:10px;height:91px;opacity:0;overflow:auto;padding:5px;position:absolute;transition:all 2s ease 0;width:391px}.informações_conteudo:hover{-webkit-transition:all 2s ease .1s;opacity:.75;transition:all 2s ease .1s}.titlebox{-moz-border-radius:3px;-moz-box-shadow:inset rgba(0,0,0,0.1) 0 1px 4px;-webkit-border-radius:3px;-webkit-box-shadow:inset rgba(0,0,0,0.1) 0 1px 4px;background:#EFEFEF;border:1px solid #CCC;border-radius:3px;box-shadow:inset rgba(0,0,0,0.1) 0 1px 4px;margin-bottom:10px;overflow:hidden;padding:11px;position:relative;text-shadow:#fff 0 1px 0;top:43px}</style>

Procure por http://i70.servimg.com/u/f70/16/88/27/59/paisdo12.png e subistitua pela URL DA SUA IMAGEM.

Procure por O País do Relâmpago (Rai no Kuni ) é um território pouco explorado. É um dos grandes países do mundo Shinobi, sendo composto por grandes cadeias montanhas que culminam em lagos e riachos nos seus vales. No seu interior e bem protegida encontra-se Kumogakure no Sato

e subistitua pelo seu texto.

Até mais.
avatar

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

Ver perfil do usuário https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Resolvido Re: Códigos para efeitos

Mensagem por pyrohinotama em 25/05/13, 04:52 pm

até que gostei deste.
alguém conhece mais códigos?
avatar

pyrohinotama
Usuário destaque

Masculino
Inscrito dia : 29/03/2013
Mensagens : 852
Pontos Ativos : 1304

Ver perfil do usuário http://rpgadventure.umforum.net/h2-alianca-katsuo

Resolvido Re: Códigos para efeitos

Mensagem por BrunoH. em 25/05/13, 06:29 pm

Olá,

Se o senhor possui algum fórum que viu o tal efeito do HTML nos tópicos, me informe o URL do tópico do fórum para eu eu possa extrair os códigos.

Até mais.
avatar

BrunoH.
Principal contribuidor
Principal contribuidor

Inscrito dia : 15/06/2012
Mensagens : 7675
Pontos Ativos : 10382

Ver perfil do usuário http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Resolvido Re: Códigos para efeitos

Mensagem por pyrohinotama em 25/05/13, 07:48 pm

infelizmente não possuo Triste , mas como sei que existe postei aqui pra ve se acho Feliz
avatar

pyrohinotama
Usuário destaque

Masculino
Inscrito dia : 29/03/2013
Mensagens : 852
Pontos Ativos : 1304

Ver perfil do usuário http://rpgadventure.umforum.net/h2-alianca-katsuo

Resolvido Re: Códigos para efeitos

Mensagem por MateusA em 25/05/13, 09:00 pm

Olá!

Bem lhe forneci de um modo não sei se lhe agradou mais "aqui não e a secção grafica para ficarmos lhe mostrando opções para ver se lhe agrada.Aqui ajudamos as pessoas que dissem oque querem."

Até mais.
avatar

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

Ver perfil do usuário https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Resolvido Re: Códigos para efeitos

Mensagem por pyrohinotama em 25/05/13, 09:04 pm

-.-' ok então... tópico resolvido
avatar

pyrohinotama
Usuário destaque

Masculino
Inscrito dia : 29/03/2013
Mensagens : 852
Pontos Ativos : 1304

Ver perfil do usuário http://rpgadventure.umforum.net/h2-alianca-katsuo

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