今だけ人気マンガ100円レンタル特集♪

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

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

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

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

A 回答 (2件)

こんにちは



#画像を変換する処理です#
<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の部分を画像のファイル名に変えてください
画像をフォルダ内に入れているのであれば (フォルダ名)/(画像名) のようにしてください
    • good
    • 0
この回答へのお礼

丁寧なコメント付きで返信して頂きましてありがとうございました。
早速ご支持頂いたとおりに行ってみたところ、簡単に表示することができました。
どうもありがとうございます。

お礼日時:2007/03/16 19:12

http://www.red.oit-net.jp/tatsuya/java/image3.htm
これのonmouseoverと書いてある部分をonclickに変えれば出来ると思います。
    • good
    • 0
この回答へのお礼

参考になるURLを教えて頂きましてありがとうございました。
onclick以外にonmouseoverもからめてHPを作成しようと思います。
ありがとうございました。

お礼日時:2007/03/16 19:13

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

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

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

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

Q画像をクリックして同じページに拡大画像を出す

小さい画像をクリックすると同じページに拡大画像が表示されるようにしたいのです。小さい画像が7つ程横に並んでいて、クリックするとその下に拡大画像が表示されるページです。フレームは使わないで出来ますか?フレームを使うとテーブルの背景が切れてしまうので使わないで作りたいのですがわかりません。教えてもらえたら嬉しいです。

Aベストアンサー

 拡大画像 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.gif">
<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.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.gif">
<table align="center">
<tr>
<td><a href="javaScript:change(1)"><img src="1.gif" border="0" width="40" height="40"></...続きを読む

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

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

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

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

Aベストアンサー

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

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

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

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

Aベストアンサー

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

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

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

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

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

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

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

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

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

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

Aベストアンサー

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

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

Q写真で、「クリックすると拡大します」。

写真で、「クリックすると拡大します」。

というページがありますが、
どのような書き方をすれば宜しいのでしょうか。

考え方を教えてください。
一般的な考え方、若しくはこれが一番簡単、等。

宜しくお願いします。

Aベストアンサー

いくつか、参考になりそうなページを載せます。


http://p2b.jp/1147275586


http://nplll.com/mutter/archives/2007/09/litebox.php


http://dispersalblog.blog90.fc2.com/blog-entry-114.html


http://attosoft.info/blog/release-auto-thickbox-single-plugin/

Q画像をクリックすると別ウインドウに拡大画像を表示する。

アパレルのショッピングサイトの運営をしております。クライアントから「自社デザインを真似たものや盗用したものを頻繁に見かけるようになったため右クリック禁止で商品写真の画像をコピーされないようにしたい」との依頼がありました。
右クリック禁止は気休め程度と説明しましたが、残念ながら理解を得られませんでした。
私のJava Scriptの知識は読むことができる程度です。浅薄な知識ではどうにもすることができず、こちらに投稿させていただきました。どうぞよろしくお願いいたします。

実現したい内容は、▼次のとおりです。

┌─────   
│商品画像 
│A0101.jpg
└─────
↓↓クリックで別ウインドウが開く
┏━━━━━━━━
┃        
┃ 商品拡大画像 
┃ A0101L.jpg(末尾の'L'はLサイズの意味)

┃    ×閉じる
┗━━━━━━━━

1.商品画像をクリック。ファイル名A0101.jpgを変数に記憶。
2.A0101.jpgの末尾に’L'を加える。(A0101L.jpg)
3.別ウインドウを開き、拡大画像を表示。
4.拡大画像の横幅を調べ、別ウインドウを、高さ(600px)、横幅(
拡大画像+左右余白10px)にリサイズ。
5.画像上での右クリック禁止(<IMG SRC="A0101L.jpg" oncontextmenu="alert('画像コピー禁止');return false;">)

▼イメージに近いサイト
「ノードストローム」 (商品画像の下、>LARGE VIEWをクリック)
http://store.nordstrom.com/product/product_brandboutique.asp?styleid=2874130&boutique=lacoste&category=2376776~2374325~2378463~2383145~2378114&NextStyleID=2874128&PrevStyleID=none

▼現在はtarget="_blank"で別ウインドウを開かせています。
<A href="picture/A0101L.jpg" target="_blank"><IMG src="picture/A0101.jpg"></A>

アパレルのショッピングサイトの運営をしております。クライアントから「自社デザインを真似たものや盗用したものを頻繁に見かけるようになったため右クリック禁止で商品写真の画像をコピーされないようにしたい」との依頼がありました。
右クリック禁止は気休め程度と説明しましたが、残念ながら理解を得られませんでした。
私のJava Scriptの知識は読むことができる程度です。浅薄な知識ではどうにもすることができず、こちらに投稿させていただきました。どうぞよろしくお願いいたします。

実現したい内容...続きを読む

Aベストアンサー

通常のページAとウィンドウで開くページB別の説明です。

■ページA

まず<head>~</head>に

<script type="text/javascript">
<!--
function winOpen(img, num){
var winuri = "pageB.html"; // サブウィンドウのパス
var imgsrc = img.src || img;
window.open(winuri + "?img=" + imgsrc + "&num=" + num, "image", "width=700,height=600,scrollbars=1,resizable=1");
return false;
}
//-->
</script>

width=700,height=600は横幅と縦幅なので適当な値に変えてください。
サブウィンドウのパスには、ページBのパスを入れてください。


サムネイル画像と文章
<img src="A0101.jpg" onclick="winOpen(this, 3)">
<a href="#" onclick="return winOpen('A0101.jpg', 3)">商品の拡大写真</a>


■ページB

まず<head>~</head>に

<script type="text/javascript">
<!--
location.search.match(/^\?img=([^&]+)(\.[^&\.]+)&num=(.+)$/);
var img = RegExp.$1;
var ext = RegExp.$2;
var num = Number(RegExp.$3);

function changeImage(img){
var imgsrc = img.src || img;
imgsrc.match(/^(.*)s(\.[^\.]+)$/);
document.main.src = RegExp.$1 + "l" + RegExp.$2;
return false;
}

document.write = img && ext && num ? document.write : function(){};
//-->
</script>


そして↓が<tr><td>拡大画像</td><td>サムネイル画像全て</td></tr>の部分です。

<tr>
<td>
<script type="text/javascript">
<!--
/* 拡大画像 */
document.write('<img src="' + img + 'l' + ext + '" name="main" id="MAIN">');
//-->
</script>
</td>
<td>
<script type="text/javascript">
<!--
/* サムネイル画像 */
document.write('<img src="' + img + 's' + ext + '" class="thumbnail" onclick="changeImage(this)"><br>');

for (var i = 1; i < num; i++) {
document.write('<img src="' + img + String.fromCharCode(0x60 + i) + 's' + ext + '" class="thumbnail" onclick="changeImage(this)"><br>');
}
//-->
</script>
</td>
</tr>


BODY開始タグ
<body oncontextmenu="alert('画像コピー禁止');return false" onselectstart="return false" ondragstart="return false">


透明な画像
<img src="blank.gif" id="blank">


CSS
<style type="text/css">
<!--
img#blank {z-index: 1;position: absolute;top: 0;left: 0;width: 100%; height: 100%;}
img#MAIN {z-index: 0;position: relative;}
img.thumbnail {z-index: 2;position: relative;}
-->
</style>

以上です。



>この違いはどうして生まれるのでしょうか?
window.openのオプションにresizable=1を加えることでサイズを変えられるようになります(スクロールバーを有りにするならscrollbars=1)。

window.open(URI, window名, オプション);

通常のページAとウィンドウで開くページB別の説明です。

■ページA

まず<head>~</head>に

<script type="text/javascript">
<!--
function winOpen(img, num){
var winuri = "pageB.html"; // サブウィンドウのパス
var imgsrc = img.src || img;
window.open(winuri + "?img=" + imgsrc + "&num=" + num, "image", "width=700,height=600,scrollbars=1,resizable=1");
return false;
}
//-->
</script>

width=700,height=600は横幅と縦幅なので適当な値に変えてください。
サブウィンドウ...続きを読む

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

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

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

Aベストアンサー

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

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

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

Qサムネイルクリックで、画像をチェンジさせたい

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

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

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

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

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

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

Aベストアンサー

<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に変えなさい。という命令です。

<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('IMAGE...続きを読む

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

QHPに貼り付けた画像をクリックすると拡大表示する方法

HPに数枚の写真を小さく貼りつけ見る人が画像をクリックすると拡大されて見れるようにしたいが方法が分かりません。
WIndowsXP ホームページビルダーを使用しています。
宜しくお願いします。

Aベストアンサー

ビルダーでしたらサムネイルで出来ますが!

http://www.setuyaku-city.net/biruda/gazou/qhpg7.html


人気Q&Aランキング