スマホページで画像バナーをタップで、電話発信させる方法
下記の従来の方法は絶対NG
こんな感じのダイアログが出てきて通話ができる機能だ。
iPhone, Androidでスマホのタップ(クリック)で電話を掛けるリンクを、PCで無効にする方法
でも紹介した通り、spanをリンクにしてスマホで電話発信する事ができる。
これでPCでクリックしてしまっても、
アドレスのプロトコルが不明です
telというプロトコルはどのアプリケーションにも関連づけられておらず、
Firefox でこのアドレスを開く方法が分かりません。
・このプロトコルを使用するアドレスを開くには、別のソフトウェアをインストールする必要があるかもしれません。
というような、エラーメッセージが出てくることはない。
ただし、iPhone, Androidでスマホのタップ(クリック)で電話を掛けるリンクを、PCで無効にする方法では、文字リンクにする必要があった。
これを画像リンクやバナー、ボタンで行う方法。もちろんiPhoneだけでなくAndroidにも対応する方法を紹介する。
<span>を使い、PCでリンクにさせない
まず、HTMLの電話のリンクにしたい部分に
と書く。
alt から電話番号を取得するので、必ず記入する事!
jsファイルに
と書いておく。
分からなければ、ここから右クリックして保存などで、tel.jsをダウンロードしよう。
あと、jQueryが必要なので。こちらもダウンロードしておこう。既に導入済みの場合は新たにアップロードする必用はない。
jquery-1.11.3.min.js
拡張子やファイル名がちゃんとなっているか注意!
HTMLファイルにjsファイルを読み込ませる記述
という感じで、と記述したHTMLファイルのheadの間に記述。
jsファイルをアップロードして搭載
jquery-1.11.3.min.js
tel.js
HTMLファイル
上記3つをサーバーにアップロードする。
完了。