![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
No.2ベストアンサー
- 回答日時:
拡大画像 1.gif - 7.gif があるとして、このようなのはいかがですか↓
<html>
<head>
<script type="text/javascript">
<!--
function change(n) {
document.LgIMG.src = n +".gif"; // 大画像 1.gif - 7.gif を用意
}
// -->
</script>
</head>
<body background="http://oshiete1.goo.ne.jp/images_goo/goo_h1_50b. …
<table align="center">
<tr>
<td><a href="javaScript:change(1)"><img src="1.gif" border="0" width="40" height="40"></td>
<td><a href="javaScript:change(2)"><img src="2.gif" border="0" width="40" height="40"></td>
<td><a href="javaScript:change(3)"><img src="3.gif" border="0" width="40" height="40"></td>
<td><a href="javaScript:change(4)"><img src="4.gif" border="0" width="40" height="40"></td>
<td><a href="javaScript:change(5)"><img src="5.gif" border="0" width="40" height="40"></td>
<td><a href="javaScript:change(6)"><img src="6.gif" border="0" width="40" height="40"></td>
<td><a href="javaScript:change(7)"><img src="7.gif" border="0" width="40" height="40"></td>
<!-- ここの画像 1.gif - 7.gif は、別画像でも可 -->
</tr>
<tr>
<td colspan=7>
<img src="1.gif" name="LgIMG" border="0" width="400" height="400"><!-- 最初の大画像 -->
</td>
</tr>
</body>
</html>
この回答への補足
ありがとうございます。やってみたら出来ました。私の説明が悪くてまた教えていただきたいのですが、小さい画面と大きい画面はトリミングでプロポーションが変わっているので別画像扱いにしたいです。
大きい画面が上にあって、その下に1列に小さい画面が並んでいるレイアウトなのですが、どう変えればよいのでしょうか?何度も申し訳ありません。よろしくお願いします。
No.3
- 回答日時:
こんにちは
こんな感じですか?
<script language="javascript"><!--
function imgch(url) {
document.getElementById("preview").style.display = "block"
document.getElementById("preview").innerHTML = "<img src='"+url+"' width='100%' height='100%'>";
}
//--></script>
<style type="text/css">
#preview {
width:300px;
height:300px;
display:none;
}
</style>
<img src="sample0.gif" onClick="imgch(this.src)">
<img src="sample1.gif" onClick="imgch(this.src)">
<img src="sample2.gif" onClick="imgch(this.src)">
・・・sample7まで
<div id="preview" onClick="this.style.display='none'"></div>
このままだと表示・非表示のたびにこれ以下のコンテンツが上がったり下がったりするのでそれがお嫌でしたら
preview{ }内に
position:absolute;
top:***px;
left:***px;
background-color:***;
を追加してtop,leftで位置調整してください
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_07.png?e8efa67)
No.1
- 回答日時:
>>フレームを使わないで出来ますか?
フレームは必要ありません。JavaScriptで実現可能です。また、表示
する場所を設定するためにCSSを使用します。
・body間に<div>タグを追加します。
<div id="preview"></div>
・CSSをヘッダ間に追加します。
<style type="text/css"><!--
#preview {
width:200px;
height:200px;
position:absolute;
top:*px;
left:*px;
}
--></style>
・<img>タグにonClick属性を追加します。
<img src=* width=* height=* onClick="Preview(1)">
<img src=* width=* height=* onClick="Preview(2)">
<img src=* width=* height=* onClick="Preview(3)">
・JavaScriptをhead間に追加します。
<script type="text/javascript"><!--
function Preview(no) {
var p_id = document.getElementById("preview");
switch(no){
case 1:
p_id.innerHTML = "<img src='*'>";
break;
case 2:
p_id.innerHTML = "<img src='*'>";
break;
case 3:
p_id.innerHTML = "<img src='*'>";
break;
default:
p_id.innerHTML = "<p>値が不正です。</p>";
break;
}
--></script>
tamanokosiさんがJavaScriptやCSSについてどれほどの知識があるのか
わからないので、解説は省きますが、わからないようでしたら、
補足なりお礼でその旨をお伝え下さい。
*参考URLにて、サンプルを表示しています。
参考URL:http://sakuratan.ddo.jp/uploader/source/date4955 …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ホームページで画像に効果をつ...
-
cssで、チェックボックスの画像...
-
上と横をぴったり合わせる
-
画像をクリックしてラジオボタ...
-
画像を隙間なく配置する方法
-
リンクを知らせる手のマークが...
-
スタイルシート【複数の画像の...
-
アップロードするとレイアウト...
-
機種依存文字、m2(平方メート...
-
リンク画像のマウスオーバー時...
-
cssで一部の文字や画像を中央に...
-
cssの使い方について
-
imgタグは何で囲むのが良いか
-
html+CSSのみで作るスライドショー
-
inputタグでサーバにデータを送...
-
htmlの文字が縦書きになる
-
htmlのolやulなどlistにtitleや...
-
css初心者 フレックスボックス...
-
HTML属性での「""」 「''」違い
-
HTMLでTextareaを横に2つ並べ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リンクを知らせる手のマークが...
-
ボタンをセル内一杯に表示させ...
-
inputタグでサーバにデータを送...
-
htmlで画像を2個ずつ並べていき...
-
HTMLのIMAGEに。。
-
機種依存文字、m2(平方メート...
-
favicon.ico はもういらない?
-
cssで、チェックボックスの画像...
-
UDP通信を使うチャットプログラ...
-
table で画像をピッタリとくっ...
-
水面の波紋
-
画像のサイズが変わらない
-
画像の場合のみ、下線を消す方...
-
ポップアップウィンドウのサイ...
-
ホームページで画像を横に並べ...
-
【HTML/CSS】ボタンの枠が伸び...
-
imgタグは何で囲むのが良いか
-
画像をクリックして元に戻すには
-
リンク画像のラインを消したい
-
画像をクリックして同じページ...
おすすめ情報