【最大10000ポイント】当たる!!質問投稿キャンペーン!

下記サイトのように商品画像にマウスオーバーすると商品がアップになるようにしたいです。

http://www.k-swiss.jp/index.php?page=shop.produc …

htmlとcssの基本的なのはわかります。

ご教授よろしくお願い致します。

このQ&Aに関連する最新のQ&A

A 回答 (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
    • good
    • 0
この回答へのお礼

ちょっとしたトラブルがあり御礼が遅くなってしまい
大変申し訳ありませんでした。

丁寧にご教授いただき誠にありがとうございました☆

お礼日時:2011/01/13 12:35

そのサイトで使っているのは


「Magic Zoom Plus」というjavascriptのライブラリーツールだと思います。
配布元は↓
http://www.magictoolbox.com/magiczoomplus/exampl …
ですね。
おっと、これ有料ですね。1サイトライセンス:39ポンド
(円高だからお買いどくかも)
もしかして、無料のトライアル版でも十分使えるかも、即ダウンロード!
    • good
    • 0

画像のズームアップ「jqzoom」-jquery plugin –


http://39kn.com/2009/04/30/1990/
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

Qマウスオーバーで画写真が拡大

http://wdt.pekori.jp/template/box/
で、個々の画像をクリックすると拡大されます(実際には虫眼鏡)
が、このような方法を用いてホームページで写真を拡大したり
縮小させたりしたいのです。

ホームページの作成はホームページビルダーV8で行なっていますが
編集スタイルは「簡単」「どこでも配置モード」で作成している
レベルですのでHTMLタグはあまり得意ではありません。

今のレベルぐらいでも行なうことはできるでしょうか。
よろしくお願いいたします。

Aベストアンサー

Highslide JS というjavascriptを利用しています
Highslide JS でサムネイル画像を拡大表示する
http://www.koikikukan.com/archives/2007/01/18-005102.php
サムネイルをCOOLにポップアップ表示
http://caramel-tea.com/sample_page/highslide.html

Q画像をクリックして同じページに拡大画像を出す

小さい画像をクリックすると同じページに拡大画像が表示されるようにしたいのです。小さい画像が7つ程横に並んでいて、クリックするとその下に拡大画像が表示されるページです。フレームは使わないで出来ますか?フレームを使うとテーブルの背景が切れてしまうので使わないで作りたいのですがわかりません。教えてもらえたら嬉しいです。

Aベストアンサー

 拡大画像 1.gif - 7.gif があるとして、このようなのはいかがですか↓

<html>
<head>
<script type="text/javascript">
<!--
function change(n) {
document.LgIMG.src = n +".gif"; // 大画像 1.gif - 7.gif を用意
}
// -->
</script>
</head>
<body background="http://oshiete1.goo.ne.jp/images_goo/goo_h1_50b.gif">
<table align="center">
<tr>
<td><a href="javaScript:change(1)"><img src="1.gif" border="0" width="40" height="40"></td>
<td><a href="javaScript:change(2)"><img src="2.gif" border="0" width="40" height="40"></td>
<td><a href="javaScript:change(3)"><img src="3.gif" border="0" width="40" height="40"></td>
<td><a href="javaScript:change(4)"><img src="4.gif" border="0" width="40" height="40"></td>
<td><a href="javaScript:change(5)"><img src="5.gif" border="0" width="40" height="40"></td>
<td><a href="javaScript:change(6)"><img src="6.gif" border="0" width="40" height="40"></td>
<td><a href="javaScript:change(7)"><img src="7.gif" border="0" width="40" height="40"></td>
<!-- ここの画像 1.gif - 7.gif は、別画像でも可 -->
</tr>
<tr>
<td colspan=7>
<img src="1.gif" name="LgIMG" border="0" width="400" height="400"><!-- 最初の大画像 -->
</td>
</tr>
</body>
</html>

 拡大画像 1.gif - 7.gif があるとして、このようなのはいかがですか↓

<html>
<head>
<script type="text/javascript">
<!--
function change(n) {
document.LgIMG.src = n +".gif"; // 大画像 1.gif - 7.gif を用意
}
// -->
</script>
</head>
<body background="http://oshiete1.goo.ne.jp/images_goo/goo_h1_50b.gif">
<table align="center">
<tr>
<td><a href="javaScript:change(1)"><img src="1.gif" border="0" width="40" height="40"></...続きを読む


人気Q&Aランキング