zoomについて質問です。

質問

zoomについて質問です。
http://www.ikko21.com/
このサイトの中段の画像に、マウスオーバーすると画像が大きく表示されます。
その「マウスオーバーで画像が大きく表示」をやってみたくて
ソースを見てみると、
<td width="153" height="120" align="right" valign="middle">
<p class="zoom2">
<a href="#">
<img src="w2img/ww0217031636H21yokoshin.JPG" alt="◇土地貸（事業用定期借地）◇" width="146" border="0">
</a>
</p>
</td>
となっていたので
<p class="zoom2"><img src="イメージ"></p>
とやると何も変化がなく、
<img src="イメージ" alt="サンプル" style="zoom: 200%;">
とやるともともとの画像が200%で表示されてしまいます。

色々試そうと思い、
<img alt="Sample"
onmouseover="this.src='イメージ '; style='zoom: 200% ';" onmouseout="this.src='/イメージ'" src="イメージ" />
や
<img alt="Sample" style='zoom: 200% '
onmouseover="this.src='イメージ ';" onmouseout="this.src='/イメージ'" src="イメージ" />
という風にやってみてもダメでした。
（HP制作の勉強を初めてまだ２週間ちょいのへっぽこなのでタグがおかしいかもしれません。勉強不足で申し訳ありません）

どうやればマウスオーバーすると画像が大きく表示されるのでしょうか。
よろしくお願いします。

回答No.3

yyr446 · ベストアンサー

ご提示のページだとCSSでやってますね。
base.cssに
/* ----- サムネイル表示 --1--- */
/* ----- マウスオーバーによる拡大表示--1---*/
p.zoom1 a:hover {
position: relative;
top: -100px;
left: -100px;
width: 0px;
height: 0px;
}
p.zoom1 a:hover img {
position: absolute;
top: 0px;
left: 0px;
width: 260px;
height: 196px;
z-index: 1;
}
があり、
HTML上は
<p class="zoom1">
<a href="01/ww0523153159H22.html">
<img width="90" border="0" alt="5/23UP 横浜市都筑区大熊町　貸倉庫" src="01/w2img/ww0523153159H22180sya.ookuma.JPG"></a>
</p>
となっています。

こおいう解析は、
IE8の開発者ツール（F12キー）
とか
Firefox ＋ FireBug
を使うと便利ですよ。（ご参考までに）

お礼

返事が遅くなってもうしわけありませんでした。
ありがとうございます＾＾
とても分かりやすかったです。

回答No.4

fujillin

ご提示のサイトで使われているCSSを見てください。
「base.css」というCSSファイルの後半のあたりに記述されていますが、zoom1、zoom2、zoom3という3種類のズームが設定されています。
ご質問の部分はそのうちの、zoom2ですが、どれもほとんど同じですね。

具体的な方法としては、画像（実際にはリンクタグ）にマウスを乗せたときに、別のスタイルを適用させるという方法で、擬似クラスの：hoverを用いています。
どのズームも同じ方法で比率や位置が違うだけのようですが、マウスオン時に『画像のサイズを変え、表示位置を少しずらす』ということをやっています。

しくみなどについては、「css 擬似クラス」あるいは「css ロールオーバー」あたりをキーにぐぐれば、沢山みつかるはずです。
（ロールオーバーだと、画像を入れ替えるものばかりヒットするかも）

お礼

すごく勉強になりました。
現在cssでhoverを用いて作成することになりました。
ご丁寧にありがとうございました。

回答No.2

outbrave

すみません参考URLは見れないようで

「マウスオーバーで画像を大きく」でGoogle検索してください。

お礼

ありがとうございます！
おかげさまで見つけれました。
なんとかできそうです＾＾

回答No.1

outbrave

検証していませんが、zoomは使わないと思います。

Googleなどで検索すると方法は見つかるでしょう。

参考URL：

http://www.google.co.jp/search?hl=ja&source=hp&q=%E3%83%9E%E3%82%A6%E3%82%B9%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC%E3%81%A

お礼

ありがとうございます。検索し直してみます。