サムネイル画像のリンク先で別ウィンドウを開くというのは良く見かけるのですが、テキストの文章の一部からリンクさせて小窓で画像を開くというのはどうやったらよいのでしょうか?同一ページ内で複数のリンクを設定(それぞれに別の画像を表示)したいのですが・・・
htmlで書いてblanc指定でリンクするとウィンドウが大きい上にメニューバーが邪魔で困っています。
どうかよろしくお願いします。

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

A 回答 (3件)

こんにちはnobu3さん。



文書中の文字からリンクする方法ですが

<html>
<head>
<title>WindowOpen</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
検索サイトは<a href="#" onClick="window.open('http://www.google.co.jp','new','scrollbars=no,re …);">こちら</a> です。
</body>
</html

と記述すれば文中の"こちら"からリンクする事が出来ます。
もし画像を開くのであればwindow.openのURL('http://www.google.co.jp')部分を画像を保存してあるアドレスにしてあげれば良いと思います。
ウィンドウの高さや幅を変更する場合はwidth=420,height=350の部分を替えて見て下さい。

参考URL:http://tohoho.wakusei.ne.jp/js/window.htm

この回答への補足

Horickさんありがとうございました。おかげで長い間悩んでいたことが一つ解決しました。ところで教えていただいたこのやり方は、N6では見ることが出来ないのでしょうか?又、文章のリンク個所をクリックしたらポップアップウィンドウが開いたときに親ウィンドウのスクロールバーがページの最初まで戻ってしまうのですが・・・解決策がありましたら教えていただきたいのですが、重ねてよろしくお願いします。

補足日時:2001/12/20 06:51
    • good
    • 0
この回答へのお礼

いままでかなり悩んでいた事をすぐにも回答いただきましてありがとうございました。今回一応の成果を得まして満足しております。いろんな本を読んでみたり、教えていただいたURLからダウンロードしたりと頑張ってみたのですが、個人ではなかなか理解が及びませんでした。早速の回答がとてもうれしかったです。感謝しております。

お礼日時:2001/12/23 20:29

文字リンクについては既に回答されていますので、補足の質問の方を。



まず、スクロールバーが戻ってしまうのは、Aタグの href に # が指定されているからです。これを
  <A href="javascript:void(0)" onClick="・・・">
とすればOKです。

それから、画像を直接開く場合、背景色は指定できないので、画像がメインとなる HTML を作っておき、それで指定すると良いかも知れません。

> N6では見ることが出来ないのでしょうか?
これがイマイチ分からなかったのですが、Netscape6 では この方法で何が出来なかったのでしょうか?
補足下さると幸いです。

この回答への補足

leaz024さん補足に対しての回答ありがとうございました。おかげさまで画像はきちんと表示され、スクロールバーも元に戻らなくなりました。又、画像の背景色についてはこれからもっとやってみます。それから、Netscape6でリンクをクリックしても全くリンクの効果が現れないのですが・・・全くの変化なしです。Netscape Communicatorではきちんと表示されます。再びよろしくご指導お願いします。

補足日時:2001/12/22 07:18
    • good
    • 0
この回答へのお礼

今度新たに、Netscape6,1にバージョンアップしましたら、きちんとポップアップウインドウが表示されました。いろいろと教えていただきましてありがとうございました。なお、背景色をつけるために、別のHtmlファイルを作ってみた結果、確かに見やすくはなったのですが、画像ファイルがある分Htmlファイルが増えるわけですので今回は断念することにしました。ご指導ありがとうございました。

お礼日時:2001/12/23 20:27

window.open('

http://www.xxx.ne.jp/~nobu3/foo.jpg','popwin','w …);

こんな感じで出来ると思います。

この回答への補足

MarrowGさんありがとうございました。この場合ポップアップウィンドウの背景色の指定は出来ますでしょうか?画像をセンターに寄せてみますと背景の白がかなり目立ってしまって・・・

補足日時:2001/12/20 06:50
    • good
    • 0

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

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

Qwindow.openで開いた別ウィンドウのリンクを親ウィンドウで開きたい

いつもお世話になっています。
index.htmlというページがあり、window.openでtest.htmlというウィンドウを開きます。
test.htmlの中に記述したリンクをindex.htmlと同じウィンドウに開きたいのですが、どう記述すればいいのでしょうか?
index.htmlを親とは見なさずparentではtest.htmlと同じウィンドウに開いてしまいます。
blankではindex.htmlとtest.htmlとも別のウィンドウに開いてしまいます。

おそらく初歩的な問題なのだと思いますが、どうかお知恵を貸して下さい。
普通ですが、test.htmlの現在の記述は以下です。
<a href="開きたいページ.html" target="_parent">ページを開く</a>

どうぞよろしくお願いします。

Aベストアンサー

こんにちは。開いた子ウィンドウの中でwindow.opener.location.href="http://www.example.com"などとなっていれば良いはずです。window.opener.location.replace(~)も有効かと。以下が参考になります。

http://shoyu-ramen23.jugem.jp/?eid=203
http://javascript.eweb-design.com/0515_os.html

以下のQ&Aも注意点として有用だと思いました。

http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1221399962

その他、"javascript window 子ウィンドウから location"などと検索してみて下さい。

Qサムネイル画像をオンマウスで拡大表示してそれぞれの画像にリンクを指定する記述について

お世話になります。
JavaScript初心者ですが、フリーソースなどを見つつ勉強しております。
下記のようなhtmlに【js00】と【js01】を読み込んでサムネイル画像をオンマウス時に上部に拡大表示させているのですが、サムネイル画像と拡大表示画像の両方に指定リンクをつけようとしています。

記述4の【js02】のような画像をランダム表示して指定リンクをつけるScriptは発見できたのですが、これを記述1+2+3と組み合わせられず、作業が進まなくなってしまいました…。

フリーソースを応用しようとしすぎて、遠回りな記述になっているかもしれませんが、もし分かる方がいらっしゃったら教えて頂けないでしょうか?

■記述1(html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<SCRIPT language="JavaScript" type ="text/javascript" src="http://test.com/00.js">
</SCRIPT>
</head>
<body>
<table width="400">
<a href="#" target="_blank">
<img src="http://test.com/img/01.jpg" name="imgSample"></a>
<div>
<div>
<script language="JavaScript" type ="text/javascript" src="http://test.com/01.js">
</script>
</body>
</html>

■記述2(js00)
//画像の名前を配列に代入していきます。
strPictureName = new Array("http://test.com/img/01.jpg","http://test.com/img/02.jpg","http://test.com/img/03.jpg","http://test.com/img/04.jpg","http://test.com/img/05.jpg","http://test.com/img/06.jpg","http://test.com/img/07.jpg","http://test.com/img/08.jpg");
function SetPicture(nVal)
{
document.imgSample.src = strPictureName[nVal];
}

■記述3(js01)
//サムネイル画像をオンマウスで拡大表示
img_num="8";
if( img_num == "" ){img_num='5';}
for ( cnt = 1 ; cnt <= img_num ; cnt++ ) {
cnt2 = cnt-1;
document.write( "<a href=\"#\" onMouseOver=\"SetPicture("+cnt2+");\" class=\"menu\"><img src=\""http://test.com/0"+cnt+".jpg\" width=\"100\" height=\"86\"></a>" ) ;
}

■記述4(js02)

// ランダムに画像を表示する
jmp = new Array();
img = new Array();
// ジャンプ先のアドレス(数字は画像と対応)
jmp[0] = "http://www.yahoo.co.jp/";
jmp[1] = "http://bb.yahoo.co.jp/";
jmp[2] = "http://www.yahoo.co.jp/";
jmp[3] = "http://auctions.yahoo.co.jp/";
jmp[4] = "http://aeu.jp/cs/";
jmp[5] = "http://google.com/";
jmp[6] = "http://google.co.jp/";
jmp[7] = "http://news.yahoo.co.jp/";
// 画像のアドレス(数字はジャンプ先のアドレスと対応)
img[0] = "http://test.com/01.jpg";
img[1] = "http://test.com/02.jpg";
img[2] = "http://test.com/03.jpg";
img[3] = "http://test.com/04.jpg";
img[4] = "http://test.com/05.jpg";
img[5] = "http://test.com/06.jpg";
img[6] = "http://test.com/07.jpg";
img[7] = "http://test.com/08.jpg";
n = Math.floor(Math.random()*jmp.length);
document.write("<a href='"+jmp[n]+"'>");
document.write("<img src='"+img[n]+"' border='0'>");
document.write("</a>");


■完成イメージ

  | ̄ ̄ ̄ ̄ ̄ ̄ ̄|
  |  拡大画像  |
  |_______|
  | ̄|| ̄|| ̄|| ̄|
  |_||_||_||_|←サムネイル

・サムネイル画像をオンマウスで拡大画像を表示
・サムネイル画像、拡大画像それぞれに指定リンクを入れる
・可能であればリンクページは target="_blank" で開きたい


以上がご質問内容です。
初心者で大変恐縮ですが、どうぞよろしくお願いいたします。

お世話になります。
JavaScript初心者ですが、フリーソースなどを見つつ勉強しております。
下記のようなhtmlに【js00】と【js01】を読み込んでサムネイル画像をオンマウス時に上部に拡大表示させているのですが、サムネイル画像と拡大表示画像の両方に指定リンクをつけようとしています。

記述4の【js02】のような画像をランダム表示して指定リンクをつけるScriptは発見できたのですが、これを記述1+2+3と組み合わせられず、作業が進まなくなってしまいました…。

フリーソースを応用しようとしすぎて...続きを読む

Aベストアンサー

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>TEST</title>
<style type="text/css">
.smlimg{ width:120px; height:80px; }
#bigimg{ width:600px; height:400px; }
#a{ width:600px; height:100px; overflow:auto; }
</style>

<div><img src="" id="bigimg"></div>
<div id="a"><div id="b"></div></div>

<script type="text/javascript">
//@cc_on
var simage = 'p0.jpg p1.jpg p2.jpg p3.jpg p4.jpg p5.jpg'.split(' ');
var bimage = 'p0.jpg p1.jpg p2.jpg p3.jpg p4.jpg p5.jpg'.split(' ');
var jmpurl = 'htp:/test.xxx0.com htp:/test.xxx1.com htp:/test.xxx2.com htp:/test.xxx3.com htp:/test.xxx4.com htp:/test.xxx5.com '.split(' ');
var bufimg = [];

addEvent( window, 'load', init);
addEvent( 'b', 'mouseover', chgimg );
addEvent( document.body, 'click', chgurl );

function init(){
var w=0,r = Math.random()*i|0,image,p;
for(var i in simage){
bufimg[i] = new Image; bufimg[i].src = bimage[i]; image = document.createElement('img');
with( image ){ src = simage[i]; alt = bimage[i];title = jmpurl[i]; className = 'smlimg'; }
p = document.getElementById('b').appendChild( image ); w+=p.offsetWidth;
}
document.getElementById('b').style.width=w+'px'; setbimg( bufimg[r].src, jmpurl[r] );
}
function chgimg( evt ){
var obj = evt.target || evt.srcElement;
if( obj.className && obj.className == 'smlimg') setbimg( obj.alt, obj.title );
}
function chgurl( evt ){
var obj = evt.target || evt.srcElement;
if( obj.className == 'smlimg' || obj.id == 'bigimg' ) window.open( obj.title );
}
function setbimg(s,t){with( document.getElementById('bigimg')){src=alt=s;title=t}}
function addEvent(elementId, evt, eventHandler, flag){
var element = ( typeof( elementId ) == 'string' )? document.getElementById( elementId ): elementId;
element./*@if(1)attachEvent('on'+ @else @*/addEventListener(/*@end@*/evt, eventHandler, flag);
}
</script>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>TEST</title>
<style type="text/css">
.smlimg{ width:120px; height:80px; }
#bigimg{ width:600px; height:400px; }
#a{ width:600px; height:100px; overflow:auto; }
</style>

<div><img src="" id="bigimg"></div>
<div id="a"><div id="b"></div></div>

<script type="text/javascript">
//@cc_on
var simage = 'p0.jpg p1.jpg p2.jpg p3.jpg p4.jpg p5.jpg'.split(' ');
var bimage = 'p0.jpg p1.jpg p2.jpg p3.jpg p4.jpg p...続きを読む

Q別窓を開くリンクでリンク元に画像を使用したいのですけども・・・

いつもお世話になります。
また、問題が発生致しました。
javaScriptで別窓を開くリンクでリンク元に画像を利用したいのですけども検索しても文字からのリンクしか見つからず画像からのリンクを教えて頂きたいのですが、よろしくご指導お願い致します。

<SCRIPT LANGUAGE="JavaScript">
<!---
function wopen1(){ window.open("http://www.yahoo.co.jp","yahoo",
"toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=500,height=300") }
//--->

リンク元で画像を使いたいです。
<A HREF="javascript: wopen1()">ウィンドウ1</A>
これをどのように書き換えれば画像からリンクできますでしょうか?

お手数かけますがお願いいたします。

Aベストアンサー

画像の載せ方は分かりますか?それを<A>タグで挟むだけですよ。

<A HREF="javascript: wopen1()">ウィンドウ1</A>

<A HREF="javascript: wopen1()"><img src="画像Url"></A>
に変更してください。

参考URL:http://www.htmq.com/html/img.shtml

Qフレーム内から開いたサブウィンドウから親ウィンドウの別フレームの操作を行いたい

メニュー、メインの2つのフレーム分けしてあるページで、メインページからサブウィンドウを開きます。
その後、以下の2アクションを同時に行いたいのです。
(1)サブウィンドウから親ウィンドウ(メイン)をジャンプさせる
(main.html→main2.cgi)
(2)親ウィンドウ(メニュー)の画像をAからBに変更させる

現在window.openerでメインページの変更はできているのですが、
メニューページの画像のを変更がうまくできません。

方法としては
(1)サブから親ウィンドウ(画像=A)を閉じさせて、再び親ウィンドウ(画像=B)を
フレームセットごとムリヤリ開き直す。

(2)何らかの形でメニューページの情報を保存しておき、Onloadでサブからのジャンプ時に変更させる

(3)サブから親ウィンドウのフレーム越し操作を行なって、メニューページの画像を変更する。

どの方法が可能でしょうか、もっといい方法がありますか。
お知恵拝借させてください。よろしくお願いします。

以下、かなり省略したソース説明です。

【フレームセット→cgi。記述は省略】
<frameset>
 <frame src="menu.html" name="menu">
 <frame src="main.html" name="main">
</frameset>

【メニュー→html】
<img src="A">

【メイン→html】
function open_sub(url) {
/**/
w = window.open(url, 'sub')
}
<!--本文-->
<a href="javascript:open_sub('sub.html')">サブウィンドウ</a>

【サブ→html】
function change_main() {
window.opener.location.href="main2.cgi?sub";
window.opener.focus();
}
<!--本文-->
<A HREF="JavaScript:change_main()">メインを変更</A>

メニュー、メインの2つのフレーム分けしてあるページで、メインページからサブウィンドウを開きます。
その後、以下の2アクションを同時に行いたいのです。
(1)サブウィンドウから親ウィンドウ(メイン)をジャンプさせる
(main.html→main2.cgi)
(2)親ウィンドウ(メニュー)の画像をAからBに変更させる

現在window.openerでメインページの変更はできているのですが、
メニューページの画像のを変更がうまくできません。

方法としては
(1)サブから親ウィンドウ(画像=A)を閉じさせて、再び親ウィ...続きを読む

Aベストアンサー

>(3)サブから親ウィンドウのフレーム越し操作を行なって、メニューページの画像を変更する。
この方法で可能だと思います。
画像表示の<IMG>タグ(イメージオブジェクト)に名前を付けます。
そして、そのファイルを指定するURLをフレーム越しに動的に変更します。

変更例)

【メニュー→html】
<img src="A" name="g_1">

【サブ→html】
function change_main() {
window.opener.top.menu.document.g_1.src="B";
window.opener.location.href="main2.cgi?sub";
window.opener.focus();
}


人気Q&Aランキング

おすすめ情報