先日紹介したAdpartsに商品画像を回転させてレイアウトできるようにしました。
Amazon画像を回転させたりする機能はAbusing Amazon imagesを参考にしています。（その他、色々なAmazon画像の使い方が記載されてます）
画像回転:左◎ 右○ [角度]:0 度(0～90) で
左に回転するのか右に回転するのかを決めて角度を入力します。
今までだと
こんな感じでしたが
右へ45度傾けた
こんな感じの紹介も出来たりします。
色々お試し下さい。
以前からテキストでAmazonの商品を紹介するようにもしたいなぁと考えてまして、文中に「商品名」や「ある言葉」でAmazonの商品へリンクできる形がほしいなぁと
まぁ、Apple iTunes Music プリペイドカードみたいな感じで
ただ、やっぱりこれだとちょっと淋しくて、これじゃ商品は売れないかなぁとか考えて
で、やっぱり小さい画像だけでも商品の前に付けるか方がいいかなって
![Apple iTunes Music プリペイドカード 2,500円 [MA163J/A]](http://images.amazon.com/images/P/B000ALF5GS.09._AA12_FMjpg_SCTZZZZZZZ_.jpg "Apple iTunes Music プリペイドカード 2,500円 [MA163J/A]")
Apple iTunes Music プリペイドカードてな感じで考えてみたんですが
やっぱインパクトがない！
やっぱり色々考えて画像がポップアップするような形式がいいかなぁと思って色々調べてたんですが
例えば、音ログなんかは あれこれポップアップを使ってかっこよく作られています。
スタイルシートとjavascriptをダウンロードして自分とこのサーバースペースにアップしてリンクすれば簡単に出来るんですが、
自分とこだけで使うのにはとってもかっこよくていいんですが、やっぱり「あまなつ」のサービスとしてなんとか似たようなことが出来ないかと考えると、そのまま利用するわけにもいかないし中身見ると結構複雑だしｗ
もっとシンプルな感じでできないものかとまた、色々調べていると
Lucky bag::blog: CSS で画像ポップアップ・・・
いい情報を見つけました。
javascriptを使わずにスタイルシートだけで出来るシンプルなポップアップ
ここを見てると
最初に拡大画像を高さ 1px 幅 1px に指定しておき、hover で正寸を指定させることによって実現させている。
最初に1×1に画像を小さくしておいて、a:hoverを使いリンクにマウスが乗ると画像サイズが大きくなるようにスタイルシートを設定してある。
これを参考に色々試行錯誤をして、Amazonの画像がポップアップするようにしてみました。
こんな感じで
![Apple iTunes Music プリペイドカード 2,500円 [MA163J/A]](http://images.amazon.com/images/P/B000ALF5GS.09.MZZZZZZZ.jpg "Apple iTunes Music プリペイドカード 2,500円 [MA163J/A]")
Apple iTunes Music プリペイドカード 2,500円 [MA163J/A]
hoverでポップアップするってことで、adhoverって名前で簡単にリンクが作成出来るようにはじめます。
まだ、ちょこちょこ調整が入ると思いますがよければ使ってみてください。
スタイルシートを利用したポップアップなので利用するには
スタイルを指定する必要があります。
htmlファイルに直接指定するなら、<head>・・・ </head>の間に下記内容を追加して下さい。
<style type=”text/css”>
<!–
.img_adhover{top:-5000px; left:-5000px;position:absolute;}
a.a_adhover:hover {background-color:#FFFFFF;z-index:1000;position:relative;}
a.a_adhover:hover .img_adhover{top:16px; left:0px;}
–>
</style>
また、スタイルシートに追加するなら、（例えばstyle.css）
.img_adhover{top:-5000px; left:-5000px;position:absolute;}
a.a_adhover:hover {background-color:#FFFFFF;z-index:1000;position:relative;}
a.a_adhover:hover .img_adhover{top:16px; left:0px;}
を付け加えて下さい。
あとはAdhoverのページで出力されるタグを貼り付ければOKです。
2006.2.15追記
a.a_adhover:hover のbackground-color:#FFFFFF;は必要ないようです。
