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で位置調整してください
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で質問しましょう!
似たような質問が見つかりました
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- Windows 8 Route Generator の使い方 1 2023/05/03 00:36
- X(旧Twitter) ツィッターの画像表示について 1 2023/08/17 09:28
- Excel(エクセル) エクセルにサムネイル画像組み込み 2 2022/09/02 17:13
- その他(ソフトウェア) 画像の拡大率を固定したまま次の画像を表示出来るビューアを探しています 2 2022/05/13 17:19
- 一眼レフカメラ カメラ選び 6 2022/09/02 12:54
- Windows 10 Windows11にちょっとイチャモン! 4 2022/10/06 17:06
- PowerPoint(パワーポイント) パワーポイント アニメーション効果で、テキストと同時に画像を表示させる方法を教えてください 2 2022/09/12 21:06
- プリンタ・スキャナー 印刷 キャンセル&印刷できない 2 2022/11/29 16:45
- デジタルカメラ 録画した4K動画を、フルピクセルで再生したい 5 2023/05/10 00:05
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リンクを知らせる手のマークが...
-
UDP通信を使うチャットプログラ...
-
HTMLのIMAGEに。。
-
html+CSSのみで作るスライドショー
-
画像のサイズが変わらない
-
XML画像データををHTMLで簡単に...
-
jqueryの画像切り替え
-
画像をクリックして同じページ...
-
ポップアップウィンドウのサイ...
-
画像をラジオボタンとして使用...
-
favicon.ico はもういらない?
-
inputタグでサーバにデータを送...
-
cssで画像を均等に配置する方法...
-
ulの画像をcssのfloatで横並び...
-
CSS側で、リンク画像を小するに...
-
画像をリンクさせると紫の枠が...
-
画像の横にテキスト
-
auの携帯サイトで画像と画像の...
-
ボタンをセル内一杯に表示させ...
-
CGI(更新記録)で写真の上にロゴ
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ボタンをセル内一杯に表示させ...
-
リンクを知らせる手のマークが...
-
htmlで画像を2個ずつ並べていき...
-
ポップアップウィンドウのサイ...
-
画像のサイズが変わらない
-
UDP通信を使うチャットプログラ...
-
XML画像データををHTMLで簡単に...
-
【HTML/CSS】ボタンの枠が伸び...
-
リンクを選択したときの青い枠...
-
favicon.ico はもういらない?
-
CSSの左横に隙間ができてしまい...
-
table で画像をピッタリとくっ...
-
HTMLのIMAGEに。。
-
画像とテーブルの隙間をなくす。
-
HTMLは、シングルクォートかダ...
-
ホームページで画像を横に並べ...
-
リンクをつけた画像をクリック...
-
サムネイルをマウスオーバーす...
-
縦長広告をウェブページの右側...
-
c言語を用いて画像の透明度をあ...
おすすめ情報