Mudanças de imagens e redirecionamento

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

Resolvido Mudanças de imagens e redirecionamento

Mensagem por Rapha Didone em 20/09/13, 10:48 am

Qual é minha questão:
Gostaria de saber para colocar o seguinte efeito nessa imagem: quando a seta do mouse for colocada em cima da primeira imagem, desejo que ela mude para a segunda imagem. Utilizo a primeira imagem no fórum para redirecionamento de páginas e pretendo continuar usando, só que com esse efeito.

http://i75.servimg.com/u/f75/17/89/52/18/ir_ver10.png

http://i75.servimg.com/u/f75/17/89/52/18/ir_lar10.png

Endereço do meu fórum:
http://foge.forum-livre.com

Versão do fórum:
PHPBB3


Última edição por Davidson em 23/09/13, 07:26 am, editado 1 vez(es)
avatar

Rapha Didone
Usuário avançado

Masculino
Inscrito dia : 03/11/2012
Mensagens : 443
Pontos Ativos : 717

Ver perfil do usuário http://www.clubedosestudantes.com

Resolvido Re: Mudanças de imagens e redirecionamento

Mensagem por Sennior em 20/09/13, 12:06 pm

Bem, fazer está função é simples, mas onde as imagens estarão no caso? Um exemplo:

Código:
#quick_reply:hover {
background-image: url(http://i75.servimg.com/u/f75/17/89/52/18/ir_lar10.png);
background-repeat: no-repeat;
}
#quick_reply {
background-image: url(http://i75.servimg.com/u/f75/17/89/52/18/ir_ver10.png);
background-repeat: no-repeat;
}
Este ficara um botão nas respostas rápidas, mas no caso sem nenhum efeito, apenas uma imagem. Onde deseja este efeito?

Até mais.
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Mudanças de imagens e redirecionamento

Mensagem por Rapha Didone em 20/09/13, 01:29 pm

Olá Sennior,

As imagens estarão dentro de um widget (página html), posso usar esse código lá?
avatar

Rapha Didone
Usuário avançado

Masculino
Inscrito dia : 03/11/2012
Mensagens : 443
Pontos Ativos : 717

Ver perfil do usuário http://www.clubedosestudantes.com

Resolvido Re: Mudanças de imagens e redirecionamento

Mensagem por Sennior em 20/09/13, 01:34 pm

Não, ai teremos que criar um código especifico para tal... Mande-me á pagina HTML.

Até mais.
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Mudanças de imagens e redirecionamento

Mensagem por Rapha Didone em 20/09/13, 02:16 pm

Spoiler:
<div class="panel introduction"><div class="inner"><span class="corners-top"><span></span></span><div class="h3"> FOGE - FÓRUM GRATUITO DE ENSINO</div><div class="mes-txt"><div style="padding: 11px; padding-bottom: 0;"><table><tr class="zebraDois"><td><a href="http://foge.forum-livre.com" target="_blanck"><img id="mascote" src="http://i39.tinypic.com/2n665q8.png" align="left"></a></td><td><div style="padding: 3px;"><div style="margin:auto;text-align:left;width:100%"><b>NOSSA MISSÃO</b></div>
Proporcionar uma educação de excelência e inovadora em um ambiente acolhedor, promovendo a formação de cidadãos capazes de responder com dinamismo aos desafios da sociedade globalizada. Para isso, vamos desenvolver o potencial das pessoas a partir do aprimoramento de seus talentos, conhecimentos, habilidades e atitudes, por meio de produtos e serviços educacionais gratuitos.
<br><br><div style="margin:auto;text-align:left;width:100%"><b>NOSSA VISÃO</b></div>
Ser um fórum de referência na internet de correção de redação e esclarecimentos de dúvidas sobre Língua Portuguesa. Reconhecido como a melhor opção por membros, colaboradores e comunidades, pela qualidade de nossos produtos, serviços e relacionamento.

<br><br><div style="margin:auto;text-align:left;width:100%"><b>NOSSOS VALORES</b></div>
- Comprometimento
<br>- Integridade
<br>- Valorização humana
<br>- Excelência na prestação de serviços
<br>- Responsabilidade social e ambiental
<br>- Altruísmo
<br>- Inovação
<br>- Melhoria contínua<div style="margin:auto;text-align:center;width:100%">
<a href="http://foge.forum-livre.com/forum?tid=b5cfb17296458ff367bfadd50889622d" class="postlink"><img src="http://i75.servimg.com/u/f75/17/89/52/18/ir_ver11.png" border="0" alt="" /></a>
</div>

A página está no spoiler. Gostaria que assim que o mouse fosse passado no botão vermelho que ele ficasse laranjado e que o redirecionamento seja mantido. Obrigado! Muito feliz
avatar

Rapha Didone
Usuário avançado

Masculino
Inscrito dia : 03/11/2012
Mensagens : 443
Pontos Ativos : 717

Ver perfil do usuário http://www.clubedosestudantes.com

Resolvido Re: Mudanças de imagens e redirecionamento

Mensagem por Sennior em 20/09/13, 09:16 pm

Olá amigo!

Desculpe á demora! Vá em teu CSS com este código:
Código:
.Sennior:hover {
background-image: url(http://i75.servimg.com/u/f75/17/89/52/18/ir_lar10.png);
background-repeat: no-repeat;
padding: 37px;
text-align: center;
position: relative;
left: 34pc;
}
.Sennior {
background-image: url(http://i75.servimg.com/u/f75/17/89/52/18/ir_ver10.png);
background-repeat: no-repeat;
padding: 37px;
text-align: center;
position: relative;
left: 34pc;
}
Depois o código HTML:

Código:
<div class="panel introduction"><div class="inner"><span class="corners-top"><span></span></span><div class="h3"> FOGE - FÓRUM GRATUITO DE ENSINO</div><div class="mes-txt"><div style="padding: 11px; padding-bottom: 0;"><table><tr class="zebraDois"><td><a href="http://foge.forum-livre.com" target="_blanck"><img id="mascote" src="http://i39.tinypic.com/2n665q8.png" align="left"></a></td><td><div style="padding: 3px;"><div style="margin:auto;text-align:left;width:100%"><b>NOSSA MISSÃO</b></div>
Proporcionar uma educação de excelência e inovadora em um ambiente acolhedor, promovendo a formação de cidadãos capazes de responder com dinamismo aos desafios da sociedade globalizada. Para isso, vamos desenvolver o potencial das pessoas a partir do aprimoramento de seus talentos, conhecimentos, habilidades e atitudes, por meio de produtos e serviços educacionais gratuitos.
<br><br><div style="margin:auto;text-align:left;width:100%"><b>NOSSA VISÃO</b></div>
Ser um fórum de referência na internet de correção de redação e esclarecimentos de dúvidas sobre Língua Portuguesa. Reconhecido como a melhor opção por membros, colaboradores e comunidades, pela qualidade de nossos produtos, serviços e relacionamento.

<br><br><div style="margin:auto;text-align:left;width:100%"><b>NOSSOS VALORES</b></div>
- Comprometimento
<br>- Integridade
<br>- Valorização humana
<br>- Excelência na prestação de serviços
<br>- Responsabilidade social e ambiental
<br>- Altruísmo
<br>- Inovação
<br>- Melhoria contínua<div style="margin:auto;text-align:center;width:100%">
<div class="Sennior"><a href="http://foge.forum-livre.com/forum?tid=b5cfb17296458ff367bfadd50889622d" class="postlink"></a></span>
</div>
Até mais.
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Mudanças de imagens e redirecionamento

Mensagem por Rapha Didone em 21/09/13, 02:32 pm

Oi Sennior,

A mudança de imagem ficou certinha, mas ao clicar não há redirecionamento de página.
avatar

Rapha Didone
Usuário avançado

Masculino
Inscrito dia : 03/11/2012
Mensagens : 443
Pontos Ativos : 717

Ver perfil do usuário http://www.clubedosestudantes.com

Resolvido Re: Mudanças de imagens e redirecionamento

Mensagem por Sennior em 21/09/13, 05:49 pm

Olá amigo!

Altere o código CSS que eu lhe passei, pelo abaixo:

Código:
.postlink:hover {
background-image: url(http://i75.servimg.com/u/f75/17/89/52/18/ir_lar10.png);
background-repeat: no-repeat;
padding: 37px;
text-align: center;
position: relative;
left: -4pc;
}
.postlink {
background-image: url(http://i75.servimg.com/u/f75/17/89/52/18/ir_ver10.png);
background-repeat: no-repeat;
padding: 37px;
text-align: center;
position: relative;
left: -4pc;
}
Até mais.
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Mudanças de imagens e redirecionamento

Mensagem por Rapha Didone em 21/09/13, 06:13 pm

Sennior,

Está acontecendo o seguinte: a imagem agora redireciona para a outra página. Só que na outra página aparece duas imagens desse botão no fórum. E quando retirei o css ele desapareceu. O problema agora está provavelmente no css.
avatar

Rapha Didone
Usuário avançado

Masculino
Inscrito dia : 03/11/2012
Mensagens : 443
Pontos Ativos : 717

Ver perfil do usuário http://www.clubedosestudantes.com

Resolvido Re: Mudanças de imagens e redirecionamento

Mensagem por Tofu em 22/09/13, 03:45 pm

Olá!

É bem simples.

Ignore tudo que já foi tentado. Substitua o HTML da página pelo seguinte:

Código:
<div class="panel introduction"><div class="inner"><span class="corners-top"><span></span></span><div class="h3">

FOGE - FÓRUM GRATUITO DE ENSINO</div><div class="mes-txt"><div style="padding: 11px; padding-bottom:

0;"><table><tr class="zebraDois"><td><a href="http://foge.forum-livre.com" target="_blanck"><img id="mascote"

src="http://i39.tinypic.com/2n665q8.png" align="left"></a></td><td><div style="padding: 3px;"><div

style="margin:auto;text-align:left;width:100%"><b>NOSSA MISSÃO</b></div>
Proporcionar uma educação de excelência e inovadora em um ambiente acolhedor, promovendo a formação de cidadãos capazes

de responder com dinamismo aos desafios da sociedade globalizada. Para isso, vamos desenvolver o potencial das pessoas a

partir do aprimoramento de seus talentos, conhecimentos, habilidades e atitudes, por meio de produtos e serviços educacionais

gratuitos.
<br><br><div style="margin:auto;text-align:left;width:100%"><b>NOSSA VISÃO</b></div>
Ser um fórum de referência na internet de correção de redação e esclarecimentos de dúvidas sobre Língua Portuguesa.

Reconhecido como a melhor opção por membros, colaboradores e comunidades, pela qualidade de nossos produtos, serviços e

relacionamento.

<br><br><div style="margin:auto;text-align:left;width:100%"><b>NOSSOS VALORES</b></div>
- Comprometimento
<br>- Integridade
<br>- Valorização humana
<br>- Excelência na prestação de serviços
<br>- Responsabilidade social e ambiental
<br>- Altruísmo
<br>- Inovação
<br>- Melhoria contínua<div style="margin:auto;text-align:center;width:100%">
<style>a:hover .botao-ir_para {content: url(http://i75.servimg.com/u/f75/17/89/52/18/ir_lar10.png);}a:active .botao-ir_para{content: url(http://i40.tinypic.com/2rf6dee.png);}</style>
<a href="http://foge.forum-livre.com/forum?tid=b5cfb17296458ff367bfadd50889622d" class="postlink"><img src="http://i75.servimg.com/u/f75/17/89/52/18/ir_ver11.png" border="0" alt="" class="botao-ir_para"/></a>
</div>
Testei aqui, funcionou perfeitamente.

Inclusive, coloquei algo a mais aí... clique no botão e verá (caso não gostou do que fiz, é só falar).

Espero ter ajudado!

Gleison Elias.

Tofu
Nível 10

Masculino
Inscrito dia : 15/07/2013
Mensagens : 284
Pontos Ativos : 428

Ver perfil do usuário http://verdadeplena.tk

Resolvido Re: Mudanças de imagens e redirecionamento

Mensagem por Rapha Didone em 23/09/13, 07:26 am

Gleison,

Muito obrigado, funcionou direitinho! Um forte abraço! Positivo 
avatar

Rapha Didone
Usuário avançado

Masculino
Inscrito dia : 03/11/2012
Mensagens : 443
Pontos Ativos : 717

Ver perfil do usuário http://www.clubedosestudantes.com

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