- ベストアンサー
マウスオーバーで画像が拡大するには？？
下記サイトのように商品画像にマウスオーバーすると商品がアップになるようにしたいです。 http://www.k-swiss.jp/index.php?page=shop.product_details&flypage=flypage.tpl&product_id=306&category_id=41&option=com_virtuemart&Itemid=2 ｈｔｍｌとｃｓｓの基本的なのはわかります。 ご教授よろしくお願い致します。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
そんな訳で、同様の「Mazic Zoom Image」をHTML5のCANVAS要素を 使って、javascriptで作ってみました。 もちろん、IE8以下は無視です。最新のFirefoxとGoogleChromeだと、 動きました。IE9も大丈夫のはずです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Mazic Zoom By Canvas</title> <script type="text/javascript" src="MagicZoomCanvas.js"></script> </style> </head> <body> <h1>Mazic Zoom By Canvas</h1> <canvas id="FinderCanvas" width="200" height="200" style="border:1px solid gray;"></canvas> <canvas id="ViewerCanvas" width="600" height="600" style="border:1px solid gray;"></canvas> <script type="text/javascript"> MagicZoomCanvas({FinderCanvasId:"FinderCanvas", ViewerCanvasId:"ViewerCanvas", FinderBoxW:50, FinderBoxH:50, ImageSrc:"/image/hogehoge.jpg" } ); </script> </body> </html> ソースはたいして長くないんですが、ぎりぎりおそまりきらなかった ので、↓におきました。 https://gist.github.com/744364
その他の回答 (2)
- yyr446
- ベストアンサー率65% (870/1330)
そのサイトで使っているのは 「Magic Zoom Plus」というjavascriptのライブラリーツールだと思います。 配布元は↓ http://www.magictoolbox.com/magiczoomplus/examples/ ですね。 おっと、これ有料ですね。1サイトライセンス：39ポンド （円高だからお買いどくかも） もしかして、無料のトライアル版でも十分使えるかも、即ダウンロード！
画像のズームアップ「jqzoom」-jquery plugin – http://39kn.com/2009/04/30/1990/
お礼
ちょっとしたトラブルがあり御礼が遅くなってしまい 大変申し訳ありませんでした。 丁寧にご教授いただき誠にありがとうございました☆