人に聞けない痔の悩み、これでスッキリ >>

初心者です。よろしくお願いします。

いくつか並んだ小さなサムネイル画像をクリックすることで、少し離れた大きめ画像をそれぞれのサムネイル画像の拡大に変えたいです。

下記のページの答えを参考にしてやってみました。http://oshiete1.goo.ne.jp/qa1192554.html

その時は上手にできました。

ただ、それが同一ページの中に画像違いで、下にあと2つ必要なのです。
原理は同じかと思い、上手にできたものをコピーペーストしてあとの2つを作りました。
しかし、あとで作った2つの画像群の中、サムネイルをクリックすると画像が切り替わって欲しい所ではなく、別のセクションのほうの画像が切り替わってしまいます。
どうすれば思った場所の画像を切り替えられますでしょうか?
もしくは、同一ページ内で3枚という複数にターゲット画像を分けることはムリなんでしょうか?

文章が解りづらくて申し訳ございません。

このQ&Aに関連する最新のQ&A

A 回答 (1件)

<html>


<head>
<title></title>
<script type="text/javascript">
<!--
function change(imgname, fname){
document.images[imgname].src=fname;
}
//-->
</script>
</head>
<body>
<img name="IMAGE1" src="A1.jpg"><br>
<img src="sam1.jpg" onmouseover="change('IMAGE1', 'big1.jpg')" onmouseout="change('IMAGE1', 'A1.jpg')" >
<img src="sam2.jpg" onmouseover="change('IMAGE1', 'big2.jpg')" onmouseout="change('IMAGE1', 'A1.jpg')" >
<img src="sam3.jpg" onmouseover="change('IMAGE1', 'big3.jpg')" onmouseout="change('IMAGE1', 'A1.jpg')" >
<hr>
<img name="IMAGE2" src="A2.jpg"><br>
<img src="sam1.jpg" onmouseover="change('IMAGE1', 'big1.jpg')" onmouseout="change('IMAGE2', 'A2.jpg')" >
<img src="sam2.jpg" onmouseover="change('IMAGE1', 'big2.jpg')" onmouseout="change('IMAGE2', 'A2.jpg')" >
<img src="sam3.jpg" onmouseover="change('IMAGE1', 'big3.jpg')" onmouseout="change('IMAGE2', 'A2.jpg')" >
<hr>
<img name="IMAGE3" src="A3.jpg"><br>
<img src="sam1.jpg" onmouseover="change('IMAGE1', 'big1.jpg')" onmouseout="change('IMAGE3', 'A3.jpg')" >
<img src="sam2.jpg" onmouseover="change('IMAGE1', 'big2.jpg')" onmouseout="change('IMAGE3', 'A3.jpg')" >
<img src="sam3.jpg" onmouseover="change('IMAGE1', 'big3.jpg')" onmouseout="change('IMAGE3', 'A3.jpg')" >
<hr>
</body>
</html>


まず、そのURLのサンプルは、変更する指定場所がCHANGEの一箇所である為、
function change(fname)
という関数から、場所も指定できるように
function change(imgname, fname)
というimgnameが設定できるように変更します。

それで、IMAGE1~IMAGE3の場所の画像を変更できるようになります。
場所が指定でき照るので、何箇所にも対応できます。

また、マウスが離れた時に戻る画像も参考URLでは、同じ場所で同じ画像を指定してたので、これも場所と、元に戻る画像を指定できるようにします。
ただそれだと上で作ったchangeと同じなのでrestore()はなくしちゃって、changeを使えばいいことがわかります。

それで、
<img src="sam1.jpg" onmouseover="change('IMAGE1', 'big1.jpg')" onmouseout="change('IMAGE1', 'A1.jpg')" >
上記のサムネイル画像の上にマウスが乗ったら、
change('IMAGE1', 'big1.jpg')を実行しろ
マウスが離れたらchange('IMAGE1', 'A1.jpg')を実行しろとなり
離れたイメージの画像が置き換わります。

おっと、質問者様の指定ではマウスが乗ったら出はなくてクリックでしたね。
その場合、onmouseoverではなく、onclick="change('IMAGE1', 'big1.jpg')"
とすることで、実行できます。

ついでなので、change関数の中身の説明をしますと

document.images[imgname].src=fname;

となっています。
これは、ドキュメント(ホームページ全体ですね)のイメージの[imgname]変数の中に入ってる名前の画像をfname変数の中に入っているURLに変えなさい。という命令です。
    • good
    • 2
この回答へのお礼

教えていただいたようにやってみたら思った通りにできました!本当にありがとうございました!

お礼日時:2007/12/13 21:31

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qサムネイルの画像を同ページ内のある固定された同じ場所に拡大画像を出す方法について

私自身ホームページに関する専門用語をほとんど知らないため
正確に私の意志をお伝えすることが出来ないかもしれませんが、どうか、お力添えのほどよろしくお願いします。

下記のURL
http://www.alan1.net/jp/hawaii/oahu/sg/106/ag/5641/
にあるように、サムネイルのいずれの画像(小さい)をクリックしても、同ページ内のある固定された同じ場所に拡大した画像(大きい)を出す方法を教えていただけないでしょうか?

申し訳ございませんがよろしくお願いいたします。

Aベストアンサー

こんにちは

#画像を変換する処理です#
<script language="JavaScript">
<!--
function Image(img) {  document.getElementById("image").src = img; }
//-->
</script>

#提示サイトの小さい画像にあたる部分です#
<img src="sample1.gif" onClick="Image('sample1.gif')">
<img src="sample2.gif" onClick="Image('sample2.gif')">
<img src="sample3.gif" onClick="Image('sample3.gif')">
<img src="sample4.gif" onClick="Image('sample4.gif')">

#提示サイトの大きい画像にあたる部分です#
<img src="sample0.gif" name="image" width="100px" height="100px" border="1">


#~~#の部分は説明なので削除してコピペしてくださいね(^^)
あとそちらで変更してもらうのは画像の名前です
sample○.gifの部分を画像のファイル名に変えてください
画像をフォルダ内に入れているのであれば (フォルダ名)/(画像名) のようにしてください

こんにちは

#画像を変換する処理です#
<script language="JavaScript">
<!--
function Image(img) {  document.getElementById("image").src = img; }
//-->
</script>

#提示サイトの小さい画像にあたる部分です#
<img src="sample1.gif" onClick="Image('sample1.gif')">
<img src="sample2.gif" onClick="Image('sample2.gif')">
<img src="sample3.gif" onClick="Image('sample3.gif')">
<img src="sample4.gif" onClick="Image('sample4.gif')">

#提示サイトの大きい画像にあたる部分...続きを読む

Q画像をサムネイル表示しクリックで拡大

ホームページで、画像をサムネイル表示し、クリックで画像を大きく表示したいです。htmlは多少わかりますが、あと何が必要でしょうか。
参考になる知識やホームページなどありましたら教えてください。

※以下のページのような画像表示がしたいです。サムネイルをクリックすると、画像が大きく表示され、大きい表示のまま次の画像や前の画像に進んだり戻ったりできるようにしたいです。

http://www.hirokikun.jp/magazine/pg49.html

Aベストアンサー

ライトボックスというJavaScriptを使ってると思います。

参考URL:http://rooogie.web.fc2.com/lightbox/lightbox2.html

QHTMLタグ⇒リンクした画像を別ウインドウで開く

いつもお世話になります。
HTMLタグで、リンクした画像を別ウインドウで開く方法を教えて欲しいのですが、
1、メイン画像を表示。
2、そのメイン画像に別の画像をリンク付け。
※3、上記2、の”別の画像を新しいウインドで開く”方法が判りません。
過去歴を閲覧させていただきましたが、わたくしの知る限りではサムネイル画像=同じ画像を別ウインドで開く方法しか検索出来ません。
どなたか※印の方法をご存知の方是非アドバイスをお願いいたします。

Aベストアンサー

<a href="main.jpg" target="_blank"><img src="sub.jpg"></a>

target="_blank"
↑この部分が別ウィンドウで開く部分です。

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

Qオンマウスで、画像切り替え+別箇所の画像も同時に切り替えられのでしょうか?

お世話になっております。
もしJavascriptのカテゴリーと違うものでしたらすみません。

オンマウスにて画像を切り替えるJavascriptがあるのは存じておりますが、
オンマウス時にそのような画像切り替えをすると同時に
別部分にある画像エリアの画像、(もしくはHTML)も切り替える事は可能なのでしょうか。
別々に切り替え設定をすることは出来そうですが、同時に切り替えが出来るものなのかと思いまして、今回質問させて頂きました。

何ぶんよくわかっていないもので説明不足な点も多いかと思いますが、何卒宜しくお願い致します。

Aベストアンサー

やり方はいろいろ考えられます。
手っ取り早いのはidを振ってsrcを変えてしまうことでしょう。
その他グルーピングしたり、スタイルシートを併用したり
いろいろありそうですが、まぁフロー的にはそんなに変わりません

<img src="1.jpg" onmouseover="this.src='3.jpg';document.getElementById('another').src='4.jpg'" onmouseout="this.src='1.jpg';document.getElementById('another').src='2.jpg'" ><img src="2.jpg" id="another">

Q最新ページを表示する際のF5キーとctrl+F5キーの違い

お世話になります。

Webページを最新状態で表示する際に、ショートカットキーを利用して「F5」押下または「ctrl」キーと「F5」キーを同時に押下する場合があるかと思います。

Q1.この、「F5」キー単独の場合と、「ctrl」キーと「F5」キーを同時に押下した場合の違いは何なのでしょうか?どちらの場合も、たまにですが、最新状態が表示されないことがあります。クライアントマシンのキャッシュの設定や、表示するWebページがフレームを使っているかどうかも関係しているのでしょうか?なにかご存知の方がいらっしゃいましたらお教え下さい。

Q2.ASP.NETで開発しているwebページがあるのですが、F5キーやctrlキー押下時の処理を記述することはできるのでしょうか?

以上、よろしくお願いいたします。

Aベストアンサー

> Q1.この、「F5」キー単独の場合と、「ctrl」キーと「F5」キーを
> 同時に押下した場合の違いは何なのでしょうか?
どちらもページを最新の情報に更新しますが、CTRLキーと同時に押した場合は強制リロードになります。
タイムスタンプが同じでも、更新するってことですね。


> どちらの場合も、たまにですが、最新状態が表示されないことがあります。
METAタグでキャッシュしないよう、コンテンツ側で設定されてみてはどうでしょうか。


> Q2.ASP.NETで開発しているwebページがあるのですが、
> F5キーやctrlキー押下時の処理を記述することはできるのでしょうか?
クライアント側の JavaScript でリロードの処理をしてやればOKです。

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Qサムネイル画像をクリックすると拡大画像を表示させる方法

今はまずサーバに同一画像の小さい写真(サムネイル用)と大きい写真の両方をアップロードして、
小さい画像を表示させて、そこにリンクをつけて大きい画像のURLへとばすようにタグを書いているのですが、これでは同じ写真を2枚アップロードしなくてはいけず、面倒です。

1枚の写真だけをアップロードしてサムネイル画像を表示させて、クリックしたら拡大写真がでるようにするためにはどのようなタグを使えばいいのでしょうか?

Aベストアンサー

サムネイル表示するときだけ画像表示のサイズ指定をしてやればよいですね。

<a href="aaa.jpg"><img src="aaa.jpg" width="ピクセル数または%" height="ピクセル数または%"></a>

ただし、お分かりのように基の大きな画像を読み込んで表示だけ小さくする訳ですから、通信回線が遅かったり画像数が多いとサムネイル用の画像を用意したときよりも表示が遅くなります。

QCSSだけでサムネイルから拡大画像チェンジ

1ヶ所の指定場所に拡大画像が表示された状態で、下段にいくつかのサムネイルを設置し、マウスをそのサムネイルに乗せると拡大画像がチェンジして、マウスを外すと元画像に戻るみたいな事をCSSだけで表現したいのですが可能でしょうか?感じとしては http://curucuru-select.com/?pid=7429014 のCSS版みたいなものをのぞんでいるのですが・・・多分このサイトはjavascriptでやってるみたいなんですけど・・できたら、サンプルソースをいただけるとありがたいのですが・・どうかよろしくお願いします。

Aベストアンサー

> 自分の質問で言う「拡大画像が表示された状態で」と言うのは、このサイトで言う#gallery {background:ってところですかね。ここに画像を指定すればマウスoff時や別の場所をクリックすることでここの画像に戻るんですかね?

そう思われたのであれば、まずは実際に試してみてはいかがでしょう?
背景色ではなく背景画像を指定する場合は、位置やリピートの指定も追加しなければなりませんが。

> このサイトはサムネイルが拡大画像の左側縦指定してあるのですけど、それを拡大画像の下横並びに指定するにはタグ上どうすればよいのでしょうか?
> 下横並びのサムネイルの行数を増やすにはどう指定すればよいのでしょうか?

このサイトのソースには、CSSのそれぞれのプロパティが「どの様な働きをしているか」が具体的にコメントされていますので、それらを読み解けば応用はできる筈です。サムネイルを横並びにする事自体はfloatを定義に組み込めば簡単にできますが、このサンプルではサムネイルと拡大画像は同じ一枚の画像を使用(拡大画像に見えているのが実寸、サムネイルは同じ画像をCSS上で幅・高さを指定して縮小して見せている)している事もありますので、サムネイル(左)+拡大画像右→拡大画像(上)+サムネイル(下)というレイアウトに変更し、かつサムネイルの行数を増やす為には、関連する幅・高さ・位置関係等の定義を全て辻褄に合う様に変更しなければなりません。
上記がヒントです。もし、これらを読んでもピンと来ない、わからない、という事であればレイアウト変更は現在の質問者様には手に余る作業という事になるかと思いますので、サンプルのレイアウト・パターンをそのまま使用される事をお奨めします。レイアウトのパターンを変更しなければ、現在の縦並びのサムネイル画像を増やて行くのはかなり簡単な作業だと思いますので。

ちなみに、Nine-nine様と同様、こちらのサンプルでも編集次第で質問者様の仰る様なレイアウトは実現可能です。

> 自分の質問で言う「拡大画像が表示された状態で」と言うのは、このサイトで言う#gallery {background:ってところですかね。ここに画像を指定すればマウスoff時や別の場所をクリックすることでここの画像に戻るんですかね?

そう思われたのであれば、まずは実際に試してみてはいかがでしょう?
背景色ではなく背景画像を指定する場合は、位置やリピートの指定も追加しなければなりませんが。

> このサイトはサムネイルが拡大画像の左側縦指定してあるのですけど、それを拡大画像の下横並びに指定するには...続きを読む

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;


人気Q&Aランキング