先月にiphoneが発売となり、世間ではiphoneが話題になると思いきや、オリンピックが始まり『iphoneの話題は何処に・・・』ってな具合ですが、実にWEB業界ではiphoneに使われるアイコンであったり、機能や動きはオシャレだと評判が高いのが現状です。
そこでWEBサイトにもiphone風アイコンを簡単に導入できないかと探していたところ、非常に便利なJavaScriptがあることが判明!
ざくっとですが、ご紹介したいと思います。
まずglossy.jsをサイトよりダウンロードしてきます。

解凍後glossyフォルダをフォルダごとアップロードします。
次にiphone風アイコンを使いたいページの<head></head>に
<script type="text/javascript" src="glossy/glossy.js"></script>
と記入すればJsが作動するようになります。
次にglossy.jsを使いたい画像を作成し、class="glossy iradius20"とimgにclass指定すればOKです。
例)
<img height="90" width="90" src="http://www.web-mora.co.jp/creators/img/sample1.gif" alt="sample1.gif" class="glossy iradius20" />

glossy.Js使用

ノーマル
このように同じ画像でもglossy.Js使用を使用するだけで、iphone風アイコンに変わります。
またiradius20のところの数字を変更すれば効果が変わりますので、必要に応じて変更して下さい。
詳しい設定については、NetzGesta.deに書かれていますので参考にしてみて下さい。
トラックバック(0)
このブログ記事を参照しているブログ一覧: JavaScriptでiphone風アイコンにする
このブログ記事に対するトラックバックURL: http://www.web-mora.co.jp/admin/mt-tb.cgi/113
コメントする