- ベストアンサー
商品画像のクリックで拡大画像を表示する方法
665の回答
通常のページ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名, オプション);
関連するQ&A
- サムネイルクリックで別ウィンドウに拡大画像表示
javascriptにて画像のようなな形を作りたいのですが初心者で困っています。 ページAの画像をクリックすると別ウィンドウで拡大画像とその他のサムネイルが 表示され、そのウィンドウで各画像を切り替えて観覧できるようにしたいです。 元のページでの画像切替はよくありますが、別ページを開いて観覧する場合がわからず困っています。ページAと同じようなページを複数つくり、拡大のページBは共通で使えるようにしたいと思っています。 ページAのhtml部分は <li><a href=><img src="test.jpg" title="拡大時に表示する文"></a></li> <li><a href=><img src="test_a.jpg" title="拡大時に表示する文"></a></li> <li><a href=><img src="test_b.jpg" title="拡大時に表示する文"></a></li> この画像をクリックでページB拡大画像を表示し、画像と一緒にtitleに入れた文章を表示させたいと思っています。 用意する画像は各拡大画像1枚で、サムネイルのところはcssで小さくしています。 このような形は実現可能でしょうか？ よろしくお願いします。
- ベストアンサー
- JavaScript
- HPの画像の拡大表示について
現在ＨＰを作成しています。 小さい画像を並べて、クリックすると新しいウインドウに 拡大写真が表示されるようにしたいのですが。 winのペイントで画像を２枚用意して、(縮小画像と拡大画像) 01と１にファイルしました。 <A href="img\1.jpg" target="_blank"><IMG src="img\01.jpgL"></A> としたのですが、拡大画像は表示されても、縮小画像は×になっています。何か間違っているのでしょうか? 教えてくださいお願いします。 超初心者ですので、わかり易くお願いします。
- ベストアンサー
- HTML
- 写真を別ウインドウで拡大した後、別の写真を拡大する時に前に開いたウインドウに表示する
現在写真を公開するHPを作成中なのですが、以下のHTML文で複数写真を公開すると、拡大の際にいくつものウインドウが出てしまい、困っています。 <a href="@@@@@.JPG" target="_blank"> <img src="@@@@@.JPG" width=$$% height=$$%> </a> 写真を別ウインドウで拡大した後、別の写真を拡大する時、前に開いたウインドウで表示するにはどのような方法がありますか？
- 締切済み
- HTML
- 「クリックして表示される画像が、右クリックでは保存できない」設定
リンクをクリックすると、別ウィンドウが開いて画像が表示されるページがあります。 （ソースは<a href="○○.jpg" target=_blank>●●●</a>です。） ブラウザはIEを使っているのですが、 リンクを右クリックし、「対象をファイルに保存」を選ぶと、 ○○.jpgではなくて403.htmが保存されます。 おそらくサーバ側でそのような設定をしているのではないかと思うのですが、 Apacheの場合、どのようにすれば上記の環境になりますが？
- ベストアンサー
- オープンソース
- 画像クリックした後別ウィンドウで表示
過去の質問を調べてみましたが無かったのでご質問させて頂きます。 とあるページに小さい画像が右に並んでいて、左に大きい画像がある ページがあります。 その右側の小さい画像をクリックすると左側の画像が小さい画像の拡大版が 表示されます。 ここまでは過去ログにありましたが、その左側の画像をクリックすると 別ウィンドウでそのクリック後に変わった画像が表示したいのです。 別ウィンドウはhtml表示でなくてもイメージの直表示でOKなのですが 説明足らずでわかりにくい点等ございますが、ご指導頂ければ幸いです。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- 拡大画像を別画面で表示したい
メインのページにある画像をクリックすると別ウィンドウで拡大画像を表示したいのですが、うまく出来ません。 下記の方法のタグを教えていただけますでしょうか。 1.拡大画像のウィンドウのサイズは画像に合わせた 適当な大きさに指定したい。 2.開いたウィンドウを【閉じる】ボタンの作成 （テキストで「閉じる」と表示する予定です） 宜しくお願いいたします。
- ベストアンサー
- HTML
- アメブロで画像が拡大表示できません。
アメブロで記事を作成して画像を載せましたが、画像をクリックしても拡大表示できません。 人のブログの写真はクリックすると拡大できます。 HTML表示では <a href="http://***.jpg"><img border="0" alt="*" src="http://***.jpg" width="*" height="*" /></a> となっています。 よろしくお願いします。
- 締切済み
- ブログ
- 新ウィンドウの画像をクリックして閉じる
画像を載せたホームページを作成しています。 target="_blank"で新ウィンドウで開いた画像をクリックして、新ウィンドウを閉じるにはどうしたら良いのでしょうか？ これじゃダメなんでしょうか？ <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <SCRIPT LANGUAGE="JavaScript"> <!-- function WinCls(){ window.close() } //--> </SCRIPT> <TITLE></TITLE> </HEAD> <BODY> <A href="aaa.jpg" javascript:WinCls()" target="_blank"><IMG src="aaa.jpg"></A> </BODY> </HTML>
- 締切済み
- JavaScript
- バナー画像が別ウィンドウに表示されてしまいます。
バナー画像自体が別ウインドウに表示されて困っています。 まず、エキサイトブログを使っています。 投稿画面に、バナーリンクを張ろうと思い、 色々調べながら、何とかやってみました。 最初は <a href="http://×××××" target="_blank"title="×××××"> <img src="画像のＵＲＬ"> </a> 赤い×印になってしまいました。 （画像ＵＲＬは、一旦画像をアップロードして、プロパティから コピーしました。） 次に、普通に画像を投稿する要領で、バナー画像を、アップしてみました。 <a href="http://×××××" target="_blank"title="×××××"> [#IMAGE|×××_×××.gif|×××/××/××/|mid|179|86#] </a> 画像も表示されるし、クリックしたら、リンクもしている。 ただ、リンク先表示とともに、画像自体が、別ウィンドウで表示されます。 全体的に、間違っていると自分でも思っています・・・。 どなたか、正しいやり方を教えてください。 どうぞよろしくお願い致します。。
- 締切済み
- ブログ
- 画像の別ウィンドでの拡大表示をやりたいが・・・
Ｋｏｏｔｓｕｋｉと申します。 初めて質問させていただきます。 javascriptを勉強しはじめたものです。 ブログで画像の別ウィンドでの拡大表示をやりたくjavascriptでfunctionを定義しました。しかし、エラーになってしまいうまくいきません。どなたか原因を教えていただけないでしょうか。 まずhtmlは以下です。 <img src="http://...AAAAs.jpg" onclick="largeImage(this)"> 次にfunctionの定義は以下です。 ブログ上のサムネール画像をクリックしたときには、lergeImageで900×675のウィンドゥを開き、そこにオリジナル画像を100%縮小(?)で表示します。同時に画面の左上に拡大マーク画像を表示し、そこがクリックされたら同じウィンドゥを使って縮小なしで再表示しようと思っています。しかし、拡大マーク画像をクリックすると、ランタイムエラー：行番号0で「オブジェクトを指定してください」とランタイムエラーになってしまいます。どこがおかしいのでしょうか。よろしくお願いします。 <script type="text/javascript"> <!-- var lisrc = ""; function largeImage(img){ var objImg = new Image(); objImg.src = img; var img_wh_hi = objImg.height / objImg.width; var base_wh_hi = 675 / 900; img.src.match(/^(.+)s\.([^\.]+)$/); lisrc = RegExp.$1 + "." + RegExp.$2; newWin = window.open("","","top=10,left=10,width=900,height=675,scrollbars=yes").document; newWin.open(); newWin.write('<html><head><title>拡大画像<\/title><style type="text/css"><!-- body {padding:0;margin:0;text-align:center;} #blank {position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;} --><\/style><\/head>'); newWin.write('<body>'); newWin.write('<p><img src="' + lisrc + '" width="100%" onClick="window.close()"alt="クリックするとウィンドゥを閉じます。"><img src="http://blog-imgs-19.fc2.com/....../kakudai.jpg" onClick="maxImage()" alt="さらに拡大" style="position:absolute; top:10px; left:150px; z-index=2"><\/p>'); newWin.write('<\/body><\/html>'); newWin.close(); } function maxImage(){ newWin = window.open("","","top=10,left=10,width=900,height=675,scrollbars=yes").document; newWin.open(); newWin.write('<html><head><title>拡大画像<\/title><style type="text/css"><!-- body {padding:0;margin:0;text-align:center;} #blank {position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;} --><\/style><\/head>'); newWin.write('<body>'); newWin.write('<p><img src="' + lisrc + '" onClick="window.close() alt="クリックするとウィンドゥを閉じます"><\/p>'); newWin.write('<\/body><\/html>'); newWin.close(); } // --> </script>
- ベストアンサー
- JavaScript
お礼
こんにちは665さん。早速の回答ありがとうございます。 もうまさに希望とおりの動作で大変うれしいです。しかも予想以上に短いスクリプトでびっくりしました。これでクライアントにも鼻高々で見せることができます。 長い間、いたらぬ説明に辛抱強く付き合ってくださり本当に感謝しております。 今回はいろんなことを学ぶことができました。早く自分でもスクリプトを書けるようになりたいものです。 アパレルサイトのリニューアルが始まったばかりでまだ実現できていない問題が山積みですので再びここでお会いするかもしれません。そのときはよろしくお願いいたします。 ありがとうございました。