Jump to content
Fórum Script Brasil
  • 0

link - palavra>imagem


jaoze
 Share

Question

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.

Edited by jaoze
Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 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 to comment
Share on other 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 to comment
Share on other 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 to comment
Share on other sites

  • 0

Não deu certo. Quero que se destaque só uma palavra.

Joao enviou uma<a href=""><p>imagem</p><span><img src="images/caravela.jpg" /></span></a>

Quero que seja destacada a palavra imagem, que ao passar o mouse sobre a imagem carvela apareca.

Link to comment
Share on other 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 to comment
Share on other 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 to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share



  • Forum Statistics

    • Total Topics
      150.9k
    • Total Posts
      648.8k
×
×
  • Create New...