Databases
StackOverflow2013
Postsdbo
POHow to use images instead of plain text as links for mobile safari on iOS?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to use images instead of plain text as links for mobile safari on iOS?
    primarykey
    data
    text
    <p>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.</p> <pre><code>&lt;a href="tel:1234"&gt;&lt;img src="images/phone.jpg" alt="" /&gt;&lt;/a&gt; </code></pre> <p>Does not work in iOS5, it throws an Cannot Open Page error, but works with text as link.</p> <pre><code>&lt;a href="mailto:foo@bar.com"&gt;&lt;img src="images/mail.jpg" alt="" /&gt;&lt;/a&gt; </code></pre> <p>Does work and fires up the mail app.</p> <pre><code>&lt;a href="http://www.mysite.com"&gt;&lt;img src="images/home.jpg" alt="" /&gt;&lt;/a&gt; </code></pre> <p>Works as expected.</p> <p><strong>However</strong>, 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".</p> <p>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: <a href="https://stackoverflow.com/questions/6262289/dial-a-number-using-phonegap-in-iphone/8314534#8314534">Dial a number using Phonegap in IPhone</a></p> <p>Any help would be greatly appreciated.</p> <p>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:)</p> <pre><code>&lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt; </code></pre> <p>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.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USdknl
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to use images instead of plain text as links for mobile safari on iOS?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow to use images instead of plain text as links for mobile safari on iOS?
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload