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制作の勉強を初めてまだ2週間ちょいのへっぽこなのでタグがおかしいかもしれません。勉強不足で申し訳ありません)

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

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

A 回答 (4件)

ご提示のページだと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
を使うと便利ですよ。(ご参考までに)
    • good
    • 0
この回答へのお礼

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

お礼日時:2010/06/11 15:05

ご提示のサイトで使われているCSSを見てください。


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

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

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

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

お礼日時:2010/11/23 19:24

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



「マウスオーバーで画像を大きく」でGoogle検索してください。
    • good
    • 0
この回答へのお礼

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

お礼日時:2010/05/26 16:28

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



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

参考URL:http://www.google.co.jp/search?hl=ja&source=hp&q …
    • good
    • 0
この回答へのお礼

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

お礼日時:2010/11/23 19:23

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


人気Q&Aランキング

おすすめ情報