画像の一部を拡大する方法を教えて下さい。

質問

急ぎですみませんがお願いします。

ホームページの商品ページ作成で
http://www.lamercollections.com/collection/Electric-Blue-Snake-Laptop-Case/

のサイトように画像にマウスを合わせた所が左に拡大で表示され、下に数個のサムネイル画像を同じく載せたいのですが、

素人なので色々調べてみたのですが、初心者向けではなく一からのやり方が分りません。

どなたかわかりやすく教えて頂けないでしょうか？

上手く説明できなくて申し訳けないですが、よろしくお願いします。

回答No.1

fujillin · ベストアンサー

ご提示のサイトでは以下のものを利用しているようです。
（ライセンスフリーではありません）
http://www.magictoolbox.com/magiczoom/examples/
（他にも似たようなユーティリティをいろいろ作成しているようです）

もしも自作なさるというのであれば、大雑把に言って、
1）マウスムーブに連動する半透明の矩形を作成
2）　1）の可動範囲を対象画像のエリアに限定
3）　1）の矩形にあわせ、拡大用画像（又は同じ画像の拡大）
　　を表示領域にclipまたは、top、leftを制御して表示
4）マウスが対象エリア外の場合は、拡大画像を非表示

みたいなことをやれば可能かと思います。
サンプルサイトのものは、マウスの動きにピッタリではなく、よりスムーズに
なるように、少し遅れて動くように制御されているので、上記よりもさらに
複雑になっていると思われます。

とはいっても、
＞素人なので色々調べてみたのですが、初心者向けではなく
＞一からのやり方が分りません
とのことなので、自作は相当に厳しいかと想像されます。
「一から」というのなら、まず、javascriptを覚えることから始めなさいとなってしまいます。

動作は少し違っても、単純に拡大する程度であれば、他にもライブラリ化している人が
居ると思いますので、そういったもののフリー版を探すのが手っ取り早いように思います。

例えば
http://www.netzgesta.de/shiftzoom/
（これも、ノンコマーシャルのライセンスみたいですが）

magicZoomとかなり似た感じのもの
http://www.mind-projects.it/projects/jqzoom/index.php#howtouse
（残念ながらこちらも有料です）

って検索していたら、jQuery pluginでもありましたね。
こちらはMITライセンスみたい。
http://archive.plugins.jquery.com/project/zooma
http://www.jqueryzoomplugin.net/index.html

こちらはフリーかも（ちゃんと確認していませんので、ご確認を）
（magic zoomを意識して作成されているみたい）
http://www.professorcloud.com/mainsite/cloud-zoom.htm

１０分ぐらいの検索で（↑）が見つかりましたので、根気よく探せばもっといろいろ見つかるかと思います。

＜おまけ＞
canvasを利用して似たようなことをする解説サイト
（canvasを利用するという発想もありかも）
http://serennz.sakura.ne.jp/sb/log/eid108.html

お礼

早速お返事をいただきましてありがとうございます。
色々時間を割いて調べていただきまして本当にありがとうございました。

相当むずかしいですが・・・色々調べてやってみます。