【jQuery】数字の表記を画像で行う!

例えば、MTで今の記事件数を表示する際、WEBフォント以外でデザインフォントを使用して印象を強めに伝えたい際などに使用します。

左:デバイスフォント、右:デバイスフォントをjQuery で画像に置き換え

左:デバイスフォント
右:デバイスフォントをjQuery で画像に置き換え

使用フォント:Another X Display TFB

MTテンプレート

<p class="number">
	現在
	<span class="numb"><mt:Entries category="カテゴリーA"><mt:EntriesHeader><mt:EntriesCount></mt:EntriesHeader></mt:Entries></span>
	記事
</p>

構築結果

<p class="number">
	現在
	<span class="numb">123</span>
	記事
</p>

jQuery

	var numb = $('.numb').text();
	$('.numb').empty();
	var numarr = numb.split('');
	var newnum = [];
	for ( i=0; i < numarr.length; i++ ) {
		$('.numb').append('<img src="/shared/images/count_' + numarr[i] + '.gif" alt="' + numarr[i] + '" width="31" height="47">');
	}

ブラウザに表示される内容

<p class="number">
	現在
	<span class="numb"><img src="/shared/images/count_1.gif" alt="1" width="31" height="47"><img src="/shared/images/count_2.gif" alt="2" width="31" height="47"><img src="/shared/images/count_3.gif" alt="3" width="31" height="47"></span>
	記事
</p>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください