How to use images instead of plain text as links for mobile safari on iOS?

Question

I am encountering problems with using images instead of plain text as links for mobile Safari on iOS5, tested on device. I have tried three different link protocols, tel: mailto: and http: and describe the problem for each below.

<a href="tel:1234"><img src="images/phone.jpg" alt="" /></a>

Does not work in iOS5, it throws an Cannot Open Page error, but works with text as link.

<a href="mailto:foo@bar.com"><img src="images/mail.jpg" alt="" /></a>

Does work and fires up the mail app.

<a href="http://www.mysite.com"><img src="images/home.jpg" alt="" /></a>

Works as expected.

However, the 'touch-and-hold' event, which pops up with normal text links works differently for images. For mailto links this is New Message/Add to Contacts/Copy/Cancel and for tel links it is Call/Add to Contacts/Copy/Cancel. With image links, the pop-up gives the options Open/Save Image/Copy/Cancel for both the mailto and tel links, with the Open option failing for tel links "because the address is invalid".

For my website, I would like to include my email and phone details, with the ability to mail/call directly, or to add it to the contacts. I found a related and unresolved question here: Dial a number using Phonegap in IPhone

Any help would be greatly appreciated.

Curiously, when saved to the home screen on an iOS device, and ran as a web-app, the touch-and-hold gesture results in no popup at all for the image links, whereas the text links work fine. (To enable a website to be run as a web-app, I added the following code in the head of the page:)

<meta name="apple-mobile-web-app-capable" content="yes" />

Can anybody reproduce this behaviour using the above link, and have clues which versions of iOS may be affected? I tested it on iPodTouch iOS 5.0.1 and iPad iOS 4.3.3. Thanks.

Josh Josh · Accepted Answer · 2012-02-03T02:21:56

I noticed this same problem. To work around it, I used a CSS background-image instead of an img tag:

<style type="text/css">
    .tel { 
        width: 102px; 
        height: 32px; 
        display: inline-block; 
        background: url(phone.png); 
    }
</style>

<a class="phone" href="tel:+1-000-000-0000"><span class="tel"></span></a>

Note that I specifically leave no whitespace inside of the a tag because otherwise the iPhone shows it next to the image (it appears for me as an empty underline, but this depends on your own CSS).

How to use images instead of plain text as links for mobile safari on iOS?

2 Answers