先月にiphoneが発売となり、世間ではiphoneが話題になると思いきや、オリンピックが始まり『iphoneの話題は何処に・・・』ってな具合ですが、実にWEB業界ではiphoneに使われるアイコンであったり、機能や動きはオシャレだと評判が高いのが現状です。

そこでWEBサイトにもiphone風アイコンを簡単に導入できないかと探していたところ、非常に便利なJavaScriptがあることが判明!

ざくっとですが、ご紹介したいと思います。

まずglossy.jsをサイトよりダウンロードしてきます。

step1.gif

 

解凍後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" />

sample1.gif

glossy.Js使用

sample1.gif

ノーマル

このように同じ画像でもglossy.Js使用を使用するだけで、iphone風アイコンに変わります。

またiradius20のところの数字を変更すれば効果が変わりますので、必要に応じて変更して下さい。

詳しい設定については、NetzGesta.deに書かれていますので参考にしてみて下さい。

トラックバック(0)

このブログ記事を参照しているブログ一覧: JavaScriptでiphone風アイコンにする

このブログ記事に対するトラックバックURL: http://www.web-mora.co.jp/admin/mt-tb.cgi/113

コメントする