0

Estou com um exemplo:

<!-- GSM FANS -->
<li class="item-thumbs span3 apps"><!-- Tipo do projeto -->
   <!-- Imagem completa do trabalho -->
   <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="GSM Fans" href="_include/img/work/full/gsm.jpg">
       <span class="overlay-img"></span>
       <span class="overlay-img-thumb font-icon-plus"></span>
   </a>

   <img src="_include/img/work/thumbs/gsm.jpg"   alt="Tenha rápido acesso ao fórum GSM Fans, atalhos para áreas relacionadas ao Windows Phone.
O aplicativo também conta com feeds de alguns sites de notícias tecnológicas.
* Pode haver falha na nova versão, faça o download das duas.">
</li>
<!-- GSM FANS -->

Quando ele clica na li abre uma imagem com a legenda, queria saber como coloco um link nessa legenda, já tentei com <a> e não funciona

6
  • Qual elemento aí é a legenda? Commented 16/06/2015 às 4:33
  • o conteúdo dentro do alt
    – Leonardo
    Commented 16/06/2015 às 4:34
  • E como aquilo vira legenda? Se estiver usando algum plugin pra isso e não mencionar, fica complicado. Commented 16/06/2015 às 4:35
  • O ruim é que eu peguei um modelo pronto e fui editando de acordo com as necessidades e com meu gosto.. essa parte se refere a um Javascript (FancyBox, não sei como funciona).. Só sei o funcionamento mesmo, ao clicar na li ele exibe uma imagem e a legenda.. Pra mim isso não teria nada haver com o link.. Tu pode ver um exemplo aqui > leonardovilarinho.com ... Na area de 'Trabalho' ao clicar nos 'Thumbs'
    – Leonardo
    Commented 16/06/2015 às 4:50
  • Deixa ver se percebi, queres colocar um link na legenda que aparece ao passares por cima das imagens?
    – Jorge B.
    Commented 16/06/2015 às 8:45

2 Respostas 2

1

Resposta curta: O texto alternativo não admite links.

Resposta longa:

O texto alternativo não devia ser utilizado para fazer legendas. Trata-se de um texto usado pelos navegadores quando a imagem não está disponível (é o caso de um navegador para cegos, por exemplo). O texto alternativo deveria ser usado para descrever a imagem, sempre que possível e relevante, ou para indicar ao navegador que desconsidere aquela imagem se não for possível exibi-la.

Dito isto, você pode obter o que deseja usando as tags figure e figcaption ou utilizando tags div. Em ambos os casos você precisará usar CSS ou Javascript para ocultar/mostrar conforme necessário. No caso abaixo utilizo CSS para ocultar e mostrar conforme o usuário passa o mouse sobre a imagem.

Caso 1 - Usando figcaption

A principal vantagem de utilizar esse método é tornar o seu código mais semântico, dado que estas tags são de fato utilizadas para criar um ambiente de imagem e suas legendas.

html

<!-- GSM FANS -->
<li class="item-thumbs span3 apps"><!-- Tipo do projeto -->
   <!-- Imagem completa do trabalho -->
   <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="GSM Fans" href="_include/img/work/full/gsm.jpg">
       <span class="overlay-img"></span>
       <span class="overlay-img-thumb font-icon-plus"></span>
   </a>
   <figure>
   <img src="_include/img/work/thumbs/gsm.jpg"   alt="">
   <figcaption>Tenha rápido acesso ao fórum GSM Fans, atalhos para áreas relacionadas ao Windows Phone.
O aplicativo também conta com feeds de alguns sites de notícias tecnológicas.
* Pode haver falha na nova versão, <a href="download.com">faça o download das duas.</a></figcaption>
  </figure>
</li>
<!-- GSM FANS -->

css

figure figcaption{
    display:none;
}
figure:hover figcaption{
    display:block;
}

Caso 2 - div

A principal vantagem de utilizar este método provavelmente será a facilidade de implementar porque você precisaria fazer menos mudanças. Proponho utilizar uma pequena mudança no HTML, convertendo o atributo "alt" em uma tag div logo após a imagem, e utilizar o CSS para aplicar estilo na tag que vem em seguida à imagem se ela tiver a classe "legenda".

<!-- GSM FANS -->
<li class="item-thumbs span3 apps"><!-- Tipo do projeto -->
   <!-- Imagem completa do trabalho -->
   <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="GSM Fans" href="_include/img/work/full/gsm.jpg">
       <span class="overlay-img"></span>
       <span class="overlay-img-thumb font-icon-plus"></span>
   </a>

   <img src="_include/img/work/thumbs/gsm.jpg"   alt="">
   <div class="legenda">Tenha rápido acesso ao fórum GSM Fans, atalhos para áreas relacionadas ao Windows Phone.
O aplicativo também conta com feeds de alguns sites de notícias tecnológicas.
* Pode haver falha na nova versão, faça o download das duas.</div>
</li>
<!-- GSM FANS -->

css

img+.legenda{
    display: none;
}
img:hover+.legenda{
    display: block;
}
0

Tente assim:

<a href="http://br.answers.yahoo.com" target="parent"><img src="http://economia.estadao.com.br/blogs/radar-do-emprego/wp-content/uploads/sites/55/2014/03/IMAGEM-CARREIRA2-300x222.jpg"  
alt=""     

title="Tenha rápido acesso ao fórum GSM Fans, atalhos para áreas relacionadas ao Windows Phone.
O aplicativo também conta com feeds de alguns sites de notícias tecnológicas.
* Pode haver falha na nova versão, faça o download das duas."  border="none" /></a> 

link

1
  • Assim não funciona, na realidade esse é o título da imagem, não a legenda, a legenda é o alt, ela aparece quando tu clica na imagem (no meu caso) etc (dependendo do css e javascript), dá uma olhada na area de trabalho daqui > leonardovilarinho.com ao clicar numa das imagens abre outra e a legenda dela
    – Leonardo
    Commented 16/06/2015 às 14:36

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .