アプリ版：「スタンプのみでお礼する」機能のリリースについて

画像集、小画像をクリックすると大画像を中央表示するには？

解決済

  • 質問者：yasu182
  • 質問日時：
  • 回答数：3件

画像集を作ってるのですが、
テーブルの中に小さな画像の一覧があり、
クリックするとその大きな画像が表示され、
なおかつページの真ん中に表示されるものを作成中です。

自分が思うに、width=100% height=100%
のテーブルの中に画像リストのテーブルを入れ
テーブル名を table とするなら、
そこにある小さな画像を onclick すると

document.table.location.href = picture;

または

document.table.src = picture;

のようなイメージでテーブルと大画像を置き換えれば
できると思うのですが、うまくいきません。
なにかアドバイスありますでしょうか？

もちろん 写真ごとにセンター寄せの web page を作り
普通にリンクという方法もありますが、写真が増えると
あまり効率が良いとは言えず。。。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： N_A_O
  • 回答日時：

<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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

Ajax のような とてもかっこ良いページに仕上がりました。
何度も改造して自作できるよう頑張ってみます。
ありがとうございました！！

通報する
お礼日時：2006/07/31 06:25

No.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;
}
    • good
    • 0
    • 件
通報する
この回答へのお礼

とても勉強になりました。 ありがとうございます！

通報する
お礼日時：2006/07/31 06:24

No.1

テーブルに対してではなく、テーブルの中に配置する画像に対して


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"

で試してみてください。

.
    • good
    • 0
    • 件
通報する
この回答へのお礼

今回の場合はテーブル内に50ほど小画像がありましたので
その中の一枚と置き換えた場合は
レイアウトがうまくいきませんでした。
あらかじめ一枚の大画像がある場合に便利ですね。
回答ありがとうございました！

通報する
お礼日時：2006/07/31 06:23

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

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報