Posted: 2015.12.22 / Category: javascript / Tag: jQuery

iPhoneだと電話番号に自動でリンクを付けてくれますが、電話番号が画像だったりするとリンクしてくれません。
そんなときの為にjQueryで自動でリンクする方法をご紹介します。

電話番号の画像にリンクを付ける

HTMLではimgにdata属性で電話番号を設定します。
あとは適当なクラスを割り当てておきます。

HTML

<img src="tel.png" alt="電話番号: 000-000-0000" data-tel="0000000000" class="sp-tel-link">

jQueryではwrapを使用すれば要素を囲むことができます。

JavaScript

if ($(window).width() < 480) {
	$('.sp-tel-link').each(function () {
		$(this).wrap('<a href="' + $(this).data('tel') + '"></a>');
	});
}

モバイル時だけ画像にリンクを付ける

レスポンシブの場合PC用の画像だとそのままだとスマホでは縮小してしまい見えにくい。でもピンチアウトは禁止している。という時の為に画像にリンクを付けてみます。

同じようにimgにクラスを割り当てます。今度はsrcをそのまま使えばいいのでdate属性は必要ありません。

HTML

<img src="tel.png" class="sp-img-link">

jQueryでもやってることは同じでsrcに置き換えてるだけですね。

JavaScript

if ($(window).width() < 480) {
	$('.sp-img-link').each(function () {
		$(this).wrap('<a href="' + $(this).attr('src') + '" target="_blank"></a>');
	});
}

ちょっと小ネタすぎましたが以上です。