How to put link in photo caption?

0

I have an example:

<!-- 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 -->

When he clicks on li opens an image with the caption, he wanted to know how I put a link in that caption, I already tried with <a> and it does not work

    
asked by anonymous 16.06.2015 / 06:24

2 answers

1

Short answer: Alternative text does not support links.

Long answer:

Alternate text should not be used to render captions. This is a text used by browsers when the image is not available (this is the case for a browser for the blind, for example). Alternate text should be used to describe the image whenever possible and relevant, or to instruct the browser to disregard that image if it is not possible to display it.

That said, you can get what you want by using the figure and figcaption tags or by using div tags. In either case you will need to use CSS or Javascript to hide / show as needed. In the case below I use CSS to hide and show as the user hover over the image.

Case 1 - Using figcaption

The main advantage of using this method is to make your code more semantic, since these tags are actually used to create an image environment and its captions.

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;
}

Case 2 - div

The main advantage of using this method will probably be the ease of implementation because you would need to make fewer changes. I propose to use a small change in the HTML, converting the "alt" attribute into a div tag immediately after the image, and use CSS to apply style to the tag next to the image if it has the "caption" class.

<!-- 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;
}
    
31.08.2015 / 13:40
0

Try this:

<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> 

    
16.06.2015 / 16:21