急ぎですみませんがお願いします。
ホームページの商品ページ作成で
http://www.lamercollections.com/collection/Elect …
のサイトように画像にマウスを合わせた所が左に拡大で表示され、下に数個のサムネイル画像を同じく載せたいのですが、
素人なので色々調べてみたのですが、初心者向けではなく一からのやり方が分りません。
どなたかわかりやすく教えて頂けないでしょうか?
上手く説明できなくて申し訳けないですが、よろしくお願いします。
No.1ベストアンサー
- 回答日時:
ご提示のサイトでは以下のものを利用しているようです。
(ライセンスフリーではありません)
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/inde …
(残念ながらこちらも有料です)
って検索していたら、jQuery pluginでもありましたね。
こちらはMITライセンスみたい。
http://archive.plugins.jquery.com/project/zooma
http://www.jqueryzoomplugin.net/index.html
こちらはフリーかも(ちゃんと確認していませんので、ご確認を)
(magic zoomを意識して作成されているみたい)
http://www.professorcloud.com/mainsite/cloud-zoo …
10分ぐらいの検索で(↑)が見つかりましたので、根気よく探せばもっといろいろ見つかるかと思います。
<おまけ>
canvasを利用して似たようなことをする解説サイト
(canvasを利用するという発想もありかも)
http://serennz.sakura.ne.jp/sb/log/eid108.html
早速お返事をいただきましてありがとうございます。
色々時間を割いて調べていただきまして本当にありがとうございました。
相当むずかしいですが・・・色々調べてやってみます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Excel(エクセル) ある文字を含む際に、値を返す数式についてです 5 2022/08/28 16:58
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- PDF 画像調整してスクショし保存した画像をPC画面と同画質で印刷する方法 1 2022/03/31 19:09
- その他(IT・Webサービス) 画像調整してスクショし保存した画像をPC画面と同画質で印刷する方法 3 2022/03/31 19:11
- BTOパソコン PCケースのHDD設置方法につきまして 3 2023/06/08 14:19
- Excel(エクセル) iphonからone driveに保存してあるExcelを閲覧すると表示の仕方がちがうデータ 2 2022/12/21 13:51
- Excel(エクセル) エクセル、日々の集計整理方法。(再送です。) 5 2022/10/02 00:19
- YouTube ユーチューブへの動画投稿にサムネイルを付ける方法は? 1 2022/07/21 23:45
- Excel(エクセル) エクセルにサムネイル画像組み込み 2 2022/09/02 17:13
- その他(Microsoft Office) Excelで該当しない項目(#N/Aの商品名)を簡単に表示・抽出させる方法についてです 1 2022/08/25 22:12
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ポップアップヘルプをフレーム...
-
JavaScriptでwebAPIを呼び出す方法
-
画像のポップアップ
-
Vba SelStart、SelLen教えてく...
-
ブラウザ自体の事じゃなくてJav...
-
VBAによる第3、4水準文字の判定...
-
VB.NET2003 テキストボックスに...
-
if(1){...}とはどういうことで...
-
「終了していない文字列型の定...
-
C#でボタン名を変更しても動く
-
innerHTMLなどの反映タイミング
-
javascriptで「オブジェクトを...
-
ページ遷移時にアコーディオン...
-
漢字などを正規表現でパターン...
-
再帰呼び出しになってしまうの...
-
ホームページビルダーでスクリ...
-
VBScript から JavaScript を呼...
-
VBA ステータスバー DoEvents
-
jQuery ui Datepicker 明日以降...
-
自作のJavaScriptを既存のペー...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
amazonの商品画像拡大のようなj...
-
jwplayer.js controlbar制御
-
「光の三原色」みたいな「三つ...
-
ホームページビルダーを使って...
-
d3.jsを使っての折れ線グラフと...
-
最後から最初に戻って始まるカ...
-
ページ全体の拡大/縮小が行え...
-
リンク先をマウスが移動すると...
-
アンカーにマウスオーバーして...
-
C#で枠無しウィンドウの移動
-
Windows Form のMSChartで、グ...
-
altやtitleタグの表示のような...
-
【JavaScrip】メニューボタンに...
-
画像のポップアップ
-
画像の上にマウスをもってくる...
-
教えてgooのカテゴリー選択のよ...
-
JavaScriptで・・・
-
JavaScriptで、表を絞り込み&ソ...
-
ポップアップでX固定Yマウス座...
-
以下のコードを実行しても、オ...
おすすめ情報