Postagens | Dicas blog, Imagem, Pc Windows

Frase aparece ao passar o mouse sobre imagem, com Css ou só Html

Mostrarei duas formas de exibir uma frase ao passar o mouse sobre imagem, uma muito simples que só precisa da tag title usado a muito tempo no Html e outra com aparência personalizada por Css, porém, esta segunda opção necessita um bom conhecimento em Html ou muita dedicação.

Código de imagem


Primeiro o código Html simples de uma imagem com title
<img src="http://foitestado.com/images/foitestado.png" height="60" width="400" title="Blog com dicas para Blogger..." />


O código acima gera esse resultado:

expl, imagem passa o rato aparece title

Se você passar o mouse sobre a imagem verá o title, este não tem como dar estilo, as cores obedecerão o padrão do sistema operacional do usuário.

Nos códigos acima, height é a altura e width a largura.

Código de imagem e link


Agora o mesmo código acima, mas com código de link:

<a href="http://blog.foitestado.com">
<img src="http://foitestado.com/images/foitestado.png" height="48" width="320" title="Blog com dicas para Blogger..." />
</a>


O resultado:


blog com dicas para blogspot, windows, imagens, gadgets...


Html para uma descrição personalizada



Acima mostrei como identificar o código de imagem e de link com imagem, agora você precisará diferenciar os códigos acima dos outros que acrescentei, que são as tags <i> a DIV e também <p> essa ultima é para um paragrafo que conterá a descrição.

Já vou avisar que não uso esse código aqui no blog pelo fato de que acho ser muito trabalhoso e eu dar mais prioridade para as postagens(textos), mas resolvi postar já que me pediram, está bastante relacionado com outros assuntos que postei e pensei que seria fácil...

Código da Imagem com link

<div class="ontext" style="width:210px;z-index:101;">
<i>
<a href="http://blog.foitestado.com">
<img src="http://foitestado.com/images/foitestado.png" height="30" width="200" title="Blog com dicas para Blogger..." />
</a>
<p>Frase que aparece ao passar o mouse na imagem com link</p>
</i>
</div>


Resultado: Se o exemplo não aparecer clique aqui



Código da Imagem sem link

Se não quiser incluir um link na imagem você poderá substituir o código do link pelas tags <em> Isso é necessário para que o efeito funcione no Internet Explorer 7

<div class="ontext" style="width:210px;z-index:102;">
<i>
<em>
<img src="http://foitestado.com/images/foitestado.png" height="30" width="200" title="Blog com dicas para Blogger..." />
</em>
<p>Frase que aparece ao passar o mouse na imagem sem link</p>
</i>
</div>


Resultado:



Detalhes importantes, a DIV deverá ter no minimo 6 pixeis a mais de largura que a imagem podendo ser 10px a mais o ideal, lembrando que a largura é width. Observe com atenção os valores de largura, width

Se você adicionar varias imagens(códigos igual acima) e, uma logo abaixo da outra(próximas), o código de baixo deve conter um z-index com valores maiores de 100

Efeito Css: Descrição aparece ao passar o mouse



Para o efeito de texto surgir ao passar o mouse é preciso adicionar um código Css no Html página entre as HEAD, em arquivo externo(folha Css) ou, no caso do blogger veja aqui onde adiciona Css. Importante, o código riscado, em alguns casos não deve ser usado, por exemplo, para quem vai adicionar ao blogger, em folha de estilo ou se já tem em seu Html.

Código Css


<style type='text/css'>
.ontext{font-size:12px;background:transparent;position:relative;border:#000000 1px solid;text-align:center;}
.ontext i p{display:none;}
.ontext i:hover p{cursor:default;margin:-2px 0 0 0;color:blue;background:#E6E6E6;
position:absolute;text-align:left;left:-1px;z-index:100;display:block;border:#000000 1px solid;border-top:0;width:96%;padding:2px 2%;font-style:normal;}
.ontext a img{text-decoration:none;}
.ontext a,.ontext img a,.ontext em{display:block;}
.ontext p a{display:inline;}
.ontext i img{border:0;margin:3px 0 2px 0;}
</style>



Personalizar o código Css:


Algumas coisas você provavelmente irá querer mudar, é possível mudar a cor da fonte e fundo desta descrição, assim como cor da borda, a imagem não terá borda, mas a DIV terá, e, isso fará parecer que a imagem tem borda.

No código acima onde está background:transparent; é o fundo por trás da imagem, você pode substituir transparent por uma das cores básicas escrita em inglês ou um código de cor Hexadecimal, veja alguns aqui.

O tamanho da fonte está em font-size:12px; e você pode diminuir ou aumentar o número para obter letra maior ou menor.

Também onde tiver border:#000000 você pode substituir #000000 por outro código de cor Hexa ou nome de cor em inglês

A cor da fonte está em color:blue e você pode substituir blue por outro nome de cor em inglês ou um código Hexa, como este para preto #000000

Também no código Css acima, onde está background:#E6E6E6; é a cor de fundo do paragrafo com frase que aparecerá ao passar o mouse sobre a imagem, você também pode substituir o código Hexa #E6E6E6 que é para cor cinza claro.

Finalizando, na verdade usei a propriedade display:none do Css para oculta a frase que só ficará visível ao passar o mouse na imagem. Por está frase estar oculta, é bom não abusar de seu tamanho, pois, se a mesma aparecer em resultados de busca, vai trazer pessoas a seu blog/site que querem ler ela e não irão ver a mesma a menos que passem o mouse nas imagens, isso pode ser ruim para quem está com pressa.


20 comentários:

  1. como faz quando eu quero o oposto?
    tipo ao passar o mouse sobre Pelé daí aparece uma imagem do pelé.
    e quando eu tiro o mouse de cima da palavra, a image desaparece.
    Pode me ajudar?

    ResponderExcluir
  2. Tortugas

    Tudo bem, mas você deve pensar se realmente esse trabalho é necessário, principalmente para coisas meio obvias como Pelé, digo isso para você não ter trabalho quase desnecessário, por outro lado não sei para que você pretende usar, talvez impressionar...

    Você pode ver esse post, clique, só que lá, no lugar do código Html da primeira imagem você coloca a palavra, logicamente você vai precisar reconhecer o código da imagem, saber Html e um pouco de Css é bom nessa hora, ou muita dedicação para testar os códigos...

    ResponderExcluir
  3. Está postagem é muito boa mas, estou tentando fazer isto com texto, ao parar o mouse aparecer uma descrição, você pode ajudar?

    ResponderExcluir
  4. Fernando Ambrosio

    Você pode tentar substituir o código da imagem por um texto ou frase, o código da imagem é esse trecho:
    <img src="http://foitestado.com/images/foitestado.png" height="30" width="200" title="Blog com dicas para Blogger..." />


    Porém, nesse texto que você adicionar não pode usar a tag de parágrafo, p

    Para a fonte não ficar itálica nesse local, você terá que adicionar este trecho no Css:

    .ontext i,.ontext em{font-style:normal;}

    ResponderExcluir
  5. Resolveu minha vida... Valeuu

    ResponderExcluir
  6. Oi, colega tem como colocar as imagens uma do lado da outra, se tive por favor me ajude, como colocar, porque as imagens só ficam uma abaixo da outra.

    ResponderExcluir
  7. : Lionel7

    No caso do Código Css acima poderia tentar substituir display:block; por display:inline; e também, no Html tem uma DIV que 'cerca(envolve)' as imagens, nesse caso teria que colocar float:left; para a DIV, ficaria algo parecido com isso
    Antes:
    <div class="ontext" style="width:210px;z-index:101;">

    Depois:
    <div class="ontext" style="width:210px;z-index:101;float:left;">

    Já, em imagens normais, como as postadas no blogger, você tem opção de escolher a posição da imagem, quem usa o editor de post antigo, isso deve ser feito antes de inserir a imagem, no editor de post atualizado pode ser feito depois de inserir a imagem, basta clicar sobre ela e escolher a opção.

    Nos códigos Html de imagem, você pode procurar e remover text-align:center e também display:block e também não pode deixar linhas em branco entre o código das imagens, o melhor é fazer um blog de testes e praticar, ver o que dá certo e errado...

    ResponderExcluir
  8. Oie, eu botei as imagens lado a lado, ok mas ai elas ficam tudo na esquerda e eu quero as três centralizadas mas lado a lado, como faço???

    ResponderExcluir
    Respostas
    1. Lore

      Não tem código que obrigue essas imagens a terem esse comportamento, sendo assim vamos "aprisonar elas dentro de um elemento", primeiro, imagine uma imagem como um elemento(um objeto) e o mesmo vale para uma DIV, porém a DIV pode ser imaginado como um quadro que pode ter imagens dentro dele.

      Você terá que somar a largura dos três elementos que estão lado a lado e colocá-los todos dentro de uma nova DIV com uma largura que ultrapasse a soma total daqueles três elementos. Como na postagem acima estamos falando de imagem onde cada uma está dentro de uma DIV(acho que suas imagens também), aí, as larguras dos elementos somados serão das três DIVs que já possuem o código para ficarem uma do lado da outra, então, vamos supor que cada uma das três DIVs tenha uma largura de 100px e sendo assim a soma delas seria 300px mas, se elas tiverem borda também terão que ser somadas e inclusive margens ou padding se tiverem, mas vamos supor que a soma de tudo dê 312px aí você teria que colocar os elementos dentro de uma DIV com largura de 312px e essa DIV é quem ficaria centralizada usando margin:0 auto e para que a DIV ocupe todo o espaço de largura usamos display:block e ficaria mais ou menos assim:

      <div style="width:312px; margin:0 auto; display:block;">
      Aqui dentro os códigos Html dos 3 elementos de 100px
      </div>


      Se suas imagens não estão cada uma dentro de uma DIV, aí você irá somar as larguras das imagens.

      Excluir
    2. Deu certo, muito obrigada!!!!!

      Excluir
  9. ei lembra que tinha lhe pedido da data???? eu consegui arrumar aqui.. se vc quiser o tutorial lhe passo!!!!

    ResponderExcluir
    Respostas
    1. Obrigado, mas decidi fazer, estou escrevendo e vendo opções de cores, vai ficar parecido com essa imagem, mas terá mais opções prontas de cores de fundo.

      Excluir
  10. como eu faço pra botar uma imagem uma ao lado do outra? pq tipo, quando eu coloco uma imagem do lado da outra e passo o mouse por cima de uma, a q tava do lado vai pra baixo da descricao q apareceu!

    ResponderExcluir
  11. oii
    então, eu n consigo deixar uma imagem ao lado da outra! tipo, elas ficam uma do lado da outra mas quando eu passo o mouse em cima de uma delas para ver a descricao, a do lado vai pra baixo da descricao! o q eu faço?

    ResponderExcluir
    Respostas
    1. No código acima, cada imagem está dentro de uma DIV, essa é usada para ajudar na personalização, sendo assim, cada nova imagem precisaria ir com uma div para ela, aí, você poderia personalizar as divs para que fiquem lado a lado.

      Mas, talvez, na parte Css do código acima, você pode tentar apenas substituir todos os display:block; por display:inline; e talvez isso resolva o problema e você não precisará fazer o que eu disse no inicio desse comentário.

      Excluir
  12. Este comentário foi removido pelo autor.

    ResponderExcluir
  13. Amei! Ficou perfeito no meu blog
    http://coiisasdeotaku.blogspot.com

    ResponderExcluir
  14. Mano quero que o texto fique visivel sem precisar passar o mouse tem como?

    ResponderExcluir
    Respostas
    1. Aí seria um Html e Css bem mais simples, abaixo segue o Html:
      <div class="ontext" style="width:210px;z-index:102;">
      <em>
      <img src="http://foitestado.com/images/foitestado.png" height="30" width="200" title="Blog com dicas para Blogger..." /></em><p>Frase que aparece ao passar o mouse na imagem sem link</p></div>


      Abaixo segue a parte que vai dentro do Css:

      .ontext{font-size:12px;background:transparent;position:relative;border:#000000 1px solid;text-align:center;}
      .ontext p{cursor:default;margin:-2px 0 0 0;color:blue;background:#E6E6E6;
      position:absolute;text-align:left;left:-1px;z-index:100;display:block;border:#000000 1px solid;border-top:0;width:96%;padding:2px 2%;font-style:normal;}
      .ontext a img{text-decoration:none;}
      .ontext a,.ontext img a,.ontext em{display:block;}
      .ontext p a{display:inline;}
      .ontext img{border:0;margin:3px 0 2px 0;}

      Excluir

→Dê sua opinião. Faça comentário relacionado ao post.
Comentário com e-mail será excluído
Antes de perguntar leia o texto até comentários e pesquise, a resposta virá no comentário, para ser avisado use uma conta e o link: Subscribe by email(abaixo)
Será excluído comentário não relacionado ou com Url de blog/site(Divulgar? Clique)

Comentário reflete a opinião do comentarista. Desde já, Obrigado!

Postagens Populares