これはちょっと面白いｗ画像を使わず、cssとjQueryだけで顔文字を作ってしまったみたいです。発想が単純だったのでうまく応用出来れば楽しいものが出来あがりそうな予感もしますな。面白い事考える人がいますね・・ｗ
CSS+jQuery（と、もちろんHTML）のみで、画像は一切使われていません。ちょっとこの発想なかったです。ユニークですけど、割と使い勝手がいい気がする・・気のせいかなｗ
JQuery CSS Emoticons
一見よく見かけるアイコンだと思うんですけど、これ、全部cssとテキストとjsで作られています。
からくり
こういう発想。単純だけど思いつきませんでしたｗなので、以下のようにテキストとして選択できます。
:Ｄとか:ｐを縦にして、グラデーションのかかった黄色い枠を作れば完成ですね。
コード
<link href="stylesheets/jquery.cssemoticons.css" media="screen" rel="stylesheet" type="text/css" />
<script src="javascripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="javascripts/jquery.cssemoticons.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.comment').emoticonize({
//delay: 800,
//animate: false,
//exclude: 'pre, code, .no-emoticons'
});
})
</script>本体とプラグインやcssを読み込んで、pre内では使わない等、必要に応じて設定します。
マークアップ
<div class="comment"> Hi, this is a great plugin! ：-) </div>
便宜上大文字にしてあります。実装↓
画像でもいいけど、これはこれでちょっと面白いかもですねｗ以下でデモとスクリプトのダウンロードが可能です。