Fórum Como Fazer Um Site

Fórum sobre como fazer um site. Espaço para aprender e partilhar conhecimentos sobre Como Criar Sites.
Data/Hora: quinta nov 21, 2019 5:12 am

Os Horários são TMG [ DST ]




Criar Novo Tópico Responder a este Tópico  [ 10 mensagens ] 
Autor Mensagem
 Assunto da Mensagem: Criar um "efeito" nas palavras
MensagemEnviado: segunda ago 22, 2011 10:12 pm 
Offline

Registado: segunda ago 22, 2011 9:32 am
Mensagens: 11
Boa noite a todos os colaboradores, participantes e administrador do site.

A minha dúvida é a seguinte:

No meu site, tenho uma pagina na qual se conta um pouco a história da loja (automercado.pt/somos.html) e gostaria de aplicar um novo efeito em algumas palavras.

Na referida página, num dos parágrafos fala do seu gerente Sr. Adão Pinto, eu gostaria que quando o utlizador movesse o "mousse" por cima dessa palavra, de imediato mostrasse um foto.
A foto seria apenas mostrada sem que se abrisse uma nova página.

Se alguém souber dar uma ajuda seria formidável.

Um muito obrigado a todos

PS: Peço desculpa por colocar endereços do site, não o fiz para publicitar nada, apenas para exemplificar de forma directa.

Carlos Pinto


Topo
 Perfil  
 
 Assunto da Mensagem: Re: Criar um "efeito" nas palavras
MensagemEnviado: terça ago 23, 2011 10:58 pm 
Offline
Site Admin
Avatar do Utilizador

Registado: segunda set 07, 2009 4:00 pm
Mensagens: 30
Boa noite Carlos

Uma solução pode ser a seguinte.
Entre as tags <head> e </head> colocas o seguinte código:

Código:
<style type="text/css">
<!--
.link {
position: relative;
display: inline;
padding: 5px;
}

.box {
padding: 10px;
position:absolute;
top: 0px;
left: 0px;
display:none;
}

.box img {
border: 1px solid #000;
}
-->
</style>


<script type="text/javascript">

function MostrarImagem(id) {
document.getElementById(id).style.display = 'block';
}
function EsconderImagem(id) {
document.getElementById(id).style.display = 'none';
}

</script>


E na palavra que vai gerar a foto do Sr. Adão Pinto colocas o seguinte código:

Código:
<div class="link"><span onmouseover="MostrarImagem('imagem1'); return false;">
<a href=#>TuaPalavra</a></span><span id="imagem1" class="box" onMouseOut="EsconderImagem('imagem1'); return false;"><img src="TuaImagem.jpg"></span></div>


Depois diz se funcionou.
Fiz uma pequena página, testei e funcionou, depois faço upload dela para servir como exemplo também.

_________________
Como Fazer Um Site


Topo
 Perfil  
 
 Assunto da Mensagem: Re: Criar um "efeito" nas palavras
MensagemEnviado: quarta ago 24, 2011 9:41 am 
Offline

Registado: segunda ago 22, 2011 9:32 am
Mensagens: 11
Olá Bom dia.

Já testei o este comando e de facto já tem alguma funcionalidade, no entanto quando passamos o mousse por cima da palavra ela então mostra uma imagem, mas depois de retirar o mousse a imagem deveria ocultar-se automaticamente e não acontece.

Já estive a verificar e alterar algumas coisas mas continua sem dar o efeito desejado.

Agradeço a ajuda disponibilizada e o trabalho que te, tido.

Obrigado


Topo
 Perfil  
 
 Assunto da Mensagem: Re: Criar um "efeito" nas palavras
MensagemEnviado: quarta ago 24, 2011 11:20 am 
Offline
Site Admin
Avatar do Utilizador

Registado: segunda set 07, 2009 4:00 pm
Mensagens: 30
Bom dia Carlos

Tens razão de facto havia um erro que não permitia que a janela se fechasse, mas já corrigi. Não te preocupes pois estamos cá para ajudar sempre que pudermos.

A página exemplo que fiz é a seguinte:


_________________
Como Fazer Um Site


Topo
 Perfil  
 
 Assunto da Mensagem: Re: Criar um "efeito" nas palavras
MensagemEnviado: quarta ago 24, 2011 12:11 pm 
Offline

Registado: segunda ago 22, 2011 9:32 am
Mensagens: 11
Olá
Agora sim parece-me o resultado desejado.
Podes enviar-me o código completo.

Abraço e obrigado


Topo
 Perfil  
 
 Assunto da Mensagem: Re: Criar um "efeito" nas palavras
MensagemEnviado: quarta ago 24, 2011 12:29 pm 
Offline

Registado: segunda ago 22, 2011 9:32 am
Mensagens: 11
Olá bom dia
O problema já está resolvido.

Agradeço mais uma vez a disponibilidade o trabalho e ajuda que me deu.

Alguma coisa que necessite da minha parte, apesar da experiencia ser pouca, estarei disponivel para também contribuir.

Carlos Pinto


Topo
 Perfil  
 
 Assunto da Mensagem: Re: Criar um "efeito" nas palavras
MensagemEnviado: quinta ago 25, 2011 11:28 am 
Offline
Avatar do Utilizador

Registado: quarta fev 09, 2011 12:43 pm
Mensagens: 14
Já instalei o código em uma webpage do meu site. A imagem fica abrindo legal, os meus links estao no inicio da webpage e no meio.
Penso que a janelinha só abre para o lado direito e se o link ficar muito perto da margem direita aí ela não vai ficar escondida abrindo para fora da tela?


Topo
 Perfil  
 
 Assunto da Mensagem: Re: Criar um "efeito" nas palavras
MensagemEnviado: quinta ago 25, 2011 2:12 pm 
Offline

Registado: segunda ago 22, 2011 9:32 am
Mensagens: 11
O resultado final fica óptimo.
No caso das palavras ficarem junto da margem e a imagem ficar meio oculta tem algumas soluções

Pode sempre criar o Width"" e Height"" para criar o tamanho da foto, podemos também fazer com que a palavra esteja mais centrada no texto, ou em ultimo recurso é nas configurações, ou seja nesse código é possível alterar a forma de apresentação das imagens, mas estamos criando um problema maior, pois penso e repito "penso" que terão de ser então códigos distintos para cada imagem com diferente apresentação.

Abraço


Topo
 Perfil  
 
 Assunto da Mensagem: Re: Criar um "efeito" nas palavras
MensagemEnviado: quinta set 01, 2011 10:45 am 
Offline
Avatar do Utilizador

Registado: quarta fev 09, 2011 12:43 pm
Mensagens: 14
Fui ver seu site e está funcionando bem, e você até colocou vários links abrindo imagens numa só página.
Mas aqui quando as imagens abrem para cima de outros links esses links azuis continuam aparecendo no meio da imagem. Isso não fica muito legal não.

Talvez você possa consertar isso com o z-index. No <style> onde você tem .box coloca lá o z-index, desse modo,
Código:
.box {
padding: 10px;
position:absolute;
top: 0px;
left: 0px;
display:none;
z-index: 2;
}


Se com o 2 não resultar aí você pode tentar com um número superior.


Topo
 Perfil  
 
 Assunto da Mensagem: Re: Criar um "efeito" nas palavras
MensagemEnviado: segunda set 05, 2011 4:33 pm 
Offline

Registado: segunda ago 22, 2011 9:32 am
Mensagens: 11
Olá amigo!
mais uma vez tenho de agradecer pela dica.
è sempre mais um pequeno "arranjo" ou "retoque" que podemos ir fazendo ao nosso trabalho, com a ajuda da comunidade e utilizadores de este site.

parabéns ao site e obrigado a todos os quantos vão contribuindo com as v/ ajudas a minha pessoa.

carlos


Topo
 Perfil  
 
Mostrar mensagens anteriores:  Ordenar por  
Criar Novo Tópico Responder a este Tópico  [ 10 mensagens ] 

Os Horários são TMG [ DST ]


Quem está ligado:

Utilizador a ver este Fórum: Nenhum utilizador registado e 1 visitante


Criar Tópicos: Proibído
Responder Tópicos: Proibído
Editar Mensagens: Proibído
Apagar Mensagens: Proibído
Enviar anexos: Proibído

Pesquisar por:
Ir para:  
cron
Powered by phpBB® Forum Software © phpBB Group
Traduzido por phpBB Portugal
Como Fazer Um Site, o seu site para aprender a criar sites