[WEB・ブログ]Amazon.co.jpの画像を使って遊ぶJavaScript

前回の記事で書いたように、春日以外でも表示させる方法をば。

画像をぷるぷる&言葉を無限生成して遊ぶJavaScript

<script type="text/javascript" charset="utf-8" src="http://dl.dropbox.com/u/717739/blog/2009/faceandword.js"></script>
<div id="kasuga"><script type="text/javascript">
faceandword.kasuga.load('kasuga');
</script></div>

まずは基本。これをそのままコピー&ペーストして記事を投稿すると春日が表示される。

<script type="text/javascript" charset="utf-8" src="http://dl.dropbox.com/u/717739/blog/2009/faceandword.js"></script>
<div id="faceandword_jojo"><script type="text/javascript">
faceandword.jojo=new faceandwordLoader();
faceandword.jojo._config={
  face:{
    asin:'4086179083',
    start_x:15,
    start_y:100,
    width:140,
    height:210,
    plusminus:10
  },
  word:{
    'ド':100,
    'なっ!何をするだァーーーーーッ!ゆるさんッ!':3,
    'ズキュウウゥン!':2,
    'ディオォォオオーーーッ!':2,
    '君がッ、泣くまで、殴るのをやめないッ!':1,
    'メメタァ!':2,
    'ふるえるぞハート!燃え尽きるほどヒート!おおおおおっ、刻むぞ血液のビート!':1

  }
};
faceandword.jojo.load('faceandword_jojo');
</script></div>

そして、これをそのままコピー&ペーストすると、この記事の一番はじめに表示されたようなジョジョっぽいのが表示されるw

設定の仕方

これはAmazon.co.jpの画像を使って遊んでるので、まずはその画像について。

例えばこのジョジョの画像だと、
http://images-jp.amazon.com/images/P/4086179083.09._CR15,100,140,210_SCLZZZZZZZ_.jpg
のそれぞれ強調した箇所をasin,start_x,start_y,width,heightとして設定する。

_CR[x座標],[y座標],[幅],[高さ]_ってのは画像の切り抜きなので、表示したい画像のASINに変えてからCRの各値を変更&画像再読込でちょうどいい位置になるまで試してみるといいと思う。

plusminusは移動の幅ね。あんまし大きな値にすると不具合が発生するような気がするので注意。

続いて、無限増殖させる言葉について。

これはオプションなので、言葉を表示させたいときだけ設定する。設定がないときは画像がぷるぷるするだけ。word:{}の中に何個でも書いて行けばOK。整数値は出現比となる。word:'あああ'と1個だけ設定することもできる。

とまぁこんな感じで

Good Luck!!

ホントはもっと色々とぷるぷる画像を入れるつもりだったんだけど、思い付かなかったというのはここだけの秘密。

実は全然大したスクリプトではないというのもここだけの秘密w

Amazon.co.jpの画像を使って遊ぶJavaScriptへのコメントを書く

コメント : 0件

Amazon.co.jpの画像を使って遊ぶJavaScriptへの言及をする

埋め込みリンクタグ
<a target="_blank" href="http://f-u.seesaa.net/article/119698577.html">Amazon.co.jpの画像を使って遊ぶJavaScript : full of universe</a>
トラックバック URL
http://blog.seesaa.jp/tb/119698577
承認したトラックバックのみ表示される

トラックバック : 0件

プロフィール

sima

ガジェット大好き。おもしろアイテム大好き。いろいろとまぁ物欲を刺激するモノが多いけど、なかなか手に入れることができないでいる。いつかは自分の部屋を、自分が気に入ったモノだけで埋め尽くしたいものだなぁ。…あっ、これ将来の夢ね。

Twitter はフォロー大歓迎なのでよろしく。よく蚊と戦ってるよ。

最新記事

  1. OpeTumblr の Opera Extensions (拡張機能) 版を密かに公開 (05月25日)
  2. シカ成分を補充したら幸せになった (04月24日)
  3. ブログを(内部的にガッツリと)リニューアルしてみた (12月10日)
  4. 補完モードを開始するマッピングを書く (10月25日)
  5. アボカドを育ててみた…かった (07月23日)
  6. 正規表現クロスワードを完全クリアしてみた (07月19日)
  7. Gmail バックアップソフトの Gmvault が動かないときの解決法 (07月14日)
  8. Google アカウントが消える前に! Gmail フルバックアップのススメ (06月30日)
  9. 厳選して使っているポイントサイト2つ (03月27日)
  10. Tumblr で画像を Lightbox 表示!(しかも何も導入せずに) (03月21日)

カテゴリ

アーカイブ

コメント

Gmail バックアップソフトの Gmvault が動かないときの解決法
dsfds (03月31日)
OpeTumblr の Opera Extensions (拡張機能) 版を密かに公開
sima (06月26日)
you (11月30日)
you (11月30日)
sima (10月28日)
HTML ソースの改行を半角スペースにしない方法
ok (06月21日)
sima (05月28日)
edvakf (05月28日)
英数字・記号を並べてみる
ふぁ (11月25日)
コメハチ (11月02日)
OperaでもっとTumblrる!(OpeTumblrをまたまた改良)
you (05月09日)
sima (05月07日)
you (05月04日)
chikuwa (12月12日)

トラックバック

20代で知っておくべき週番号のこと
full of universe (05月16日)
UKTenkiを自動巡回させてみる(MortScript)
なんとなくすばらしい日々の戯れ言 (01月31日)
新着メールを一気に開くMortScriptを改良!
PDAと私生活 (11月07日)
PDAと私生活 (11月02日)
コイツはすごい!Windows Live Writerでブログ投稿をラクラクに
シーサーイーサー (10月31日)
Willcom03で新着メールを一気に開く!(MortScript)
PDAと私生活 (10月10日)

のカレンダー