How to put link in photo caption?

Asked

Viewed 2,189 times

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, I wanted to know how to put a link in this caption, already tried with <a> and it doesn’t work

  • What element there is the legend?

  • the contents within the alt

  • And how does it become a legend? If you are using a plugin for this and not mention it, it is complicated.

  • The bad thing is that I took a model ready and was editing according to my needs and taste.. this part refers to a Javascript (Fancybox, I don’t know how it works).. I only know how it works, when I click on the read it displays an image and the caption.. For me this would have nothing to do with the link.. You can see an example here > http://leonardovilarinho.com ... In the 'Work' area by clicking on the 'Thumbs''

  • Let me get this straight, you want to put a link in the caption that appears when you go over the images?

  • No no, this caption that appears when passing the mouse in the image is the title, the alt is a caption that appears below the image (or above, etc.dendenying the css)

Show 1 more comment

2 answers

1


Short answer: Alternative text does not allow links.

Long answer:

The alternative text should not be used to make subtitles. This is text used by browsers when the image is not available (this is the case for a blind browser, for example). Alternative text should be used to describe the image, where possible and relevant, or to indicate to the browser to disregard that image if it is not possible to display it.

That being said, you can get what you want by using the tags figure and figcaption or using tags div. In both cases 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 hovers 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 is probably the ease of implementing because you would need to make fewer changes. I propose to use a small change in HTML, converting the attribute "alt" into a div tag right after the image, and use CSS to style the tag that comes next to the image if it has the class "caption".

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

Try it like 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> 

link

  • So it doesn’t work, actually this is the title of the image, not the caption, the caption is the alt, it appears when you click on the image (in my case) etc (depending on the css and javascript), take a look at the working area here > http://leonardovilarinho.com/ clicking on one of the images opens another and its caption

Browser other questions tagged

You are not signed in. Login or sign up in order to post.