Home/ Questions/Q 7405175
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T05:21:47+00:00

I am encountering problems with using images instead of plain text as links for

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    • 0