« Amazon商品の一部分を選択して表示させるAdpartsです | メイン | Adpartsに画像回転機能を追加 »

2006年02月07日

リンクテキストから画像がポップアップするAdhoverをはじめます

このエントリーを含むはてなブックマーク

以前からテキストでAmazonの商品を紹介するようにもしたいなぁと考えてまして、文中に「商品名」や「ある言葉」でAmazonの商品へリンクできる形がほしいなぁと

まぁ、Apple iTunes Music プリペイドカードみたいな感じで

ただ、やっぱりこれだとちょっと淋しくて、これじゃ商品は売れないかなぁとか考えて
で、やっぱり小さい画像だけでも商品の前に付けるか方がいいかなって
Apple iTunes Music プリペイドカード 2,500円 [MA163J/A]Apple iTunes Music プリペイドカードてな感じで考えてみたんですが
やっぱインパクトがない！


やっぱり色々考えて画像がポップアップするような形式がいいかなぁと思って色々調べてたんですが
例えば、音ログなんかは　あれこれポップアップを使ってかっこよく作られています。
スタイルシートとjavascriptをダウンロードして自分とこのサーバースペースにアップしてリンクすれば簡単に出来るんですが、
自分とこだけで使うのにはとってもかっこよくていいんですが、やっぱり「あまなつ」のサービスとしてなんとか似たようなことが出来ないかと考えると、そのまま利用するわけにもいかないし中身見ると結構複雑だしｗ

もっとシンプルな感じでできないものかとまた、色々調べていると
Lucky bag::blog: CSS で画像ポップアップ・・・
いい情報を見つけました。
javascriptを使わずにスタイルシートだけで出来るシンプルなポップアップ

ここを見てると

最初に拡大画像を高さ 1px 幅 1px に指定しておき、hover で正寸を指定させることによって実現させている。

最初に1x1に画像を小さくしておいて、a:hoverを使いリンクにマウスが乗ると画像サイズが大きくなるようにスタイルシートを設定してある。

これを参考に色々試行錯誤をして、Amazonの画像がポップアップするようにしてみました。
こんな感じで
Apple iTunes Music プリペイドカード 2,500円 [MA163J/A]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;は必要ないようです。

関連記事 [Adhover]

Adhoverを新しい商品画像に対応した

Amazonの「その他のイメージを見る」の画像を選択できるようにしてみる

テキストリンクのAmazonツールAdhover作成ページに商品情報追加

テキストにマウスを乗せると画像が表示されるAdhoverにユーザーレビューが表示出来る機能追加

Adhoverマウスを乗せた時の画像サイズを選択出来るように変更

« Amazon商品の一部分を選択して表示させるAdpartsです | メイン | Adpartsに画像回転機能を追加 »

投稿者 amanatu : 2006年02月07日 00:34

トラックバック

このエントリーのトラックバックURL:
http://blog.amanatu.com/mt/mt-tb.cgi/99

コメント

凄くカッコいいです！
早速使わせてもらってますがちょっと質問が。

ソースの改変って行ってもいいんでしょうか？
と言うのがスタイルシートでリンクに触れると背景が
白くなるんでそれを無しに変えさせてもらったんですが・・・

あまなつさんへのリンク画像などは一切弄っておりません。

投稿者 aruma : 2006年02月15日 02:09

arumaさん
ありがとうございます。

スタイルの
background-color:#FFFFFF;なしで確認したら、特に必要ないようですね。
作成ページ・説明ページ等、修正しておきます。

あまなつへのリンクを残してもらえるのなら、ご自由に変更して下さって結構です。

投稿者 amanatu : 2006年02月15日 20:36

レスありがとうございます。
運営大変だと思いますが応援しております。


それでは失礼いたします。

投稿者 aruma : 2006年02月15日 22:48