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 image and taken to the link while on the iPhone it asks you to save image, or copy or cancel. On occasion I have noticed it to work but have not been able to determine when it does link and when it asks to copy the image.

The code is the relevant code for the image/link

    <table>
    <tr>
        <td>
            <span style="font-size: 10pt; font-family: Calibri">
                <br/>
                <!-- begin ad tag -->
                <a href="LINK" target="_blank">
                <img src="IMAGE" border="0" alt="" /></a>
                <!-- end ad tag -->
            </span>
        </td>
    </tr>
    </table>

Edit 1: Just testing some more, if I go into the web browser on the IPhone and then back into the mail and click the image it goes to the link without prompting to save the image.

Edit 2: Edit 1 works only on the iphone 4 version 5.1 (does not work on 4S have not tested others). Also works on ipad 3 version 5.1

Edit 3: Also does not work on 3g iphone either version 5.1 I am going to mark this up as an iphone issue and say jme1988 is correct unless someone comes up with something else.

Thank you for your help

Answer 1

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

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 4

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 5

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?.

Answer 6

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>