140

What's the recommended syntax for an image with a hyperlink? I tried doing it with the markdown toolbar buttons and the image and link buttons conflict with each other, so I had to resort to HTML.

For example, to do this:

alt text

These work properly:

<a href="https://meta.stackoverflow.com/users/44330/jason-s">![alt text][1]</a>
[1]: https://www.gravatar.com/avatar/dd5a7ef1476fb01998a215b1642dfd07

<a href="https://meta.stackoverflow.com/users/44330/jason-s">
   <img src="https://www.gravatar.com/avatar/dd5a7ef1476fb01998a215b1642dfd07">
</a>

[<img src="https://www.gravatar.com/avatar/dd5a7ef1476fb01998a215b1642dfd07">][2]
[2]: https://meta.stackoverflow.com/users/44330/jason-s

This does not:

<a href='https://meta.stackoverflow.com/users/44330/jason-s'>![alt text][1]</a>

(single quotes not allowed?)

Is there a way to do the same thing in Markdown without having to resort to HTML?

Return to FAQ index

Improve this question
0

2 Answers 2

Reset to default
184

It is possible to use Markdown for both the image and the link. You have to do it manually because the the toolbar's default behavior is to make the clickable image point to the URL of the image itself.


Reference-style

[![alt text][image]][hyperlink]

[hyperlink]: https://meta.stackoverflow.com/users/44330/jason-s
[image]:
https://www.gravatar.com/avatar/dd5a7ef1476fb01998a215b1642dfd07
(tooltip)
  – or –
[image]:
https://www.gravatar.com/avatar/dd5a7ef1476fb01998a215b1642dfd07
"tooltip"

Example

alt text

Default behavior, reference-style

Since July 2015 the insert image feature (Ctrl + G) of the toolbar of the Stack Exchange Markdown editor by default adds a clickable link to the image itself. 1

It uses the following syntax:

[![enter image description here][number]][number]

where number is an automatically generated number.

Default example, reference-style

[![Jason's avatar][1]][1]

[1]: https://i.sstatic.net/X14m7.png
"Tooltip for Jason's avatar"

Jason's avatar

To change the link to something else, simply change the second [number] with (*your URL here*) (in parentheses) or use the reference style syntax above.


Inline-style

[![alt text](image "tooltip")](hyperlink)
  for example:
[![invisible description of images, read aloud to blind users
](https://i.sstatic.net/X14m7.png
"Let's check Jason S' profile page (inline-style)")
](https://meta.stackoverflow.com/users/44330/jason-s)

invisible description of images, read aloud to blind users

Default behavior, inline-style

You can get the default behavior without using the [number] construct.

[![A click on the image links to its own URL.](
https://i.sstatic.net/X14m7.png
"A click on the image links to its own URL (inline-style).")
](https://i.sstatic.net/X14m7.png)

A click on the image links to its own URL.

The observant reader will notice that to achieve the inline-style default behavior, the URL to the image must be supplied twice. The first link is there to display the image, the second link makes the image clickable.

References:

1 The previous default behavior was to just display the image - without any link at all. ~ * ~ Even the new default behavior does not add any tooltip for you. – If you want a tooltip, you have to add it yourself.

Improve this answer
7
  • 27
    In other words, whatever the syntax for the image, treat that whole syntax as the text to link. So the ugly syntax also works: [![alt text](image link)](web link)
    – ShreevatsaR
    Commented Jan 9, 2011 at 5:55
  • 1
    Excellent! It makes sense but I never got that far in because once I start typing it I think to myself, this can't possibly be right, it's too ugly. but it aint... you ugly! ;)
    – Ben Keating
    Commented Mar 21, 2011 at 17:00
  • This works in general for Markdown, not only for StackOverflow, it seems!
    – fatuhoku
    Commented Aug 19, 2013 at 23:52
  • +1 for the (hover text) tip.
    – Mogsdad
    Commented Jun 27, 2015 at 13:14
  • @ShreevatsaR This doesn't work for chat. Is there a way to do this in chat?
    – mbomb007
    Commented Oct 4, 2016 at 19:15
  • @mbomb007 I don't know, sorry.
    – ShreevatsaR
    Commented Oct 4, 2016 at 19:23
  • 1
    @ShreevatsaR this should be another answer since it's a simpler different form
    – danfromisrael
    Commented Nov 9, 2016 at 13:54
4

For numerically indexed URLs, just make a new numbered URL.

For example, when you insert an image with the fancy editor, it starts off linking to itself. In HTML terms, the a.href link URL is the same as img.src image URL.

[![alt text][1]][1]

[1]: https://i.sstatic.net/wPW28.png

Just add a new URL for the link:

[![alt text][1]][2]

[1]: https://i.sstatic.net/wPW28.png
[2]: https://www.timeanddate.com/astronomy/moon/light.html?month=3&day=20&year=2040&hour=19&min=00&sec=0&n=64&ntxt=Chicago&earth=0

The result:

alt text

So (http://example.com) can be replaced with [42] ... [42]: http://example.com

Improve this answer
1
  • it is better to edit the original answer, which is Community Wiki, then to append one. For clarity.
    – Luuklag
    Commented Aug 21, 2020 at 14:15

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .