急ぎですみませんがお願いします。
ホームページの商品ページ作成で
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で、表を絞り込み&ソ...
-
階層化されたメニューの作り方
-
プルダウンメニューの作成方法
-
Vba SelStart、SelLen教えてく...
-
javascript 文字列の最後から1...
-
Excel VBA にて JavaScript の...
-
ラベルの色がかわってくれない
-
JavaScriptで ブラウザの閉じる...
-
時間稼ぎの命令文とは?
-
JavascriptでのExcel起動について
-
JSPの処理の途中で、JavaScript...
-
クロスドメインでクッキーの取得
-
Webページ中の javascript をVB...
-
タブブラウザで focus() を実...
-
VC#でテキストボックスに変数の...
-
C#の質問です。
-
表示ページによって、aタグ内の...
-
計算結果が毎回違う。
-
リクエスト結果が一瞬しか表示...
-
Session切れ前にWarningメッセージ
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Windows Form のMSChartで、グ...
-
amazonの商品画像拡大のようなj...
-
リンク先をマウスが移動すると...
-
「光の三原色」みたいな「三つ...
-
画像の上にマウスをもってくる...
-
JavaScriptでwebAPIを呼び出す方法
-
静止写真を『じわっと』でる感じに
-
ポップアップヘルプをフレーム...
-
画像のポップアップ
-
ページ全体の拡大/縮小が行え...
-
d3.jsを使っての折れ線グラフと...
-
if(1){...}とはどういうことで...
-
Vba SelStart、SelLen教えてく...
-
JavaScriptで ブラウザの閉じる...
-
ブラウザ自体の事じゃなくてJav...
-
VB.NET2003 テキストボックスに...
-
JSPの処理の途中で、JavaScript...
-
gas 全角数字を半角数字に変換
-
デザイン時のVisible=Falseは実...
-
「終了していない文字列型の定...
おすすめ情報