- ベストアンサー
商品画像のクリックで拡大画像を表示する方法
665の回答
- 665
- ベストアンサー率72% (18/25)
>追加する仕様 多分いろいろと書き換えるか前とは完全に別なものになりそうなので次の2つを説明してください。 1.今回も画像サイズに対応してウィンドウサイズ変化させるのか？ 2.もし変化させるならサムネイル画像のスペースが必要となるが、何を基準にウィンドウサイズを決めるのか？ いずれにせよ2つのページ（通常のページAと別ウィンドウのページB）を作った方が簡単でしょう。 それぞれの役割としては、 ページAはページBを開き、どのサムネイルをクリックしたかをページBに伝える（location.searchを使って値の受け渡しをする）。 ページBはよくあるサムネイルをクリックして同じページに表示するスクリプトを入れる。
関連する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さん、早々のお返事ありがとうございます。面倒な質問におつきあいいただき大変感謝しています。 ＞前とは完全に別なものになりそうなので次の2つを説明してください。 うーんそうなんですか。思っていた以上にやっかいな代物なんですね。まずは指摘された２点を考えてみました。 ＞1.今回も画像サイズに対応してウィンドウサイズ変化させるのか？ すみません。これをはっきりしておかなければならなかったですね。 これは最初に開いたウインドウサイズの横幅をそのまま持続したいと考えています。理由は２つあってサムネイルをクリックするたびにウインドウサイズが変わると目がチカチカしてしまうのと、その他の写真の横幅が大体同じくらいのサイズのためです。 IEやFireFoxの場合ウインドウ枠右下の///となっている場所をドラッグするとウインドウサイズが自由に可変するのでユーザにはこれでサイズを合わせてもらえばよいと思います。 ただよく違いがわからないのですが、ウインドウ枠右下に///が出ない場合があってその場合はウインドウサイズを可変することができないんですね。今気が付きました。 この違いはどうして生まれるのでしょうか？スクロールバーを表示しないようにすることと何か関係があるのでしょうか？ ＞2.もし変化させるならサムネイル画像のスペースが必要となるが、何を基準にウィンドウサイズを決めるのか？ 説明不足で申し訳ありませんでした。 ウインドウサイズを決定するのは、＜左＞最初に読み込んだ画像の横幅+＜右＞サムネイルを置くスペース（１００ｐｘ）を考えています。 ■別ウインドウ ＜左＞ ＜右＞ ┌─────┬─┐□..サムネイル(末尾に"a,b,c…"+"s") │拡大画像 │□│A0101s.jpg onclick→＜左＞A0101l.jpg │A0101l.jpg │□│A0101as.jpg onclick→＜左＞A0101al.jpg │ │□│A0101bs.jpg onclick→＜左＞A0101bl.jpg │ │□│A0101cs.jpg onclick→＜左＞A0101cl.jpg └─────┴─┘ ＞いずれにせよ2つのページ（通常のページAと別ウィンドウのページB）を作った方が簡単でしょう。 すみません。ここがよくわかりませんでした。▼次であっていますでしょうか？ ■通常ページA ┌───────┐ │商品画像 │ │A0101.jpg │ ←画像をクリックして │ │ ↓別ウインドウBを開く │ │ onclick='location.search="A0101"'？ └───────┘ ■別ウインドウB ┌─────┬─┐ │拡大画像 │□│ │A0101l.jpg │□│ │ │□│ │ │□│ └─────┴─┘ document.write("<tr><td>A0101l.jpg></td> <td><img src=A0101s.jpg><br><img src=A0101as.jpg><br><img src=A0101bs.jpg><br><img src=A0101cs.jpg><br></td></tr>"); 以上のような説明でうまく伝わりましたでしょうか？ イメージと同じものはこの前に紹介したvictoria secretのページです。 何かと説明不十分で申し訳ありませんが、お手すきのときに教えていただければ何よりです。よろしくお願いいたします。