画像集を作ってるのですが、
テーブルの中に小さな画像の一覧があり、
クリックするとその大きな画像が表示され、
なおかつページの真ん中に表示されるものを作成中です。
自分が思うに、width=100% height=100%
のテーブルの中に画像リストのテーブルを入れ
テーブル名を table とするなら、
そこにある小さな画像を onclick すると
document.table.location.href = picture;
または
document.table.src = picture;
のようなイメージでテーブルと大画像を置き換えれば
できると思うのですが、うまくいきません。
なにかアドバイスありますでしょうか?
もちろん 写真ごとにセンター寄せの web page を作り
普通にリンクという方法もありますが、写真が増えると
あまり効率が良いとは言えず。。。
No.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>
Ajax のような とてもかっこ良いページに仕上がりました。
何度も改造して自作できるよう頑張ってみます。
ありがとうございました!!
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;
}
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"
で試してみてください。
.
今回の場合はテーブル内に50ほど小画像がありましたので
その中の一枚と置き換えた場合は
レイアウトがうまくいきませんでした。
あらかじめ一枚の大画像がある場合に便利ですね。
回答ありがとうございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
プルダウンメニューを表の中に...
-
Yahoo! UI LibraryのDataTable...
-
テキストエリアに入力した改行...
-
javascriptで表に画像を貼る
-
テーブル中に設けた背景画像を...
-
画面表示とともに、テーブルの...
-
return trueとreturn falseの用...
-
onchangeイベントを強制的に発...
-
追加ボタンを押した際に ok ボ...
-
プルダウン 項目が多いので先頭...
-
dijit.form.ComboBoxについて
-
slickのレスポンシブ > center...
-
javascript による POST 送信時...
-
フォーム内で記入したクエリ送...
-
selectを変更不可にしたい
-
VBSでブラウザ上のテキストボッ...
-
セレクトボックスの値から料金...
-
netscapeでもinnerTextやinnner...
-
イベント発生順序
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
テーブルの行数を可変長にした...
-
selectのonChangeが動作しません
-
画面表示とともに、テーブルの...
-
javascriptで<table>背景色の取得
-
javascriptでクリックするごと...
-
テキストエリアに入力した改行...
-
【jQuery】tableループ内のIDの...
-
<iframe>内にHTMLをランダム表...
-
javascriptで画像をテーブルに...
-
WEB制作に関する質問です。コン...
-
javascript でテーブル操作
-
カレンダーに印を付けたい
-
日にち指定によるテーブル/行の...
-
テーブルのtdの中に、重複避け...
-
innerHTMLでのテーブル作成
-
プルダウンメニューを表の中に...
-
簡単なJavaスロットマシーンに...
-
javascriptで表に画像を貼る
-
javascriptで画像の移動
おすすめ情報