jaoze Postado Agosto 13, 2012 Denunciar Share Postado Agosto 13, 2012 (editado) 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 Agosto 13, 2012 por jaoze Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Nosreve Postado Agosto 19, 2012 Denunciar Share Postado Agosto 19, 2012 quando eu vi aquele efeito tambem achei bem legal, quebrei bastante a cabeça pra descobrir, mas depois descobri, vi que é algo bem simplesvou 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> Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 jaoze Postado Agosto 23, 2012 Autor Denunciar Share Postado Agosto 23, 2012 Muito obrigado pela dica, valeu. Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 jaoze Postado Agosto 23, 2012 Autor Denunciar Share Postado Agosto 23, 2012 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. Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 JaguA Postado Agosto 23, 2012 Denunciar Share Postado Agosto 23, 2012 isso é no HTML você ta usando a tag <p> dentro do da tag <span> que é onde ocorre tudo então o que acontece é bem simplesquando 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. Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 jaoze Postado Agosto 23, 2012 Autor Denunciar Share Postado Agosto 23, 2012 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. Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Nosreve Postado Agosto 23, 2012 Denunciar Share Postado Agosto 23, 2012 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 nelasegue exemplo das alteraçõescssp{ 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> Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Nosreve Postado Agosto 23, 2012 Denunciar Share Postado Agosto 23, 2012 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.csslabel{ 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> Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 jaoze Postado Agosto 24, 2012 Autor Denunciar Share Postado Agosto 24, 2012 Bom dia.Acabei de ler as dicas, foram de muita valia, funcionaram. Agradeço pela atenção. Citar Link para o comentário Compartilhar em outros sites More sharing options...
Pergunta
jaoze
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 jaozeLink para o comentário
Compartilhar em outros sites
8 respostass a esta questão
Posts Recomendados
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.