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

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

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

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

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

この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を見た人が検索しているワード

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

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

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

Aベストアンサー

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

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

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は横幅と縦幅なので適当な値に変えてください。
サブウィンドウ...続きを読む

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テーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

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の方も修正する方法でもよけ...続きを読む

Qreturn trueとreturn falseの用途・違いは・・・?

functionやifなどで「return true」「return false」というのを見かけますが、これの違いを教えてください。あと最近

if(!obj){
return true;
}

という文を見かけました。
これがifじゃなくてfunctionなら、ブール値が返るのでtrueとfalseの違いがありますが、このifではなぜreturn trueを使っているのか分かりません。「return false」を書くと、ifやfunctionを強制的に抜ける「break」と同じ役割を果たすと聞いた事がありますが、trueは知りません。

・・・というより、ifでreturnを使う意味もよく分からなくなってきました。
if文は何も返りませんし、返したところで受け取る方法がありませんよね?
これもどういう意味なのか、教えてください。
よろしくお願いします。

Aベストアンサー

return TRUE; はその関数が正常に終了(期待した結果)することを
示し、return FALSE; は関数が失敗(期待しなかった結果)と言えば
わかりやすいでしょうか。

if文はifの後の式が、真か偽(0)かを判定しているものです。
if(!obj){ は、objが偽ならreturn true;とするという関数の仕様
になっていますね。if(obj==0)ならtrue(1)を返すという具合です。

QHTMLファイル同士での値渡し

困っています。

HTMLファイルからHTMLファイルへ移動するときに、
HTMLファイル1でJavaScript で算出された値を
HTMLファイル2へ渡して使用したいのです。

showModalDialogだとダイアログにしか渡せないし・・・。
このように、値をそのまま次のページに渡すための方法を教えてください。
お願いします。

Aベストアンサー

すみません。うっかりしてました。

document.write(FORM[v1]);
では、v1を変数と認識してしまうので、エラーになってしまいますね。

document.write(FORM.v1);  // 「FORM.v1」です
あるいは
document.write(FORM["v1"]);
としてください。

Qフォーム上で押されたボタンによってサーブレットの処理を変えたい

Urizakaです。
さて、さっそく質問です。
JSPの同一フォーム上に「登録」「修正」「削除」のボタンを置き、その押された
ボタンによってサーブレット内での処理が切り替わる(具体的には、違う
SQL文を実行し、違うJSPページをgetRequestDispatcherメソッドで生成
する)ようにしたいのですが、どのようにすればよいのでしょうか?
もちろんそれぞれの処理に対して別々のサーブレットを作り、javaScript
でそれぞれのサーブレットへ飛ぶように制御するという処理も考えたことは
考えたのですが、できれば一つのサーブレットで済ませたいと考えたもので
…宜しくお願いします。

Aベストアンサー

お恥ずかしい限りです。
前述の例、動くわけがありませんね(汗)

2つめの例、書きなおします。

---------------------------------------------------

■JSPのフォーム

<form name=MyForm action="<<サーブレットのURL>>" method=post>
<input type=button name=MyClick value=登録 onClick="func('Toroku');">
<input type=button name=MyClick value=修正 onClick="func('Shusei');">
<input type=button name=MyClick value=削除 onClick="func('Sakujo');">
<input type=hidden name=MySubmit>
</form>

<script language="JavaScript">
function func(MyCommand){
document.MyForm.MySubmit.value=MyCommand;
document.MyForm.submit();
}
</script>

■Servletでの処理
// リクエストの取得
String MyAction = req.getParameter("MySubmit");

// 処理の実行
if (MyAction.equals("Toroku")){...}
if (MyAction.equals("Shusei")){...}
if (MyAction.equals("Sakujo")){...}



---------------------------------------------------

こんな感じでどうでしょうか。
ちなみにこうやって書いておくと、フォームのボタンからじゃなくても
アンカーをクリックすることで同じ効果が出せそうな……

<a href="JavaScript:func('Toroku')">登録</a>

あ、でもまたボロが出そうなのでこの辺で(^_^;)

お恥ずかしい限りです。
前述の例、動くわけがありませんね(汗)

2つめの例、書きなおします。

---------------------------------------------------

■JSPのフォーム

<form name=MyForm action="<<サーブレットのURL>>" method=post>
<input type=button name=MyClick value=登録 onClick="func('Toroku');">
<input type=button name=MyClick value=修正 onClick="func('Shusei');">
<input type=button name=MyClick value=削除 onClick="func('Sakujo');">
<input type=hidden name=M...続きを読む

Q画像をクリックするとふわっと別窓が開くHPの作り方

http://www.oh-an.co.jp/relaxation.html
↑このHPの画像をクリックするとふわっと画像が出てくるような作り方がしたいのですが、タグ?(すみません、タグかスクリプトかjavaか何を使っているのかよく分かりません(^^;))

作り方はどうすればいいのでしょうか?作り方の説明をしているHPアドレス等があったら教えてもらえたらと思っています。

※画像をクリックした際に、_blank等で別窓が開く方法は知っています。

Aベストアンサー

”和室”などの写真をクリックしたときに切り替わる設定ですよね。
ページ上部にあるFlashの部分ではないですよね。
たぶん最近私が回答した過去ログと同じものだと思います。
http://oshiete1.goo.ne.jp/qa5297207.html
具体的アドバイスはできませんが、上記で紹介しているURL先を読んで
勉強してみてはいかが。

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&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報