Image link on iPhone is not clickable

Question

I have a signature that is used in outlook. The signature has an image at the bottom and a link that encompasses the image. On the computers you are able to click on the i

Answer 1

I'm not sure if my suggestion is the best practice, but the image map solution didn't work for me (iOS 6.1 on iPhone 4s).

Instead, I've just placed a transparent "a href" on top of my desired clickable image:

<a href="http://LINK" id="clickable" style="width:441px; height:244px; position:absolute; top:303px; left:46px; background-color:rgba(0,0,0,0); z-index:99">

  Also, I had to leave the original "a href" around the image itself also, because the transparent link did not work on Outlook on PC.

Hope this helps.

Answer 2

Try applying the following css to your image tag and make sure it's added as an inline style.

-webkit-touch-callout: none;
-webkit-user-select: none;

Answer 3

I actually found a solution that works on iOS 6.1.2 as well as desktop Apple Mail (6.0):

Combine the above approaches:

<a href="http://foo">
  <img src="http://bar" usemap="linkmap" alt="Click me" title="Click me"/>
  <map name="linkmap">
    <area shape="rect" coords="0,0,80,80" href="http://foo" alt="Click me" />
  </map>
</a>

Answer 4

Sounds like an issue with the Iphone to me (wouldn't surprise me). The menu that pops up is likely because the Email client cannot launch the browser window when it has not already been started (hence why it works sometimes and doesn't others).

Answer 5

You have to use the map tags to make it work. Here's an example using a facebook picture linking to facebook using map:

<img src="http://cdn2.iconfinder.com/data/icons/web2/Icons/FaceBook_128x128.png" alt="Facbook" usemap="#facebook" />

 <map name="facebook">
   <area shape="rect" coords="0,0,128,128" href="http://www.facebook.com" alt="Facebook" />
 </map> 

If you aren't familiar with this, try pasting the code in an .html document and check it out (should work). Typically you put the "mappings" just before </body> .

On the coords arguement, you should use x1,y1,x2,y2 plotting. What this means is that you want map a rectangular image from the top-left to the bottom-right of the size of the image. This appears to work on the 3G version.

Answer 6

Make sure you're linking to the image instead of using an attachment. See Why anchors tag containing an image don't work in Iphone's mail app?.