Comment utiliser des images au lieu du texte brut comme liens pour le safari mobile sur iOS ?

Question

Je rencontre des problèmes avec l'utilisation d'images au lieu de texte brut comme liens pour Safari mobile sur iOS5, testé sur l'appareil. J'ai essayé trois protocoles de lien différents, tel : mailto : et http : et je décris le problème pour chacun d'eux ci-dessous.

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

Ne fonctionne pas dans iOS5, il jette une erreur "Cannot Open Page", mais fonctionne avec le texte comme lien.

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

Fonctionne et lance l'application de messagerie.

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

Fonctionne comme prévu.

Cependant Pour les liens mailto, l'événement "toucher et maintenir", qui s'affiche avec les liens texte normaux, fonctionne différemment pour les images. Pour les liens mailto, il s'agit de Nouveau message/Ajouter aux contacts/Copier/Annuler et pour les liens tel, de Appel/Ajouter aux contacts/Copier/Annuler. Avec les liens d'image, le pop-up propose les options Ouvrir/Enregistrer l'image/Copier/Annuler pour les liens mailto et tel, l'option Ouvrir échouant pour les liens tel "parce que l'adresse n'est pas valide".

Pour mon site web, j'aimerais inclure mon adresse électronique et mes coordonnées téléphoniques, avec la possibilité d'envoyer un mail/appeler directement, ou de l'ajouter aux contacts. J'ai trouvé une question connexe et non résolue ici : Composer un numéro en utilisant Phonegap dans IPhone

Toute aide serait grandement appréciée.

Curieusement, lorsqu'il est enregistré sur l'écran d'accueil d'un appareil iOS et exécuté en tant qu'application Web, le geste "toucher et maintenir" n'entraîne aucune fenêtre contextuelle pour les liens vers les images, alors que les liens vers les textes fonctionnent parfaitement. (Pour permettre à un site web d'être exécuté comme une web-app, j'ai ajouté le code suivant dans l'en-tête de la page :)

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

Quelqu'un peut-il reproduire ce comportement en utilisant le lien ci-dessus, et avoir des indices sur les versions d'iOS qui peuvent être affectées ? Je l'ai testé sur iPodTouch iOS 5.0.1 et iPad iOS 4.3.3. Merci.

Answer 1

J'ai remarqué ce même problème. Pour le contourner, j'ai utilisé un CSS background-image au lieu d'un img étiquette :

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

Notez que je laisse spécifiquement pas de l'espace blanc à l'intérieur du a car sinon l'iPhone l'affiche à côté de l'image (pour moi, elle apparaît comme un soulignement vide, mais cela dépend de votre propre CSS).

Answer 2

Je ne peux pas reproduire l'échec de votre lien d'image sur iOS 5.0.1. Plus précisément, j'ai mis la ligne suivante dans une page web sur apache :

<p>This is a test of a tel link: <a href="tel:2060000000"><img src="/iPodTouch_s4.png"></a></p>

Une pression sur le graphique fait apparaître la boîte de dialogue du téléphone, avec les options Annuler et Appeler.

Si vous appuyez sur le graphique, vous obtiendrez les options Ouvrir dans le téléphone, Enregistrer l'image et Copier ; si vous appuyez sur Ouvrir dans le téléphone, vous obtiendrez la boîte de dialogue du téléphone, avec les options Annuler et Appeler.

La seule façon de reproduire votre expérience est de faire une erreur dans l'indicatif du protocole. Par exemple, ceci reproduit tout ce que vous mentionnez (notez le 1 au lieu du L minuscule dans le href) :

<p>This is a test of a tel link: <a href="te1:2060000000"><img src="/iPodTouch_s4.png"></a></p>

Êtes-vous sûr qu'il n'y a pas de faute de frappe ou autre problème avec le lien ?