- ベストアンサー
画像集、小画像をクリックすると大画像を中央表示するには？
画像集を作ってるのですが、 テーブルの中に小さな画像の一覧があり、 クリックするとその大きな画像が表示され、 なおかつページの真ん中に表示されるものを作成中です。 自分が思うに、width=100% height=100% のテーブルの中に画像リストのテーブルを入れ テーブル名を table とするなら、 そこにある小さな画像を onclick すると document.table.location.href = picture; または document.table.src = picture; のようなイメージでテーブルと大画像を置き換えれば できると思うのですが、うまくいきません。 なにかアドバイスありますでしょうか？ もちろん 写真ごとにセンター寄せの web page を作り 普通にリンクという方法もありますが、写真が増えると あまり効率が良いとは言えず。。。
- yasu182
- お礼率53% (149/277)
- JavaScript
- 回答数3
- ありがとう数6
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
<script> //拡大画像を表示する function pwinOpen(imgSrc){ var lgPhoto=document.getElementById('lPhoto'); lgPhoto.src = imgSrc; var pWin=document.getElementById('pWindow'); pWin.style.visibility = 'visible'; } //拡大画像を閉じる function cls(){ var pWin=document.getElementById('pWindow'); pWin.style.visibility = 'hidden'; var lgPhoto=document.getElementById('lPhoto'); } <body > <!-------------ここから-----------------> <div id="pWindow" style="position:absolute; visibility:hidden; width:100%; height:100%;"> <table style="width:100%; height:100%;" border="1" cellspacing="0" cellpadding="0"> <tr> <td align="center" valign="middle"> <table style=" background-color:#FFF; border:1px solid #000;" border="1" cellspacing="15" cellpadding="0"> <tr> <td align="center" valign="middle"><a href="#"><img src="" OnClick="cls()" id="lPhoto"></a></td> </tr> </table> </td> </tr> </table> </div> <!-------------ここまで-----------------> <table style="width:100%; height:100%;" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center" valign="middle"> <table border="1" cellspacing="0" cellpadding="0" style="background-color:#F3F5FD; border:1px solid #666;"> <tr> <td><a href="#" onFocus="this.blur()"><img src="" OnMouseOver="pwinOpen('01.jpg')" width="100" height="50" border="0"></a></td> <td><a href="#" onFocus="this.blur()"><img src="" OnClick="pwinOpen('21.jpg')" width="100" height="50" border="0"></a></td> <td><a href="#" onFocus="this.blur()"><img src="" OnClick="pwinOpen('02.jpg')" width="100" height="50" border="0"></a></td> </tr> <tr> <td><a href="#" onFocus="this.blur()"><img src="" OnClick="pwinOpen('')" width="100" height="50" border="0"></a></td> <td><a href="#" onFocus="this.blur()"><img src="" OnClick="pwinOpen('')" width="100" height="50" border="0"></a></td> <td><a href="#" onFocus="this.blur()"><img src="" OnClick="pwinOpen('')" width="100" height="50" border="0"></a></td> </tr> <tr> <td><a href="#" onFocus="this.blur()"><img src="" OnClick="pwinOpen('')" width="100" height="50" border="0"></a></td> <td><a href="#" onFocus="this.blur()"><img src="" OnClick="pwinOpen('')" width="100" height="50" border="0"></a></td> <td><a href="#" onFocus="this.blur()"><img src="" OnClick="pwinOpen('')" width="100" height="50" border="0"></a></td> </tr> </table> </td> </tr> </table>
その他の回答 (2)
次は、18枚の小画像をHeadでセットし、それにマウスを合わせるとメインを更新する仕組みの全容です。 ＜画像を変数にセットするコード＞ <head> ・・・・・ <script type="text/javascript" src="../script/mylibrary.js"></script> <script> var i; var a_images = new Array(18); for (i=0; i<18; i++) { a_images[i] = new Image(323,267); } a_images[0].src ="new/holiday_01.gif"; a_images[1].src = "new/holiday_02.gif"; ・・・・・ a_images[17].src = "new/holiday_18.gif"; </script> </head> ＜小さい画像の配置とマウスでメインを更新するコード＞ <td width="110"><img src="new/holiday_01_sum.gif" width="109" height="83" onMouseOver ="update_src(document.main.holiday_photo, a_images[0]);"></td> ＊onMouseOver は onClick に ＜表示場所＞ <td rowspan="6" width="506" valign="top"> <p align="center"> <img id="holiday_photo" name="holiday_photo" src="new/holiday_01.gif" width="323" height="267" vspace="10"></td> ＜mylibrary.js＞ function update_src(objects, img) { objects.src = img.src; }
お礼
とても勉強になりました。 ありがとうございます！
- arenani_sorenani
- ベストアンサー率73% (58/79)
テーブルに対してではなく、テーブルの中に配置する画像に対して srcを指定します。 <img id="img1" name="IMG1" src="****.jpg" style="width:100px;height:100px;" /> 上記のようにidまたはnamaを指定して document.getElementById("img1").src="****.jpg" または document.imeges["IMG1"].src="****.jpg" で試してみてください。 .
お礼
今回の場合はテーブル内に50ほど小画像がありましたので その中の一枚と置き換えた場合は レイアウトがうまくいきませんでした。 あらかじめ一枚の大画像がある場合に便利ですね。 回答ありがとうございました！
お礼
Ajax のような とてもかっこ良いページに仕上がりました。 何度も改造して自作できるよう頑張ってみます。 ありがとうございました！！