あまなつ日記: Amazon商品の一部分を選択して表示させるAdpartsです

« Shopあまなつへのリンクを追加しました | メイン | リンクテキストから画像がポップアップするAdhoverをはじめます »

2006年01月26日

Amazon商品の一部分を選択して表示させるAdpartsです

アキバBlog（秋葉原ブログ）って有名なサイトがありますが、
そこの右の方で紹介されている感じのんを簡単に出来るようにしたいなぁって感じ考えたんですが
こんな感じ

FineScenery ToHeart2 小牧愛佳 ( 1/8スケール PVC塗装済み完成品 )

そこのは、画像をその部分だけ切り出して別に画像をｕｐしてそれをＡｍａｚｏｎへリンクするみたいな感じだと思うんですが
その切り出して、画像をｕｐするってのが邪魔くさいので「切り出さない、画像をｕｐしない」で同じようなことは出来ないかと思い、始めました。
Adpartsって名前にしたんですが、そのページを見てもらえればわかると思いますが
表示する枠サイズを決めて、その中に入るようにAmazonの画像を使ってドラッグして位置を決めたら表示されているタグを自分のページにコピペするだけで簡単に作成出来ます。
Ａｍａｚｏｎの画像をそのまま使いますんで、切り出す必要も、ｕｐする必要もありません。

表示方法は簡単に言えば、 div　で枠サイズ決めて枠外は表示をhiddenにしてAmazonの画像をposition:absolute;top:**px; left:**px;で位置調整して表示するようにしているだけです。

作成の仕方はそのページを見ればだいたいわかると思いますが、また説明ページを別途作成しようと思います。
作成ページは、IE6とFirefox/1.5で動作確認しています。Firefox/1.5は赤枠内ではドラックできません。
ネスケの7.1は動作しません。
作成したイメージは、だいたいのブラウザで問題なく表示されると思いますがtableを使って表示する際は注意が必要です。ネスケの7.1だと横に並べたのが重なって表示されました。

注意点として、画像大を使うとドアップのイメージを作成出来ますが切り出しているわけではないので、いくら小さく表示させていてもその画像サイズ分読み込むので表示が重くなります。

あまなつの各商品の紹介場所に⇒Adpartsで作成するのリンクをつけましたのでAdassistのように検索して作成できます。

画像の左上にが表示されていますが、あまなつへのリンク（あまなつ画像の上あたり）とShopあまなつへのリンク（あまなつ画像の左下あたり）、そして同じレイアウトで作成出来るようにリンク（あまなつ画像の右下あたり）をつけてあります。消さずに使ってください。お願いします。

【表示例】
こんな感じの表示とか