マウスオンで広告。

AAなにっき….〆ミ・д・,,ミにある、
広告表示のギミックなんですが。
1行テキストで、マウスを載せると、詳しい情報が表示されるって言う。

ソースをよく見てみると、『あまなつ』というサイトの、
Adhoverというサービスらしいので、少し試してみました。


あまなつAdhover

あまなつ amazonツール&ショップ—Amanatu.com


実際に作ってみたのはこちら。

ココロミくんココロミくん最高に楽しいです★
やらなくてもいいことを真面目に実行して、変でかわいいマンガでレポートしてる本です。とても美人な人なのに、こんなことしてるのが余計おかしくて素敵です。◎「スタバやハンズやTSUTAYAの店員のコスプレをして、そのお店に入ってみる」とか「色んなモノでタコウインナーを作ってみる」とか、とくに好き!今までのココロミ(試み)の、まだほんの一部。全部見たことあるけど、早く他のココロミも本で見たいです。
ココロミくん
あまなつAdhover ココロミくん

ソースを見ると分かるんですが、これ、CSSだけで実現してるんですね。
てっきり、JavaScriptかなんかだと思ったんですが、
マウスオーバー(a:hover)しか使ってない。

ギミックとしては、説明用のデータはCSSで画面外に追い出しておいて、
それを、hoverで引っ張ってくるっていう理屈。

なーーーーるほど!
かなり目鱗。
もちろん、画面外で待機してる様を想像すると、スマートではないけれども…(苦笑)

idで分けていなくても、
relativeで場所を区別できるから、複数のアイテムを表示することも出来るし、
使い勝手としてはなかなか。

試しにもう一個。

CANDY HOUSECANDY HOUSE最高傑作
今ではライブで殆ど聴くことが出来ない曲ばかり4曲のマキシだが、歌あり・インスト・カヴァーの3タイプ、スタジオ録音×2曲とライブ音源×2曲、とバラエティーにとんでいて、絶妙なバランスの作品。どの角度から聴いてもハズレ無し、ミッシェル史上最も遊んでいて最高のマキシと言えるだろうと思う。まだあまりミッシェルを知らない人にもかなりお奨めできる1枚。
CANDY HOUSE
あまなつAdhover CANDY HOUSE


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



たくさん情報載せたいなら、同サイトの他のサービスを使ってね、ということなのかなー。
(例えば、AmanatuAdassistとか)



単純な技法で、目新しい感じを演出してるという点で、面白い。
何か応用してみようっと。