- ベストアンサー
プログの画像について
プログにＩＭＧを使って画像を貼ると拡大されて表示されてしまいます。サムネイル表示する方法は？
- sentyo
- お礼率35% (6/17)
- その他（インターネット・Webサービス）
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
関連するQ&A
- サムネイル画像の拡大
サムネイル画像がオンマウス時に拡大するようにしたいと思い、色々調べました。 画像をtableタグ（表！？）の中に表示させようとすると、デザインが崩れるものばかりでした。 ようやく下記のサイトに辿り着き、デザインも崩さずに画像を拡大させることが出来たのですが・・・・・・ 複数の画像を同じように拡大できるようにしようとした所、拡大した画像が他の画像（拡大するように設定しているサムネイル画像）の下に表示されてしまいます。 これをサムネイル画像の下にならないようにするにはどうしたら良いのでしょうか？？？ また、この方法以外でも、比較的簡単でデザインを崩さない拡大のやり方があれば教えて下さい。 お願いします。 私が試したサイオトは下記のものです↓ http://tonecontrol.mods.jp/memo/css_thumbnail.html
- ベストアンサー
- HTML
- オンマウスで画像とテキストの指定位置表示について
サムネイル画像にオンマウスにより、拡大画像が表示されるようにしています。 TABLEを使い左のTDにサムネイル羅列、右にオンマウス時の拡大画像表示です。 この拡大画像表示の際、画像の下または指定位置に「画像ごとのコメント」を表示したいのですが、当方scriptの知識がなくソースを借用しているためカスタマイズがわかりません。 <script type="text/javascript"> <!-- function over( name ) { var e = document.getElementById( "gazou" ); e.innerHTML = '<img src="' + name + '.JPG">'; e.style.position = "relative"; e.style.top = 000; e.style.left = 000; } function out() { var e = document.getElementById( "gazou" ); e.innerHTML = ''; } //--> </script> ------------------ ※画像（サムネイル表示部分） <img src="light/img/DSC_0945_thumb.jpg" target=_top onmouseover="over('light/img/DSC_0945');" onmouseout="out(light/img/DSC_1310);"> ※拡大画像表示部分に <span id="gazou"></span> を記述してあります。 ----------------------- 書き加える部分について教えていただければと思います。 なお、サムネイルがたくさんあって縦長になると下に移動した場合、画像表示位置が上にかくれてしまうので、サムネイルの移動といっしょに表示位置が常に画面内に入るようにできるとなおいいのですが。 （現在はスクロールしない範囲内のサムネイル数にしています）
- ベストアンサー
- JavaScript
- flashの画像読み込みで
いつもお世話になっています。 ありがとうございます。 flash8で質問です。 空のＭＣをつくり そこへ外部img(サムネイル)を横に5つ読み込ませるには どうやればいいのでしょうか。 attachMovieは違うのですよね？ やりたいことは、 ・画像は全部外部から。 ・サムネイルを押すと画面中央にサムネイルに対応する画像が拡大表示。 ・拡大された画像を押すと指定されたＵＲＬにジャンプ。 obj={Lightimg:1.jpg、url：ｘｘｘ、thum：thum1.jpg} このような形で作りたいのですが、 初心者なので悩んでいます。 すみませんが教えてください；；
- ベストアンサー
- Flash
- 画像の先読み
画像の先読み 拡大画像の表示場所とサムネイルの表示場所がありサムネイルをクリックすると拡大画像の場所にクリックしたサムネイルが拡大表示されるものを作っています。 以下のソースで試しており動作は問題ないのですが動作がぎこちないです。 具体的にはサムネイルをクリックすると拡大画像の場所がフェードアウトしフェードインします。 ※ここまでは正常 フェードインしたかと思いきやクリックする前の画像が1秒程表示されその後クリックした画像に切り替わる感じでフェードの効果が全く無意味になってしまいます^^; 事情があり画像の出力をphpで行っているのが原因かと思ったのですが単純にキャッシュの問題かとも思い画像の先読みなどを組み込めればいいのですがどのようにすれば可能でしょうか？ [html] <p id="imgMain"><img src="resize.php?file=/imgimg01.jpg" alt="" id="target" /></p> <ul id="gallery"> <li><a href="resize.php?file=/img/img01.jpg" ><img src="resize.php?file=/img/img01.jpg&x=173" alt="" /></a></li> <li><a href="resize.php?file=/img/img02.jpg"><img src="resize.php?file=/img/img02.jpg&x=173" alt="" /></a></li> <li><a href="resize.php?file=/img/img03.jpg"><img src="resize.php?file=/img/img03.jpg&x=173" alt="" /></a></li> </ul> [js] $(document).ready( function() { $("#gallery a img") .fadeTo(1, 1) .hover( function() { $(this).fadeTo(200, 0.5); }, function() { $(this).fadeTo(500, 1); } ) $("#gallery a").click(function() { var changeSrc = $(this).attr("href"); $("#target").fadeOut( "slow", function() { $(this).attr("src", changeSrc); $(this).fadeIn(); } ); return false; }); });
- ベストアンサー
- JavaScript
- サムネイルクリックで別ウィンドウに拡大画像表示
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
- サムネイル画像をオンマウスで拡大表示してそれぞれの画像にリンクを指定する記述について
お世話になります。 JavaScript初心者ですが、フリーソースなどを見つつ勉強しております。 下記のようなhtmlに【js00】と【js01】を読み込んでサムネイル画像をオンマウス時に上部に拡大表示させているのですが、サムネイル画像と拡大表示画像の両方に指定リンクをつけようとしています。 記述４の【js02】のような画像をランダム表示して指定リンクをつけるScriptは発見できたのですが、これを記述１+２+３と組み合わせられず、作業が進まなくなってしまいました…。 フリーソースを応用しようとしすぎて、遠回りな記述になっているかもしれませんが、もし分かる方がいらっしゃったら教えて頂けないでしょうか？ ■記述１(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> ■記述２(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]; } ■記述３(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>" ) ; } ■記述４(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
- オンマウスでの拡大画像の位置指定
サムネイル画像にオンマウスした時の拡大画像の位置指定がよくわかりません。今の状態だとマウスを乗せた時に拡大画像がサムネイル画像とかぶってしまい、他のサムネイルが隠れてしまいます。できたら、拡大画像をサムネイル画像かぶらせず、左側に表示させたいのですがどう指定したらよいのでしょうか？ついでに拡大画像を右側、上、下に指定したい時の表示方法もあわせてアドバイスいただけたらありがたいです。 それと、サムネイル画像の下にちょっとしたコメントを記載したい時はどうしたら良いのでしょうか？どうかよろしくお願いします。 <script> var src1="image01.jpg" var src2="image1.jpg" var src3="image02.jpg" var src4="image2.jpg" var src5="image03.jpg" var src6="image3.jpg" var src7="image04.jpg" var src8="image4.jpg" </script> <p align="center"> <img src="image01.jpg" onmouseover="this.src=src2" onmouseout="this.src=src1"> <br> <br> <img src="image02.jpg" onmouseover="this.src=src4" onmouseout="this.src=src3"> <br> <br> <img src="image03.jpg" onmouseover="this.src=src6" onmouseout="this.src=src5"> <br> <br> <img src="image04.jpg" onmouseover="this.src=src8" onmouseout="this.src=src7"> <br> </p>
- 締切済み
- CSS
- jqueryサブウィンドウにて画像切替サブ画像表示
質問お願いします。 元ページのサムネイル画像をクリックすると サブウィンドウが開き、この中でクリックした先ほどサムネイルの拡大画像を表示、他のサムネイル画像も表示し、サムネイルをクリックで拡大画像を切り替え、それぞれの画像に応じたサブ画像も表示させたいと思っています。 一番はクリックデータをサブウィンドウにもっていく方法がわかりません。 イメージで元ページ内での切替をやってみました <style> li img{width:100px;height:100px;} </style> ----jquery----- <script type="text/javascript"> $(function(){ $('li img').click( function(){ $('#main img').attr('src',$(this).attr('src')); $('#sub').text($(this).attr('title')); var postfix = '_on'; var src = $(this).attr('src'); var src_on = src.substr(0, src.lastIndexOf('.')) + postfix + src.substring(src.lastIndexOf('.')); $('#sub2 img').attr('src',src_on); }); }); </script> ---html---- <ul> <li><img src="red.jpg" title="赤"></li> <li><img src="blue.jpg" title="青"></li> <li><img src="winter.jpg" title="冬"></li> <li><img src="green.jpg" title="緑"></li> </ul> <div id="main"><img src="red.jpg" id="mainimg"></div> <p id="sub">赤</p> <p id="sub2"><img src="red_on.jpg"></p> 質問が分かりづらいかもしれませんが、よろしくお願いします。
- ベストアンサー
- JavaScript
- 複数の画像切り替えと拡大表示
ウェブサイトを作っています。 ２列のテーブルで、上列に画像（サムネイル）、下列に「拡大」ボタン、「一つ戻る」ボタン、「一つ進む」ボタンがあります。行いたい動作は、 ＊５つの画像（サムネイル）を、「戻る」「進む」ボタンのクリックで順番に切り替えて表示させる ＊「拡大」ボタンを押すと、そのときに表示されている画像（サムネイル）の拡大版が、別ウィンドウで表示される どのように記述すればよろしいでしょうか。よろしければアドバイスをお願いいたします。
- 締切済み
- Java
- サムネイル画像のことで
初めまして。ホームページにあるサムネイル画像がいきなり拡大表示されるようになり動かなくました。一つのホームページだけだったのですがいつの間にか他のホームページでも拡大表示されるようになりました。（拡大表示されない所も有ります）どうしたらいいかわかりません。よろしくお願いします。｛動かなくなるのは一つだけ今の所｝
- ベストアンサー
- その他（インターネット・Webサービス）
