Ir para conteúdo
Fórum Script Brasil
  • 0

link - palavra>imagem


jaoze

Pergunta

No menu do Maujor, ao passar o mouse sobre ele, ao lado aparece uma imagem.

Estou escrevendo no meu site alguns textos, quero que em determinada palavra em destaque ao passar o mouse sobre ela abra uma pequena imagem.

Já fiz algumas experiências e não deram certo. alguém pode ajudar-me nesse tópico.

Editado por jaoze
Link para o comentário
Compartilhar em outros sites

8 respostass a esta questão

Posts Recomendados

  • 0

quando eu vi aquele efeito tambem achei bem legal, quebrei bastante a cabeça pra descobrir, mas depois descobri, vi que é algo bem simples

vou mostrar o basico, mas pelo css mesmo tu escolhe onde quer que ela apareça, o tamanho, a distancia do texto, cores e tudo mais,

para fazer esse efeito basto fazer isso

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Imagem aparecer ao passar mouse em link</title>
    <style type="text/css">
        a span {
            display: none;
        }
        a:hover span {
            display: inline;
        }
    </style> 
</head>

<body>
    <a href=""><p>imagem</p><span><img src="1up.jpg" /></span></a>
</body>
</html>

Link para o comentário
Compartilhar em outros sites

  • 0

Meu caro.

A dica funciou, mas veja o que pretendo fazer.

O Brasil não ganhou a medalha(aqui, ao passar o mouse sobre a palavra melhada, aparece a imagem de uma medalha de ouro) de ouro na olimpiada.

Usando a tua dica acontece uma quebra de linha.

Desde já agradeço.

Link para o comentário
Compartilhar em outros sites

  • 0

isso é no HTML você ta usando a tag <p> dentro do da tag <span> que é onde ocorre tudo então o que acontece é bem simples

quando o mouse esta em cima display: line ou seja mostre em linha porem o que via mostrar é um paragrafo então ele faz a quebra de linha. tire as tag <p> e faça o teste de novo.

Link para o comentário
Compartilhar em outros sites

  • 0

para arrumar a quebra de linha basta colocar a span img como position absolute, para aparecer em cima dos outros elementos do site, daí tu posiciona onde tu quiseres com as margins e top left, etc, dependendo da onde tu queres que apareça a imagem se é em cima ou em baixo da palavra.

e para destacar a palavra, como seria esse destaque? por exemplo coloquei um background cinza nela

segue exemplo das alterações

css

p{
 background-color:#CCCCCC;
 width:60px;
}
a span {
 display: none;
}
a:hover span {
 display: inline;
}
span img{
 position:absolute;	   	
}
html
<a href="#"><p>imagem</p><span><img src="imagem.jpg" /></span></a>

Link para o comentário
Compartilhar em outros sites

  • 0

lendo o tópico novamente, acho que interpretei errado a duvida sobre a quebra de linha, se a quebra de linha estiver ocorrendo por causa da imagem que aparece a postion absolute resolve, se a quebra for por causa do texto é por que esta com o <p> mesmo, basta apagar, você pode fazer esse esquema com outra coisa, como link ou até <label>, re fiz o código e coloquei a palavra imagem no meio de um texto, agora passe o mouse e veja que a imagem apenas aparece sem quebra de linha, tambem destaquei o texto e a imagem, ve se é mais ou menos isso que você deseja.

css

label{
    color:#FF0000;
}
label:hover{
    background-color:#FFFF00;
}
label span {
    display: none;
}
label:hover span {
    display: inline;
}
span img{
    position:absolute;
    background-color:#FFFF00;
}
div{
    width:300px;
}
html
<div>
    	texto texto texto texto texto texto texto texto texto texto texto texto <label>imagem<span><img src="imagem.jpg" /></span></label> texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
</div>

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,7k
×
×
  • Criar Novo...