下記サイトのように商品画像にマウスオーバーすると商品がアップになるようにしたいです。
http://www.k-swiss.jp/index.php?page=shop.produc …
htmlとcssの基本的なのはわかります。
ご教授よろしくお願い致します。
No.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
ちょっとしたトラブルがあり御礼が遅くなってしまい
大変申し訳ありませんでした。
丁寧にご教授いただき誠にありがとうございました☆
No.2
- 回答日時:
そのサイトで使っているのは
「Magic Zoom Plus」というjavascriptのライブラリーツールだと思います。
配布元は↓
http://www.magictoolbox.com/magiczoomplus/exampl …
ですね。
おっと、これ有料ですね。1サイトライセンス:39ポンド
(円高だからお買いどくかも)
もしかして、無料のトライアル版でも十分使えるかも、即ダウンロード!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- モニター・ディスプレイ PCどれを購入すれば良いのか解らない。 13 2023/03/13 13:58
- PHP PHPで画像の渡しが上手く行きません。 1 2023/02/02 09:39
- Excel(エクセル) ある文字を含む際に、値を返す数式についてです 5 2022/08/28 16:58
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- Wi-Fi・無線LAN パソコンインターネット接続方法について 7 2022/10/29 17:59
- その他(データベース) accessでの請求管理について 2 2022/06/13 21:51
- PostgreSQL 画像とカテゴリーを出力したいのですが、取得の条件を付ける方法がわかりません。 2 2022/05/01 18:03
- ヤフオク! たちが悪い出品者に画像とテキストをそのまま使われて困っています。 1 2022/06/07 23:54
- Excel(エクセル) エクセルで複数設定したハイパーリンク先を、どれを選んでも画面の左上に来るようにしたいのですが・・・ 3 2022/04/07 16:15
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
一つのリンクに複数のURLを指定
-
HTMLで条件によって表示・非表示
-
ウィンドウが開いてる、閉じて...
-
画像をぴったりウィンドウ内に...
-
リンク先のURLが毎日変わる場合...
-
春夏秋冬の季節によって、画像...
-
ホームページでファイルをダウ...
-
<!DOCTYPE html>あってますか?...
-
<!DOCTYPE html>あってますか?...
-
Excelで、社外秘(閲覧のみ)と...
-
HTMLからフォルダを開きたい
-
form action="#"
-
iPadの標準ブラウザでローカルH...
-
htmlファイルの表示が真っ白
-
Webサイトから、txtファイルを...
-
java_run.batがダウンロードで...
-
<!DOCTYPE html>あってますか?↑
-
インラインフレームの中に表示...
-
lang 英語と日本語など混ざる時は
-
css ,videotタグ。ホームページ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
一つのリンクに複数のURLを指定
-
ブラウザの右上にあるボタンを...
-
ページ切り替え時に音を鳴らし...
-
window.confirmのタイトル
-
行番号を指定したリンク
-
リンク先を2つ表示させる
-
htmlから<a>でpdf表示時にpdf資...
-
タイトルバーを非表示にできま...
-
リンク先のURLが毎日変わる場合...
-
リンク先のテキストボックスへ...
-
春夏秋冬の季節によって、画像...
-
objectタグで埋め込んだHTMLの...
-
一つのリンクで、複数のウィン...
-
現在開いているWEBページを...
-
タグについての質問
-
ボタンを押した回数を表示するには
-
全画面表示にしたい
-
テキストアンカーリンクで複数U...
-
ウィンドウサイズ固定
-
jQueryプラグイン、サーバー上...
おすすめ情報