top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_43

Instant.js:画像が簡単におしゃれなポロライド風になる! ・・・ 【AJAX】

 2008-06-11
 JavaScript が「帰ってきて」もうずいぶん経った。
 思えば、一番最初に、JavaScript を利用し始めて、
 もう何年になるのだろう。

 途中、制作者仲間でも、お客さんの間でも

   ブラウザによる動きに大きく違いの出る(当時) JavaScript
   ずいぶん嫌われていたものだった。
   SEO的にも良くない・・・ということだし。

  私自身は、
 phpPerlも利用していたが、
 html内で自在に遊べる javaScriptは結構
 重宝させてもらっていた。

 それでも、流行るSEOの前に、
 JavaScript は暗黒の時代を迎える。

  ▼

 そして、ついに帰ってきた(再評価だ)JavaScript

 クライアント環境やブラウザでの対応、
 非同期によるサーバー通信の実現(Ajax)など
 新しい(?) JavaScript は違うで!

 現在、様々な形で、素晴らしい
 JavaScriptのクラスやツールが配布されている。
 遠慮なくどんどん利用させていただき、報告してゆこう。

 ・・・ 前置きが長くなりすみません
 まずは
  画像が簡単におしゃれなポロライド風になる!
  という INSTANT.js


 追記に ▼

FC2ブログランキングにほんブログ村 IT技術ブログ Webサイト構築へブログ王ランキング人気ブログランキング人気ホームページランキングへ


more[提供URL:] http://www.netzgesta.de/instant/

[配布物:]instant.js 本体、サンプル用画像数種
 ※ところが下記レポートにあるように、
  このサイトからはうまく取得できなかった

[ダウンロード:] 上記URLにアクセスし
・Please read the License before you download instant.js 1.5

 からダウンロード

 > 解凍
   ※ところがここでエラー
    紹介にあるような、instant.js は出てこない
    ・(カスタマイズ用?か)cvi_instant_lib.js というファイルと
    ・複数の画像が入った images フォルダ のみ
     ※この画像の解凍途中で何度やってもエラー(what.jpg か?)

 しかたがないので、他のサンプル提供されているサイトから取得

[実施:]
1:使用するHTMLのヘッダに以下を記述

<script type="text/javascript" src="***/js/instant.js"></script>

 ・*** は適時環境に合わせて

2:上記の場所に
 instant.js をアップロード

3:使用したい画像に class 属性
<img class="instant" src="http://blog-imgs-30.fc2.com/m/e/t/metaboy/girl.jpg" alt="" border="0" >

これだけ!

 超簡単!

4:オプションはいろいろ用意されていて
 (class 属性に 半角空けて併記する)
 主なものは

 [画像を左右どちらに傾けるか または 傾けないか]
  ・傾けない = itiltnone
  ・左に傾ける = itiltleft
  ・右に傾ける = itiltright
(例)
<img class="instant itiltleft" src="http://blog-imgs-30.fc2.com/m/e/t/metaboy/girl.jpg" alt="" border="0" >


 [画像の下の 影の濃さ]
  ・ishadow を利用
  ・濃さは数値で併記
(例)
<img class="instant ishadow50" src="http://blog-imgs-30.fc2.com/m/e/t/metaboy/girl.jpg" alt="" border="0" >


 [画像枠の色]
  ・icolor を利用
  ・rrggbb形式のカラーコードを指定
(例)
<img class="instant icolor336699" src="http://blog-imgs-30.fc2.com/m/e/t/metaboy/girl.jpg" alt="" border="0" >


5:注意  80*80ピクセルより小さい場合は画像加工されないそうだ


 サンプルはこちらを参照!


まだまだ、instant.js の内部カスタマイズで
いろいろな表現できそうだ。
すばらしい、ありがとうございました。

INSTANT.js

      
commentsコメント
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/43-d7dfefd1
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。