How to embed a text link in an image ?

Question

How do I embed text in an image? The embedded text should be hyperlinked to an URL. The use case is like having an image with a link that says 'Click here' which opens a new page.

Answer 1

If you are using asp.net this Embed text in Image using ASP.NET from developer's fusin shows a good example.

Edit- From your comments I see you're looking for php: Adding text to images with PHP

Answer 2

Using an image editor add the desired text to image itself and then use the image map to the area where text appears to required URL. For a sample please check my sample at http://shreedhar.kotekar.com/ImageMapSample.htm

Answer 3

You have to options to accomplish this:

1. Add your text to the image with your graphics program of choice. (Use ImageMagick for automated processing) Then create an image map to make parts of the image clickable. If you need some kind of "hot state", then you have to use small images which are absolutely positioned above the original image and show/hide them using Javascript. Depending on your needs it might be easier to make the whole image clickable.

2. Add a normal image and a normal hyperlink. Then use absolute positioning to move the hyperlink on top of the image. With that solution you don't need Javascript to create a hover effect.

Answer 4

If you want to stay away from z-indexes and/or image maps, you could do it the old school way, which is to set the image as a background for a table or div, and then just put text inside the table or div.