- ベストアンサー
マウスオーバーで画像が拡大するには？？
下記サイトのように商品画像にマウスオーバーすると商品がアップになるようにしたいです。 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 ｈｔｍｌとｃｓｓの基本的なのはわかります。 ご教授よろしくお願い致します。
- kishi11
- お礼率33% (1/3)
- HTML
- 回答数3
- ありがとう数4
- みんなの回答 （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/
関連するQ&A
- クエリ付きURLをクエリ無しURLにリダイレクト
お世話になります。 旧サイトの”クエリ付きURL”を新サイト”クエリ無しURL”にリダイレクトさせる方法が知りたいです。よろしくお願いいたします。 以下は、旧サイトのクエリ付きURLです。 旧サイトURL /index.php?option=com_virtuemart&page=shop.browse&manufacturer_id=4&Itemid=62&limitstart=0&lang=en /index.php?option=com_virtuemart&page=shop.browse&manufacturer_id=4&Itemid=62&limitstart=0&lang=ja /index.php?option=com_virtuemart&page=shop.browse&manufacturer_id=4&Itemid=62&limitstart=0 /index.php?option=com_virtuemart&page=shop.browse&manufacturer_id=4&Itemid=62 /index.php?option=com_virtuemart&page=shop.browse&manufacturer_id=4 以下の新サイトのクエリ無しURLに301でリダイレクトしたいです。 新サイトURL /brand/devoa
- 締切済み
- その他（ITシステム運用・管理）
- 外国のサイトでギター購入の仕方教えてください。
外国のサイトでギター購入の仕方教えてください。 ベースを購入したいんですが、日本には在庫が無く外国のサイトで購入を考えています。 ですが、すべて英語なので全然わかりません。 外国から発送ということになると送料もすごくかかりそうで、誰か詳しく教えてもらえないでしょうか。 よろしくお願いします。 どちらのサイトの商品も新品ですよね？？ http://www.left-handedguitar.com/index2.php?page=shop.product_details&flypage=shop.flypage&product_id=167&category_id=4&manufacturer_id=0&option=com_virtuemart&Itemid=1 http://cgi.ebay.co.uk/Music-Man-StingRay-Black-4-String-Bass-Left-Handed-R-W-/270601360776?pt=UK_Musical_Instruments_Guitars_CV あと$1 899.00はいくらなんでしょうか？？
- ベストアンサー
- ネット通販
- スタイルシートでのマウスオーバー時の画像について
久しぶりにHTMLをいじってたんですが、すっかり忘れちゃって 色々見てみたんですが、解決しなかったので教えて下さい。 indexと同じディレクトリにdesignというフォルダを作り中にmouse_over.cssという カスケードスタイルシートを作りました。 "mouse_over.css"の内容は a:link.link1{ width:100px; height:25px; background-image:url(./pic/home.png); } a:hover.link1{ width:100px; height:25px; background-image:url(./pic/home_over.png); } です。それと、上同ディレクトリにpicというフォルダを作り、homeとhome_overという2種類の画像を入れてあります。indexには、head内に <link rel="stylesheet" type="text/css" href="design/mouse_over.css" />というリンクを張り、 body内に<a href="リンク先URL" class="link1"></a>としましたが、画像が出ません。 上記のCSSをindex内に<style>括りで書くと、画像も表示されちゃんとマウスオーバーで 画像が変わるのですが、CSSを別に置くとindexは真っ白のまま何も表示されません。 何処が間違っているのかかなり色々やったのですが、まったくわからなくなってしまい、 困っております。 どうか智恵をお貸し下さい。宜しくお願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
- マウスオーバー時の画像とCSSについて
久しぶりにHTMLをいじってたんですが、すっかり忘れちゃって 色々見てみたんですが、解決しなかったので教えて下さい。 indexと同じディレクトリにdesignというフォルダを作り中にmouse_over.cssという カスケードスタイルシートを作りました。 "mouse_over.css"の内容は a:link.link1{ display:block; width:100px; height:25px; background-image:url(./home.png); text-indent:-10000px; list-style:none; } a:hover.link1{ display:block; width:100px; height:25px; background-image:url(./home_over.png); text-indent:-10000px; list-style:none; } です。それと、上同ディレクトリにpicというフォルダを作り、homeとhome_overという2種類の画像を入れてあります。indexには、head内に <link rel="stylesheet" type="text/css" href="design/mouse_over.css" />というリンクを張り、 body内に<a href="リンク先URL" class="link1"></a>としましたが、画像が出ません。 上記のCSSをindex内に<style>括りで書くと、画像も表示されちゃんとマウスオーバーで 画像が変わるのですが、CSSを別に置くとindexは真っ白のまま何も表示されません。 何処が間違っているのかかなり色々やったのですが、まったくわからなくなってしまい、 困っております。 どうか智恵をお貸し下さい。宜しくお願いします。
- 締切済み
- ブログ
- クエリ付きURLをクエリ無しURLにリダイレクト
お世話になります。 旧サイト・クエリ付きURLを新サイト・クエリ無しURLに301リダイレクトさせる方法が知りたいです。 旧サイト："http://www.example.jp/index.php?option=com_virtuemart&page=shop.browse&manufacturer_id=4&Itemid=62&limitstart=0&lang=ja" 新サイト："http://www.example.jp/brand/nike" 以下は、途中まで記述した設定です。 RewriteCond "%{QUERY_STRING}" "^option=com_virtuemart&page=shop.browse&manufacturer_id=4" [OR] RewriteCond "%{QUERY_STRING}" "^option=com_virtuemart&page=shop.browse&manufacturer_id=4&Itemid=62" [OR] RewriteCond "%{QUERY_STRING}" "^option=com_virtuemart&page=shop.browse&manufacturer_id=4&Itemid=62&limitstart=0" [OR] RewriteCond "%{QUERY_STRING}" "^option=com_virtuemart&page=shop.browse&manufacturer_id=4&Itemid=62&limitstart=0&lang=ja" [OR] RewriteCond "%{QUERY_STRING}" "^option=com_virtuemart&page=shop.browse&manufacturer_id=4&Itemid=62&limitstart=0&lang=en" [OR] RewriteRule パターン http://www.example.jp/brand/nike [R=301,L] orailly「Apache クックブック」を見ながら設定をしているのですが、RewriteRule で正規表現パターンを設定するところで躓いています。何を設定したらよいのか見当がつきません。 ご教授の程、よろしくお願いします。
- 締切済み
- その他（ITシステム運用・管理）
- マウスオーバーで、テキストデータを変える
ＨＰ作成で、マウスオーバーで表示が変わるものあります。 これをｆｌａｓｈをつかわず、ＣＳＳ+ＨＴＭＬで表示できる方法をご存知であれば、教えてください。
- ベストアンサー
- CSS
- VGAのスロットというものについて質問があります。
初投稿です。どうぞよろしくお願いします。 パソコンにはあまり詳しくないのですがワンズという会社 http://www.1-s.jp/cart/index.php でパソコンを自作一式見積りで購入しようと考えています。VGAを何にしようか迷っていて、 http://pdjp.zotac.com/index.php?page=shop.product_details&flypage=flypage_images.tpl&product_id=343&category_id=129&option=com_virtuemart&Itemid=1 （Aとします） 又は http://www.powercolor.com/jp/products_features.asp?id=364#Specification （Bとします） を候補にしています。 どちらのVGAもスロットを複数使用とあります（正確なスロット数もわからない初心者ですorz）。 比較的新しいグラボはPCI express x16 に接続するというのは分かるのですが、仮にスロットが３つ必要となった場合、全てx16に接続しなければならないのでしょうか？ それとも、PCI expessにx8,x4,x1などがあるのは知っていますが、それらに接続する場合があるのでしょうか？ ワンズではMBも自分で選ぶ必要があるので、正確なスロットの情報がないとどれにすればいいか決めることができません（PCI express x？ がいくつ必要なのか、など）。 スロットについては自分でもあれこれ調べたのですが未だに良く分からないです（汗。 AまたはBのグラボのスロットの情報が分かる方がいらっしゃいましたら、どちらか片方についてでもよいので教えていただけませんか？ 「BTOはダメなの？」と言われればそれまでなのですが、念願の初自分用パソコンなのでそこを何とかお願いします！
- ベストアンサー
- ハードウェア・サーバー
- Javascriptのマウスオーバー
Javascriptでのマウスオーバーで、Mapを使って画像上に範囲指定しているリンク範囲にボーダーを表示させたいと考えています。 HTMLは、 <html> <head> <title></title> </head> <body> <img src="aaa.gif" border="0" usemap="#Map"> <map name="Map"> <area shape="rect" coords="78,200,228,241" href="bbb.html"> <area shape="rect" coords="326,168,476,209" href="ccc.html"> <area shape="rect" coords="78,141,228,182" href="ddd.html"> </map> </body> </html> このようになっています。 この状態で、マウスオーバー時にリンク範囲をボーダーで囲みたいと思っています。 JavascriptやCSSとの組み合わせ等でいろいろ探してみたのですが、どうしても上手くいきませんでした。どうしたらいいのか教えて下さい。 また、JavascriptやCSSでなくとも同じ事が出来るのでしたら、それで構いません。 どうか宜しくお願い致します。
- 締切済み
- JavaScript
- 英辞郎のmac環境下での利用（マウスオーバー辞書）
当方mac初心者です。 windowsでは別のマウスオーバー辞書を使用していましたが、macに切り替えそれが使用できなくなりました。 代わりになるマウスオーバー辞書を探しております。 英辞郎が使えるとのことで、下記サイトから英辞郎を購入しました。 http://www.dlmarket.jp/product_info.php/page/1/products_id/151590 環境としては、 ・Mac OS X Lion 10.7 ・Firefox 5.01 です。 最低Ｆｉｒｅｆｏｘ上で、できればPDF等閲覧中にもマウスオーバー辞書として英辞郎を利用したいと考えております。 上記URLにも書いてありましたが、macでもなんとかなるだろうと思いながらも今にいたります。 解決策として、どのようなものがあるのでしょうか。 みなさまの御力添えをいただければと思っております。 どうぞよろしくお願いします。
- 締切済み
- Mac
- CSSでマウスオーバーを作成しています。
CSSでマウスオーバーを作成しています。 /**CSS内**/ #test { margin: 0; padding: 0; list-style-type: none; } #test li { text-indent: -9999px; width: 200px; height: 400px; margin: 0; padding: 0; background: url(aaa_ov.bmp) no-repeat -200px 0; ----- マウスオーバー時 } #test a { text-decoration: none; display: block; width: 200px; height: 400px; margin: 0; background: url(aaa.bmp) no-repeat 0 0; ----- 最初 } #test a:hover { text-decoration: none; background-color: transparent; background-image: none; } /**HTML内**/ <link rel="stylesheet" href="style.css" type="text/css" /> </HEAD> <BODY> <div align="center"> <ul id="test"> <li><a href="***.html">Home</a></li> </ul> </div> </BODY> としているのですが最初の画像も出ずうまくいきません。 画像パスも間違っていませんでした。 どのようにすればいいんでしょうか。 よろしくお願いします。
- ベストアンサー
- HTML
お礼
ちょっとしたトラブルがあり御礼が遅くなってしまい 大変申し訳ありませんでした。 丁寧にご教授いただき誠にありがとうございました☆