- ベストアンサー
商品画像のクリックで拡大画像を表示する方法
665の回答
- 665
- ベストアンサー率72% (18/25)
>「商品画像だけではクリックすると拡大写真が現れることがわからない。 >一見しただけでもわかるように商品画像の下に”商品の拡大写真”という >テキストリンクを設け、商品画像をクリックしたときと同じように >商品の拡大写真が現れるようにする」 方法はいくつかありますが、 リンクを次のように、 <a href="#" onclick="return largeImage('picture/EL050301.jpg')">商品の拡大写真</a> そしてlargeImage関数を次のようにすると目的の機能が追加できます。 function largeImage(img){ (img.length >= 0 ? img : img.src).match(/^(.+)\.([^\.]+)$/); var lisrc = RegExp.$1 + "L." + RegExp.$2; objImg = new Image(); objImg.src = lisrc; setTimeout("getSize()", 200); return false; } ちなみに試してみたコードが成功しないのは必要な引数がないからです。 <a href="#" onclick="winOpen('picture/EL050301L.jpg',0,0,'yes');return false;">商品の拡大写真</a> ただこれだとJavaScriptが読めないでもURLがばれかねませんしスクロールバーが常に表示されます。
関連する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さん、ご連絡遅くなりまして申し訳ありません。休み中にもかかわらず早々の対応に頭が下がるばかりです。クライアントに確認するのに時間がかかりお礼を申し上げるのが遅くなって心苦しい限りです。 さてクライアントに見せたところ、また厳しい注文を出されて参っています。できるだけスクリプトを書いてみましたが、引数など肝心なところがわかっていないようで先に進めません。難易度が高すぎるので断ろうかと思ったのですが、最後の望みで投稿しました。容易に解決できないような難易度であれば教えてください。クライアントにも納得してもらいます。お手すきのときにアドバイスいただければうれしいです。 ●同商品の他の画像のサムネイルを載せて他の画像の拡大写真も見られるようにする。 ▼次のサイトの仕様と同じ。商品写真下のALTERNATE VIEWまたはLAREGER VIEWをクリックすると現れる。 http://www2.victoriassecret.com/commerce/application/prodDisplay/?namespace=productDisplay&origin=onlineProductDisplay.jsp&event=display&prnbr=SC-191863&page=1&cgname=OSSLPPYJZZZ&rfnbr=1720 ▼追加する仕様 １．商品写真または”商品の拡大写真のテキスト”をクリックすると拡大写真が別ウインドウで開く。 ２．同ウインドウ内に商品写真のサムネイルと同商品のその他の写真のサムネイルが現れる。 ３．サムネイルをクリックするとそれぞれの拡大写真に入れ替える。 ※２.まで作ってみたのですが根本的に考え方が違っているようです。３.はdreamweaverのswapImageを利用しようとしましたが、先に進めませんでした。 商品写真A0101(拡大写真A0101l) その他の商品写真A0101a,A0101b,A0101c…(拡大写真A0101al,A0101bl,A0101cl) ※拡大写真は末尾にlが付く。 ※その他の写真はオリジナル写真の末尾にa,b,c...と付く。不定数。最大でも6枚程度 ※オリジナル写真1枚だけのときは引数1としてサムネイルはオリジナル写真のみ。その他の写真が2枚あるときは引数3とする。 ▼書いてみたスクリプト <script type="text/javascript"> <!-- var objImg; function winResize(win, img){ var objImg = new Image(); objImg.src = img; win.resizeBy(objImg.width + 116 - 600 , objImg.height > 600 ? 0 : objImg.height - 600); } function winOpen(lisrc, w, h, bar) { var newWin = window.open("","","width=" + (w ? w : "600") + ",height=" + (h ? h : 600) + ",scrollbars=" + bar).document; newWin.open(); newWin.write('<html><head><title>拡大画像</title><style type="text/css"><!-- body {padding:0;margin:0;text-align:left;} #blank {position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;} --></style></head>'); newWin.write('<body oncontextmenu="alert(\'画像コピー禁止\');return false" onselectstart="return false" ondragstart="return false">'); newWin.write('<table><tr><td><img src="blank.gif" alt="" id="blank"><img src="' + lisrc + '" alt=""' + (w && h ? '' : ' onload="opener.winResize(self, this.src)"') + '></td><td width="100" align="center" valign="top" bgcolor="#CCCCCC"><SCRIPT Language="JavaScript"><!-- alternateImage(img,3); //--></SCRIPT></td></tr></table>'); newWin.write('</body></html>'); newWin.close(); } function largeImage(img){ (img.length >= 0 ? img : img.src).match(/^(.+)\.([^\.]+)$/); var lisrca = RegExp.$1 + RegExp.$2; // クリックした写真のサムネイル// var lisrc = RegExp.$1 + "l." + RegExp.$2; // 拡大写真は末尾にlが付く// objImg = new Image(); objImg.src = lisrc; setTimeout("getSize()", 200); return false; } function getSize(){ var bar = ""; var w = objImg.width; var h = objImg.height; if (w) {w += 116;} bar = (h > 600 || !h) ? "yes" : "no"; if(h > 600) { h = 600; } var a=new Array("a","b","c","d","e"); // その他の写真は末尾にa,b,c...が順に付く。その他の画像の拡大写真はal,bl,cl...// function alternateImage(img,n){ document.write('<br><img src="' + lisrca + '" alt=""><br>'); // クリックした写真のサムネイルを表示する。// var i=0; for (i=0;i<n;i++;){ var lisrca = RegExp.$1 + 'a[i]' + RegExp.$2; document.write('<br><img src="' + lisrca + '" alt=""><br>'); } // その他の写真のサムネイルを枚数分表示する。// } winOpen(objImg.src, w, h, bar); } //--> </script>