Mudanças de imagens e redirecionamento

3 participantes

Ir para baixo

Tópico resolvido Mudanças de imagens e redirecionamento

Mensagem por Rapha Didone 20.09.13 14:48

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 11:26, editado 1 vez(es)
Rapha Didone
Rapha Didone
Membro

Membro desde : 03/11/2012
Mensagens : 530
Pontos : 847

http://www.clubedosestudantes.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudanças de imagens e redirecionamento

Mensagem por Sennior 20.09.13 16:06

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.
Sennior
Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudanças de imagens e redirecionamento

Mensagem por Rapha Didone 20.09.13 17:29

Olá Sennior,

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

Membro desde : 03/11/2012
Mensagens : 530
Pontos : 847

http://www.clubedosestudantes.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudanças de imagens e redirecionamento

Mensagem por Sennior 20.09.13 17:34

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

Até mais.
Sennior
Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudanças de imagens e redirecionamento

Mensagem por Rapha Didone 20.09.13 18:16

Spoiler:

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
Rapha Didone
Rapha Didone
Membro

Membro desde : 03/11/2012
Mensagens : 530
Pontos : 847

http://www.clubedosestudantes.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudanças de imagens e redirecionamento

Mensagem por Sennior 21.09.13 1:16

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.
Sennior
Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudanças de imagens e redirecionamento

Mensagem por Rapha Didone 21.09.13 18:32

Oi Sennior,

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

Membro desde : 03/11/2012
Mensagens : 530
Pontos : 847

http://www.clubedosestudantes.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudanças de imagens e redirecionamento

Mensagem por Sennior 21.09.13 21:49

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.
Sennior
Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudanças de imagens e redirecionamento

Mensagem por Rapha Didone 21.09.13 22:13

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.
Rapha Didone
Rapha Didone
Membro

Membro desde : 03/11/2012
Mensagens : 530
Pontos : 847

http://www.clubedosestudantes.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudanças de imagens e redirecionamento

Mensagem por Tofu 22.09.13 19:45

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.
avatar
Tofu
****

Membro desde : 16/07/2013
Mensagens : 284
Pontos : 428

http://verdadeplena.tk

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudanças de imagens e redirecionamento

Mensagem por Rapha Didone 23.09.13 11:26

Gleison,

Muito obrigado, funcionou direitinho! Um forte abraço! Positivo 
Rapha Didone
Rapha Didone
Membro

Membro desde : 03/11/2012
Mensagens : 530
Pontos : 847

http://www.clubedosestudantes.com

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos