Amazon360と楽-yahのポップ画像表示を改造

07/01/12 Comment(0) Trackback(1)

Amazon360楽-yahに実装されている画像のポップアップを改造しました。

ポップアップ画像を表示する「位置」を、マウス位置からの相対座標(X座標のみ。Y座標はこれまで通り)で表示できるようにしました。

今までの仕組みだと、ディスプレイの大きさやブラウザのウィンドウの大きさによっては、元画像とポップアップ画像が重なってしまい、上手く表示されない場合があったのです。

マウス座標からの相対位置を指定するアイデアは、このサービスを始めた頃からあって、実際に仕組みも実装していたのですが、IEでは動くけれど、FireFoxでは全く動かなかった(いわゆるクロスブラウザ問題)のです。

しかし今回、上手い方法を見つけました。
けど、上手くいった理由がわかっていないので、詳しいことはまた後日に。

※マウスの位置で、ポップアップ画像を左右どちらに表示するかを自動的に判別するようにしています。

※マイ本棚もアップグレードしてます。


Amazon360の例です。
同じ画像でもマウスの位置によって、ポップアップする場所が微妙に違います↓

powerd by Amazon360


490
270