Fórum Como Fazer Um Site
https://www.comofazerumsite.com/forum/

Criar um "efeito" nas palavras
https://www.comofazerumsite.com/forum/viewtopic.php?f=8&t=77
Página 1 de 1

Autor:  Carmpinto [ segunda ago 22, 2011 10:12 pm ]
Assunto da Mensagem:  Criar um "efeito" nas palavras

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

Autor:  avelino [ terça ago 23, 2011 10:58 pm ]
Assunto da Mensagem:  Re: Criar um "efeito" nas palavras

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.

Autor:  Carmpinto [ quarta ago 24, 2011 9:41 am ]
Assunto da Mensagem:  Re: Criar um "efeito" nas palavras

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

Autor:  avelino [ quarta ago 24, 2011 11:20 am ]
Assunto da Mensagem:  Re: Criar um "efeito" nas palavras

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:


Autor:  Carmpinto [ quarta ago 24, 2011 12:11 pm ]
Assunto da Mensagem:  Re: Criar um "efeito" nas palavras

Olá
Agora sim parece-me o resultado desejado.
Podes enviar-me o código completo.

Abraço e obrigado

Autor:  Carmpinto [ quarta ago 24, 2011 12:29 pm ]
Assunto da Mensagem:  Re: Criar um "efeito" nas palavras

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

Autor:  Diogo [ quinta ago 25, 2011 11:28 am ]
Assunto da Mensagem:  Re: Criar um "efeito" nas palavras

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?

Autor:  Carmpinto [ quinta ago 25, 2011 2:12 pm ]
Assunto da Mensagem:  Re: Criar um "efeito" nas palavras

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

Autor:  Diogo [ quinta set 01, 2011 10:45 am ]
Assunto da Mensagem:  Re: Criar um "efeito" nas palavras

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.

Autor:  Carmpinto [ segunda set 05, 2011 4:33 pm ]
Assunto da Mensagem:  Re: Criar um "efeito" nas palavras

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

Página 1 de 1 Os Horários são TMG [ DST ]
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/