広告表示のギミックなんですが。
1行テキストで、マウスを載せると、詳しい情報が表示されるって言う。
ソースをよく見てみると、『あまなつ』というサイトの、
Adhoverというサービスらしいので、少し試してみました。
あまなつAdhover
あまなつ amazonツール&ショップ—Amanatu.com
実際に作ってみたのはこちら。




ソースを見ると分かるんですが、これ、CSSだけで実現してるんですね。
てっきり、JavaScriptかなんかだと思ったんですが、
マウスオーバー(a:hover)しか使ってない。
ギミックとしては、説明用のデータはCSSで画面外に追い出しておいて、
それを、hoverで引っ張ってくるっていう理屈。
なーーーーるほど!
かなり目鱗。
もちろん、画面外で待機してる様を想像すると、スマートではないけれども…(苦笑)
idで分けていなくても、
relativeで場所を区別できるから、複数のアイテムを表示することも出来るし、
使い勝手としてはなかなか。
試しにもう一個。




ただ、記載できる情報が少なすぎるのが難点。
画像と、レビューだけでは…うーん。どうなんでしょうか。微妙。
載せられる情報がもう少し、せめて価格くらいあると良いんだけど…
(登録時のインターフェイスの問題でこのギミックの問題ではないけど)
→ よく考えたら、JavaScriptじゃないってことは現在の価格を取得できない、
価格は頻繁に変わるから価格を載せるのは適切ではないってことか。
じゃあ、JavaScriptと組合わせてポップアップ系の作ればいいってことかい?
(そういうサービスはまだ無いみたいだけど)
たくさん情報載せたいなら、同サイトの他のサービスを使ってね、ということなのかなー。
(例えば、AmanatuAdassistとか)
単純な技法で、目新しい感じを演出してるという点で、面白い。
何か応用してみようっと。