Aplicar css/html nas mensagens

Qual é minha questão:
Olá a todos, eu gostaria de saber, como fazer um efeito nas mensagens com CSS/HTML.

Por ex, eu faço tutoriais de HTML e CSS, e gostaria de fazer o efeito que eu ensino no tutorial.

Por ex, esse que acabei de fazer.

Código:

    <img title="Firenando" src="http://upamais.com/images/72160684001332132291.png" style="opacity: 0.5;" onmouseover="this.style.opacity=1;" onmouseout="this.style.opacity=0.5;" />

Seria HTML, eu gostaria de colocar esse código, e o efeito ser feito, que seria a opacidade.

Espero que tenham entendido.

Obrigado.

Links e imagens do meu problema:
Não precisa.

Endereço do meu fórum:
http://br-designerforever.forumeiros.com

Versão do meu fórum:
PHPBB3

Olá Firenando!

O que você gostaria de fazer? Não seria somente usar o style="propriedades" no HTML, quando abrimos o "Inspecionar elemento" existe um local ao lado com as seguintes informações "element.style", a partir deste você personaliza o local, depois disso é somente editar e copiar o código em HTML.

Até mais.

Bom, eu copio e colo o HTML, mais ele não surge efeito.

Já tentei com várias Tags e não funciona.

Creio que é o meu JS do Ant-Owner que está bloqueando o style=.

Seria isso?

Obrigado.

Olá novamente!

Seu HTML está ativado? Cheque em Painel de controle > Geral > Mensagens > Configuração, procure por permitir HTML.

Sobre o código de bloquear CSS nas mensagens, pedi que o Admineiro Luciano98 averigue o caso(Se interfere ou não o código do tutorial).

Até mais.

Sim, está ativado, sempre olho tudo antes de vir " tomar " o tempo de vocês .

Vou ver em meu fórum de testes, sem esse JS para ver se funciona, e já venho falar.

Obrigado.

Edit: Não funcionou nem com JS desativado...

Olá!

Isto não é erro, é padrão, códigos Js não são aceitos nos posts, ou seja, o navegador não irá ler qualquer código, creio eu que seja uma medida de segurança, já que existem várias maneiras de invadir e criar algumas "falhas" em seu fórum atravez de Javascript, todavia existe um serviço de hospedamento de códigos chamado de Jsbin, nele poderá colocar os códigos que o senhor usa para seus tutorias e o senhor terá uma visão do resultado automaticamente, sem precisar nem mesmo criar uma conta, peço que cheque este link:
http://jsbin.com/

Abraços.

Bom, eu fiz tudo certinho, aqui está o JS.

http://jsbin.com/ivipeg/1

Mais como eu faço para ele aparecer na minha mensagem agora?

Obrigado.

Olá!

Você pode fazer esse mesmo efeito utilizando CSS:

Código:

<style>#firenandoavatar:hover{opacity:1}</style><img id="firenandoavatar" title="Firenando" src="http://upamais.com/images/72160684001332132291.png" style="opacity: 0.5;">

Até mais.

Esse não funciona Luciano...

Firenando escreveu:Bom, eu fiz tudo certinho, aqui está o JS.

http://jsbin.com/ivipeg/1

Mais como eu faço para ele aparecer na minha mensagem agora?

Obrigado.

Olá!

Como eu citei anteriormente não se pode adicionar na mensagem, o que você pode fazer é mandar o link do código no Jsbin em seu tutorial.

Abraços.

Olá, sim é possível, aqui está um forum forumeiros que tem esse efeito.

http://spdesign.ativoforum.com/t2538-tutorial-efeito-opacidade-no-avatar-ao-passar-o-mouse-no-post

Veja no resultado o efeito.

Obrigado.

Olá!

Mas o código é feito com CSS e não com javascript, basta o senhor adicionar no seu post:

<img class="hover" src="https://2img.net/u/2612/28/77/07/avatars/41920-33.png" />

E em seu CSS:

.hover:hover {
opacity: 1;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
}
.hover {
opacity: 0.7;
}

Abraços.

cara eu te entendo nos tutoriais FdF eles fazem isso eu tbm quero fazer isso no meu fórum

https://ajuda.forumeiros.com/t30464-

Chandler escreveu:Olá!

Mas o código é feito com CSS e não com javascript, basta o senhor adicionar no seu post:

<img class="hover" src="https://2img.net/u/2612/28/77/07/avatars/41920-33.png" />

E em seu CSS:

.hover:hover {
opacity: 1;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
}
.hover {
opacity: 0.7;
}

Abraços.

Obrigado, com isso tive uma iideia para meu fórum.

E o outro poste, antes desse aqui, um usuário postou uma coisa nada a ver... Flood...

Obrigado, pode fechar o tópico.