Is it possible to add a clickable link to an image itself?

Question

I have an image and I want to have a link on it. When someone clicks on the link they go to the given website. Is it possible to do so ?

clarifying my question

I am uploading an image and need a link in it

Answer 1

There are no common image formats that, when viewed, will automatically go to a website via a click.

You can create a small web page in HTML that will reference the image and go to another page (or site) when the image is clicked.

The code for that page will look like this:

<a href="Title"><img src="image.png"></a>

Alternatively, you can create an SVG file, which is a type of vector graphics file. They can have links in them, but they are not standard raster images.

Another thing you can do is create a Flash animation consisting of only a static image. When clicked, it can direct to another website. Flash is not an image format, however.

Answer 2

Reading this article made me learn that it possible with SVG images.

For instance, you can create an image of a clickable rectangle that can lead to your website:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<a xlink:href="HTTP://YOURSITEGOESHERE.COM" target="_top">

<rect x="10" y="20" width="75" height="30" style="stroke: #333366; fill: #6666cc"/>

</a>

</svg>

Copy and paste the code into a text editor and save as a .svg file and open the file in a web browser.

Answer 3

I am not familiar with any common image format that has links in its spec... Apart from SVG, which is vector graphics.

In an SVG you can link using <a> element. Here's an example:

<svg width="140" height="30"
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">

  <a xlink:href="https://developer.mozilla.org/en-US/docs/SVG"
     target="_blank">
    <rect height="30" width="120" y="0" x="0" rx="15"/>
    <text fill="white" text-anchor="middle" 
          y="21" x="60">SVG on MDN</text>
  </a>

</svg>

You can also embed a raster image using <image> element and base64 encoded image data, then make it a link as per above. However, it might just be that whatever service you want to upload the image to has it restricted to formats like JPEG/PNG/GIF and won't accept SVG.

Otherwise, if you want a link stored and working in JPEG, PNG, BMP or GIF, then that's AFAIK not possible, as it's simply not in their specs.

Answer 4

I think you may be looking for the image map feature of HTML. You can use it either to define various areas of an image to be treated as links, or request that the browser report the location of the click on the image as query-parameters when following it. This won't work if you're unable to supply the necessary HTML, though.

Formats other than simple images - objects such as SWF, SVG, IFRAMEd pagelets, Java applets and so forth - would be needed to carry the additional information necessary to embed a link.