画像リンクをタップして電話発信するiPhone, AndroidのバナーやボタンをPCで無効にする方法

スマホページで画像バナーをタップで、電話発信させる方法

 

従来の<a href=”tel:xxxxxx”></a>の方法は絶対NG

 
<a href=”tel:01-0000-0000″>01-0000-0000</a>
と、リンクにしておくと、タップ(クリックすると)
tel-tap-to-submit
 
こんな感じのダイアログが出てきて通話ができる機能だ。
iPhone, Androidでスマホのタップ(クリック)で電話を掛けるリンクを、PCで無効にする方法
でも紹介した通り、spanをリンクにしてスマホで電話発信する事ができる。
これでPCでクリックしてしまっても、
 

アドレスのプロトコルが不明です
telというプロトコルはどのアプリケーションにも関連づけられておらず、
Firefox でこのアドレスを開く方法が分かりません。
・このプロトコルを使用するアドレスを開くには、別のソフトウェアをインストールする必要があるかもしれません。

 
というような、エラーメッセージが出てくることはない。
 
ただし、iPhone, Androidでスマホのタップ(クリック)で電話を掛けるリンクを、PCで無効にする方法では、文字リンクにする必要があった。
 
これを画像リンクやバナー、ボタンで行う方法。もちろんiPhoneだけでなくAndroidにも対応する方法を紹介する。
 

<span>を使い、PCでリンクにさせない

 
まず、HTMLの電話のリンクにしたい部分に

<span class=”tel-link”><img src=”img/co_contact.jpg” alt=”0100000000″ /></span>

 
と書く。

alt から電話番号を取得するので、必ず記入する事!
 
jsファイルに

$(function(){
var ua = navigator.userAgent;
if(ua.indexOf(‘iPhone’) > 0 || ua.indexOf(‘Android’) > 0){
$(‘.tel-link img’).each(function(){
var alt = $(this).attr(‘alt’);
$(this).wrap($(‘<a>’).attr(‘href’, ‘tel:’ + alt.replace(/-/g, ”)));
});
}
});

と書いておく。

分からなければ、ここから右クリックして保存などで、tel.jsをダウンロードしよう。

あと、jQueryが必要なので。こちらもダウンロードしておこう。既に導入済みの場合は新たにアップロードする必用はない。
jquery-1.11.3.min.js
 

拡張子やファイル名がちゃんとなっているか注意!

HTMLファイルにjsファイルを読み込ませる記述

 

<head>
…….中略……
<script type=”text/javascript” src=”js/jquery-1.11.3.min.js”></script>
<script type=”text/javascript” src=”js/tel.js”></script>
</head>

 
という感じで、

<span class=”tel-link”><img src=”img/co_contact.jpg” alt=”0100000000″ /></span>

と記述したHTMLファイルのheadの間に記述。

 

jsファイルをアップロードして搭載

 
jquery-1.11.3.min.js
tel.js
HTMLファイル

 
上記3つをサーバーにアップロードする。
 
 
完了。
 
 
 

関連記事:
スマホやSkypeでホームページ上の電話番号の自動リンクを無効化する方法

iPhone, Androidでスマホのタップ(クリック)で電話を掛けるリンクを、PCで無効にする方法

こんな記事も読まれています

コメントを残す