検索したり本を探したりしたのですが、どうしても見つけられなかったので
投稿します。

アルバムのコンテンツを作ろうと考えています。
いきなり大きな画像を沢山張りつけると重くて仕方がなくなるので、
まずサムネイルをテーブルの中にいれて沢山表示させるページを作りました。

自分の理想としてはサムネイルをクリックすると
サイズ指定された別ウインドウが開いて該当サムネイルの大きな画像が
表示されるようにしたいんです。

そこで色々調べてみたのですが、ボタンや、テキストをクリックすると
別ウインドウが開くというサンプルはあっても、画像をクリックした
場合の設定方法が見つかりません。

どのように設定したらいいのか、ご存知の方がいらっしゃいましたら、
教えてください。よろしくお願いします。

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

A 回答 (3件)

<a href="Javascript:tempWin.focus()" onClick="tempWin=window.open('images/sample_big.jpg','sample','width=200,height=200')" border="0">


<img src="images/sample_smoll.jpg" width="50" height="50" border="0"></a>

と、こんなのはどうでしょう
画像一枚一枚にスクリプトを記述するのでちょっとソースが長くなりそうですが
改行をいれずに書かないとだめかも知れません
    • good
    • 1
この回答へのお礼

どうもありがとうございました!
皆様に教えていただいた情報を参考に
色々やってみたのですがスキルがないせいで
うまく設定できず、結局自力で解決してしまいました。

お返事頂きました皆様、お忙しい中回答いただきまして、
本当にありがとうございました!

お礼日時:2001/03/23 11:54

想像されているのと違うかもしれませんが、チョット書いて見ました。


簡単にする為に正式なHTML記述では書いていませんので適当に変更して
下さいね。
新たなウィンドウのイメージを縮小する必要がない場合は、
document.writeを使わずに、window.open(obj.src, .....);
でもOKです。
ただし、NetScapeでは動くかどうかは確かめていません。

<html><head>
<title>abc</title>
<script language="JavaScript">
<!--
function imageOpen(obj,w,h) {
var bound = 20;
var winInf = "toolbar=no,width=" + (w+bound) + ",height=" + (h+bound)
+ ",status=no,scroolbars=yes,resize=no,menubar=no";
var imgTag = "<img height=" + h + " width=" + w
+ " src=" + obj.src + " border=0>";
window.open(null,null,winInf).document.write(imgTag);
}
//-->
</script></head>
<body>
<img height="64" width="64" src="abc.jpg" border="0" onClick=imageOpen(this,300,300)>
</body></html>
    • good
    • 0
この回答へのお礼

どうもありがとうございました!
ネスケとIE両方でスムーズに動くことを
考えると大変だなぁといつも思います。

お礼日時:2001/03/23 11:48

お望みのものは恐らくこういうものなのでしょう。



<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
</head>

<script type="text/javascript">
<!--
function open_window(img,x,y){
s="width="+x+",height="+y;
win1=window.open('','','resizable=yes,scrollbars=no,'+s);
win1.document.open("content-type:text/html");
win1.document.write("<html>\n<body bgcolor='#ffffff' leftmargin='0' topmargin='0' marginwidth='0' marginheight='0'>\n");
win1.document.write("<img src='+img+'>");
win1.document.write("</body>\n</html>");
win1.document.close();
}
//-->
</script>

<body>
<table border="4" cellpadding="0" cellspacing="2" width="200">
<tr>
<td><a href='javascript:open_window("a_big.gif",300,200)'><img height="32" width="32" src="a.gif" border="0"></a></td>
<td><a href='javascript:open_window("b_big.gif",200,320)'><img height="32" width="32" src="b.gif" border="0"></a></td>
<td><a href='javascript:open_window("c_big.gif",250,220)'><img height="32" width="32" src="c.gif" border="0"></a></td>
</tr>
<tr>
<td><a href='javascript:open_window("d_big.gif",250,220)'><img height="32" width="32" src="d.gif" border="0"></a></td>
<td><a href='javascript:open_window("e_big.gif",250,300)'><img height="32" width="32" src="e.gif" border="0"></a></td>
<td><a href='javascript:open_window("f_big.gif",50,450)'><img height="32" width="32" src="f.gif" border="0"></a></td>
</tr>
<tr>
<td><a href='javascript:open_window("g_jpg.gif",300,50)'><img height="32" width="32" src="g.jpg" border="0"></a></td>
<td><a href='javascript:open_window("h_jpg.gif",350,330)'><img height="32" width="32" src="h.jpg" border="0"></a></td>
<td><a href='javascript:open_window("i_jpg.gif",250,220)'><img height="32" width="32" src="i.jpg" border="0"></a></td>
</tr>
</table>
</body>

</html>
サルネイムガ像が a.gif b.gif ・・・・・・ i.jpgなどで、
本物画像が a_gif.gif, b_big.gif ・・・・・・ i_big.jpg と考えます。

javascript:open_window("i_jpg.gif",250,220) のところで設定し、
左から、”本物の画像ファイル”、x幅、y幅 です。

いちどソースをコピって動きを確認なさればどう私用すれば良いかわかると思います。
    • good
    • 0
この回答へのお礼

ありがとうございました。
早速コピーして動作を確認しましたが、
ウインドウは開きませんでした。

教えていただいたとおりにやってみましたが
やはりウインドウは開きません。

多分私のやり方がまずいのだと思います・・・。
もう少し答えを募集してみます。ありがとうございました!

お礼日時:2001/03/17 21:05

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

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

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

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

Q添付画像のファイルはどんな状態のファイルなのでしょうか?クリってもエラ

添付画像のファイルはどんな状態のファイルなのでしょうか?クリってもエラーしか出た事がないのですが

Aベストアンサー

他の回答者様の記入通り、拡張子が無い事には判断出来ません。
また、クリックしてもエラーとありますが、webから探すとか出ませんか?
憶測ですが、多分質問者様のPCにこのファイルを開くアプリケーションが
インストールされていないのではないかな?って思います。
参考までに
よくありがちなのは、XPで作ったエクセルファイル等(逆だったかな^^;)を
ビスタのPCで見ると似たようなアイコンになります。
オフィスの互換パックをインストールすると見れます。

Q別ウインドウを開いて、更に、そこから、新しい別ウインドウを開きたいのですが、、、

別ウインドウ(SUB1)を開いて、更に、そこから、新しい別ウインドウ(SUB2)を開きたいのですが、うまくいきません。
そもそも、ページの仕組みは、フレームページです。
左右2枚です(左は、HPのリンクメニューです、右に各自が自由にUPできる仕組みです、FTP転送により、、、)
右ページにUPするには、各自定められているアカウントで転送します。
さて、現象なんですが、SUB2が、左のフレームに、表示されてしまうのです、本当は、別ウインドウとして表示されてほしいのに、、、、しかし、この、メインのフレームページを右だけ開くと、きちんと、別ウインドウとして表示されます、こんなこと、あるのでしょうか?

Aベストアンサー

開こうとしている別ウィンドウに与えられている名前が、フレームページに与えられている名前と重複していることが原因なのではないでしょうか。

window.open()の第二引数は、その第一引数で指定されたファイルを開くウィンドウないしフレームの名前を指定しています。 a要素のtarget属性と同等の意味を持っていると考えていいでしょう。
ですので、sub2を開く関数のwindow.open()の記述を見直して、第二引数で与えているウィンドウの名前を別の名前に変えるか、もしくは"_blank"に書き換えれば解決できると思いますよ。

見当違いでしたら、ごめんなさい。

Q右クリで画像保存が出ない!

画像を取りたくて矢印を画像に置くと!手のマークに代わり!右クリができなくなりました。
どうしたらよいのでしょうか?

Aベストアンサー

最近のサイトでは著作権の問題もあり、勝手に保存ができないように右クリックができないように設定しいるところが多くなっているであります。法律に抵触する場合もあるであります。

方法としては、色々あるでありますが、ただ見えてる画像が欲しいのであれば、プリントスクリーンでPC画面全体をコピーして、ペイントソフトにペースト、余分な部分を削除して保存すればいいと思うであります。

プリントスクリーンはググってほしいであります。

QFlash内のサムネイル画像をクリックするとサイズ指定の別窓で拡大画像を表示

お世話になっております。

Flashでフォトギャラリーを作っています。

http://okwave.jp/kotaeru.php3?q=2243910
で質問させていただいているのですが、別の方法として、
JavaScriptを使用し、Flashの画像をクリックすると、
別ウインドウをサイズ指定で開きさらに画像のサイズを変更し
拡大画像を表示させることはできるのでしょうか?

方法を知っている方いましたら教えて下さい。
宜しくお願いします。

Aベストアンサー

>別ウインドウをサイズ指定で開きさらに画像のサイズを変更し拡大画像を表示させることはできるのでしょうか

t1.htm?h590to/tzzz.jpg 等の情報で t1.htm 呼ぶ

呼ばれた先で 呼び出し元の情報を解析して
document.write('<A href="' + pn_sw + '"><IMG src="' + pn_sw + '" alt="' + pn_sw + '" class="' + pn_ln1 + '">\n');

いろいろの画像があるのでスタイルシートで高さ指定しています

画像の高さ指定している 例 .h590 {border-style:none;height:590px;}

Q 友近さんの画像を探しています。本当にいい人で、美人で、セクシーだと思

 友近さんの画像を探しています。本当にいい人で、美人で、セクシーだと思います。着衣・水着・スカート、なんでもOKです(あまり小さいサイズじゃない方がよいです)。どうぞよろしくお願いします。

Aベストアンサー

こちらに数点ありました。
http://bsearch.goo.ne.jp/image.php?UI=web&TAB=web&STYPE=0&CC=1&SCRDEF=0&IMGST=0&IMGSZ=0&IMGC=3&IMGFT=0&IMGFT=1&IMGFT=2&IMGFT=3&MOVPT=0&MOVFT=0&MOVFT=1&MOVFT=2&MOVFT=3&AUDPT=0&NSDP=1&KWDP=1&DC=20&FR=1&SM=mc&OCR=1&SITE=&SITE2=&SITE3=&SITE4=&SITE5=&SITEH=&AUDST=0&AUDMST=0&MOVTHN=0&QGR=1&MOVSC=0&NOJSB=0&QGA=1&NOJS=0&AUDSITE=0&MT=%CD%A7%B6%E1&button=%B2%E8%C1%FC%B8%A1%BA%F7
画像を使用される場合は自己責任でお願いします。

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●「美人アプリ」の画像を保存したい!

●「美人アプリ」というアプリを使用しています。

●ここで表示される画像を保存したいのですが、方法がわかりません。可能かどうかも。。

●もし、方法をご存知の方がいらっしゃいましたら教えていただけませんか?おねがいします。

Aベストアンサー

保存したい画像を表示させて、↓の方法で画面をキャプチャすると、写真アルバムから見れます。
http://blog.livedoor.jp/sakusakupocky/archives/50263981.html

Q画像をクリックすると閉じる別ウインドウ

こんにちは。上記タイトルのページを作りたいと思っています。
親ページには

<script language="JavaScript">
<!-- //

var new1,win1p;

function CenterOpen (img,Xv,Yv) {
if (win1p=="on") {
if (new1.closed) {} else {new1.close();}
}

win1p = "on";
Xw=Xv+50;
Yw=Yv+80;

new1=window.open("", "newwin", "resizable=1,width="+Xw+",height="+Yw+"");
if(navigator.appVersion.charAt(0)>=3){new1.focus()};
new1.document.clear();
new1.document.write("<html><head><meta http-equiv=Content-Type content=\"text/html; charset=x-sjis\"><title>View Window</title></head><body bgcolor=#000000><table width=100% height="+Yv+" border=0 cellpadding=0 align=center valign=center>");
new1.document.write("<tr><td align=center valign=center><img src="+img+" width="+Xv+" height="+Yv+"></td></tr></table>");
new1.document.write("<center><form><input type=button value='close' onClick='window.close()'></form></center>");
new1.document.write("</body></html>");
new1.document.close();
}

//-->
</script>


画像リンクには
<a href="JavaScript:onClick=CenterOpen('●●.jpg',サイズ,サイズ);">
こんな感じで作ってあります。

この
new1.document.write("<center><form><input type=button value='close' onClick='window.close()'></form></center>");
画像ボタンがいらないのでここを抜いて

画像をクリックすると子ウインドウが閉じるようにしたいのですが、うまくいきません。このサイトもいろいろ見ましたがよくわかりませんでした。
どなたかご教示下さい。よろしくお願いします。

こんにちは。上記タイトルのページを作りたいと思っています。
親ページには

<script language="JavaScript">
<!-- //

var new1,win1p;

function CenterOpen (img,Xv,Yv) {
if (win1p=="on") {
if (new1.closed) {} else {new1.close();}
}

win1p = "on";
Xw=Xv+50;
Yw=Yv+80;

new1=window.open("", "newwin", "resizable=1,width="+Xw+",height="+Yw+"");
if(navigator.appVersion.charAt(0)>=3){new1.focus()};
new1.document.clear();
new1.document.write("<html><head><meta http-...続きを読む

Aベストアンサー

<img src=…>
の部分に
onClick='window.close()'
を付けたらどうでしょうか

Q右クリ禁止のサイトの画像を保存

質問の通りなのですが右クリック禁止のサイトの画像を保存できるようにする方法はないでしょうか?あと、よく海外でおもしろ動画とかを見せてるサイトがありますが、そういった動画を保存する方法はありますか?重ねて質問すいません^^;

Aベストアンサー

そのサイトを見ないとなんとも言えませんが、
JAVAをオフにしてみると右クリック禁止がはずれる事もあります。

それで駄目ならば、プリントスクリーンを取って画像を修正してください。
まぁ画像を持ち出されたくないサイトならばあまり持ち出さないほうがよろしいかと思います。

ちなみに動画を保存する場合は専用のソフトなどが必要。

Qサムネイルをクリックするとコンテンツが変わる

http://www.au.kddi.com/

上記、AUのページのように、
下にサムネイルがあって、クリックすると上のコンテンツが変わるようなコンテンツを作りたいと思っています。

画像を切り替えることはできたのですが、
div枠を切り替えるようにしたいと思っています。

いろいろと検索しましたが、ギャラリー用のプラグインばかりで、
div枠を切り替えるものが見つかりませんでした。

どのようにしたらいいか、
もしくは、プラグインがあればそちらを教えてください。

よろしくお願いいたします。

Aベストアンサー

>画像を切り替えることはできたのですが、
どのような方法で切り替えをなさっているのか不明ですが、画像の切替をdisplay:none/blockの切り替えで行なっているのであれば(ご提示のサイトはそのような方法と思われますが)、divでも同様の方法で可能かと思われます。


ご提示のサイトの例で言えば、
id=wrapVisualの要素の中に拡大表示される画像が並んでいて、サムネイルのクリックに併せてそれぞれの表示/非表示を切替えているようです。
切り替えの対象はp要素になっていて、その中にimg要素が入っている構成になっています。
div要素の場合でも、このp要素をdiv要素に代えて考えれば、同じ要領でいけるはずです。

ついでに言えば、リンク要素はposition:absoluteでその上に重ねて表示しておいて、内容変更時にリンク先も書換えているようです。


人気Q&Aランキング

おすすめ情報