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.

https://i.servimg.com/u/f75/17/89/52/18/ir_ver10.png

https://i.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 : 446
Pontos Ativos : 723

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
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16344
Pontos Ativos : 20847

Ver perfil do usuário https://ajuda.forumeiros.com/forum https://www.facebook.com/gladston.henrique.940

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 : 446
Pontos Ativos : 723

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
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16344
Pontos Ativos : 20847

Ver perfil do usuário https://ajuda.forumeiros.com/forum https://www.facebook.com/gladston.henrique.940

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="https://i.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 : 446
Pontos Ativos : 723

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
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16344
Pontos Ativos : 20847

Ver perfil do usuário https://ajuda.forumeiros.com/forum https://www.facebook.com/gladston.henrique.940

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 : 446
Pontos Ativos : 723

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
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16344
Pontos Ativos : 20847

Ver perfil do usuário https://ajuda.forumeiros.com/forum https://www.facebook.com/gladston.henrique.940

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 : 446
Pontos Ativos : 723

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 : 446
Pontos Ativos : 723

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

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum