掲示板/JavaScript質問板/過去ログ/一覧/ サムネイルを、マウスオーバーで大きく

0 名前： anna ： 2006/08/03（木） 22:10 ID:/GaajzPZ: ぜひアドバイスいただきたいことがあり、質問させていただきます。

小さいサムネイル写真をマウスオーバーした時に、そこに大きい写真を重ねて出すようにしたいと思っております。

そこで、作ってみたのが以下のような感じなのですが、

---------------------------
<style type="text/css">

</style>

<SCRIPT TYPE="text/javascript">

</SCRIPT>

<body>

<table border=1 cellpadding=5 cellspacing=0>

<tr>
<td>
<div id="s01">
<a href="#" onmouseover="showLAYER('l01');return false" onmouseout="hideLAYER('l01');return false"><img src="dummy.gif" width="50" height="50" border="0"></a>
<div id="l01"><img src="dummy.gif" width="120" height="120" border="0"></div>
</div>
</td>
</tr>

<tr>
<td>
<div id="s02">
<a href="#" onmouseover="showLAYER('l02');return false" onmouseout="hideLAYER('l02');return false"><img src="dummy.gif" width="50" height="50" border="0"></a>
<div id="l02"><img src="dummy.gif" width="120" height="120" border="0"></div>
</div>
</td>
</tr>

</table>

</body>
---------------------------

テーブルに入れる前提で、このままどんどん下にセルを追加していくと、その分idが増えていくと思うのですが、ほかにスマートな方法はありますでしょうか？
自分ではこのくらいしか思いつかず、、。どうぞご教授をよろしくお願いいたします。

1 名前： m035 ◆Wpzr1YKOiq ： 2006/08/03（木） 22:10 ［URL］ ID:4KIacXXc: 拡大表示はひとつのimgを使いまわせばよろしいかと。
拡大表示は同時に2つ起こりませんから、onmouseoverで拡大表示用のimg（デフォルトで非表示）のpositionとsrcを切り替え、表示状態に、onmouseoutで非表示にすればいいでしょう。
もしくは以下のように直接拡大してみると言う手もあります。

<script type="text/javascript">

</script>
<img src="dummy.gif" width="50" height="50" border="0" onmouseover="zoom_img(this,120)" onmouseout="zoom_img(this,50)">

2 名前： かふぇおれ ： 2006/08/03（木） 22:10 ID:Ji0blfRq

＞テーブルに入れる前提で、

ではレイヤーではなく、テーブルでやってみたらいかがでしょう？

<html>
<head>
<title>サムネイル表示テスト</title>
<script type="text/javascript">
function onImg(img){
myImg.src = img
zoomT.style.display = "block"
baseT.style.display = "none"
}
function offImg(){
zoomT.style.display = "none"
baseT.style.display = "block"
}
</script>
</head>
<body>
<table border="3" id="zoomT" width="200" onmouseout="offImg()" style="display:none;" align="center">
<tr>
<td><img id="myImg" width="100%"></td>
</tr>
</table>
<table border="0" id="baseT" style="display:block;" align="center">
<tr>
<td><img src="dummy.gif" width="50" height="50" onmouseover="onImg(this.src)"></td>
<td><img src="dummy2.gif" width="50" height="50" onmouseover="onImg(this.src)"></td>
<td><img src="dummy3.gif" width="50" height="50" onmouseover="onImg(this.src)"></td>
<td><img src="dummy4.gif" width="50" height="50" onmouseover="onImg(this.src)"></td>
<td><img src="dummy5.gif" width="50" height="50" onmouseover="onImg(this.src)"></td>
</tr>
</table>
</body>
</html>

3 名前： Pid ： 2006/08/03（木） 22:10 ID:qyBiqpAB: これ，CSS だけで可能だったと思います。サンプルも配布されていたはずですので，探してみて下さい。

CSS だけでも相当なことが（スライドショーすら）可能です。わざわざ JavaScript を使わねばならない場面は，実はそんなに多くないのです。

4 名前： かふぇおれ ： 2006/08/03（木） 22:10 ID:Ji0blfRq

>>3　
言われて試してみたら… CSS で出来ますね。

<style type="text/css">
<!--
.off {  width: 50px; height: 50px}
.on {  width: 120px; height: 120px}
-->
</style>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="dummy.gif" class="off" onMouseover="this.className='on';" onMouseout="this.className='off';"></td>
  </tr>
</table>

>>0　anna さん、横レスで申し訳ない。

5 名前： m035 ◆Wpzr1YKOiq ： 2006/08/03（木） 22:10 ［URL］ ID:4KIacXXc: >>4
多分、hoverを使うとCSSだけで出来る、という話かと思います。
http://moneytreesystems.com/css/picpopup.html

6 名前： かふぇおれ ： 2006/08/03（木） 22:10 ID:Ji0blfRq: >>5　m035 さん、ありがとうございます！

…英語…（大汗）…頑張って読みます。

7 名前： Pid ： 2006/08/03（木） 22:10 ID:7ZLUWR5F: 日本語記事だとこの辺とか。
http://www.lucky-bag.com/archives/2005/06/css_popup.html

JavaScript だとこまやかな制御ができますが，非スクリプト環境を考えると難しい。

8 名前： anna ： 2006/08/03（木） 22:10 ID:/GaajzPZ: m035様、かふぇおれ様、Pid様
ありがとうございます！！

なんと、画像ひとつ、CSSのみでできるとは。
考えてみればまさにそのとおりですね。
位置もcssで設定しますし、あとは出すだけと考えれば、、、
どうせ<a>使うわけですし。もうものすごく目からｳﾛｺ。
実際やってみましたが、うまくいきましたっ。

cssはレイアウトばかりに目が行ってしまってましたが、
非常に勉強になりました！感謝です。

9 名前：匿名： 2006/08/03（木） 22:10 ID:zqn32COP: > cssはレイアウトばかりに目が行ってしまってましたが、
cssにレイアウト以外の使い道があります？

今回のサムネで云々も（cssの方法は）「レイアウト」の範疇です。