[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

[WEB・ブログ]皆さん、本物の春日ですよ。ヘェッ!

…とまぁ春日全開で始まりましたこの記事。さぁ収拾が付かないぞ!どうする!どうするんだ!
(なんのことやら分かんない人は春日をホバーすべし)

女性の皆さん、春日はあなたの記事のなかにもいますよ。

<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>

…ってのを、そのまま貼り付けるだけで春日があなたの記事にも。ヘェッ!

<div id="kasuga2"><script type="text/javascript">
faceandword.kasuga.load('kasuga2');
</script></div>

2つ目からはこれだけで。どんどん貼ってもらってオーケー。ただし、idは被らないように注意。トゥース!

安心してください、春日はムダにクロスブラウザですよ。

一応、Opera、Chrome、Firefoxで確認

更に改造してIEでも確認!これで気にせず春日をあなたの記事にも!

JavaScriptで遊んでたらこんなんなった。後悔はちょっとしてる。ホントはjsファイルを自分のスペースに置いてもらいたいとこだけど、…まぁ大丈夫でしょ。

実は、春日以外も表示できる。長くなりそうなので、これについてはまた次の記事にでも。需要がなくても書く!とまぁこんなとこで。

バァーイ!

…春日、春日、呼び捨てしまくってたけど大丈夫かな?今更だけど(笑)

ところで、こういうsimaが書いた(変な)JavaScriptのソースを公開して、プロい人に意見やら訂正やらしてもらうにはどうしたらいいだろう?なにせ趣味でイジってる状態なので、変なもん公開するとまずいなと思って…。

JavaScript勉強してます的なブログが多い(と勝手に思ってる)はてなダイアリーに、アカウント取って書くべき?うーん、どうしようかな。なにかいい案ないかな?

プロフィール

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日)

のカレンダー