サムネイル画像にマウスカーソルが触れると拡大画像になる~その応用について

このQ&Aのポイント
  • JavaScript初心者です。サムネイル画像にマウスカーソルが触れると拡大画像になる方法について教えてください。
  • また、同じHTML内で複数のグループを並列に作成してそれぞれに拡大画像を表示することは可能でしょうか?
  • 初心者でわかりにくい表現かもしれませんが、この応用が可能な場合はどのように記述すれば良いのか教えていただけますか?
回答を見る
  • ベストアンサー

サムネイル画像にマウスカーソルが触れると拡大画像になる~その応用について

JavaScript初心者です。どうぞよろしくお願いします。 サムネイルにオンマウスすると拡大画像が現われるよう「myBigImage」を使い記述し、これは実行できました。 そこで質問なのですが、同じ一つのhtml内で、下記のように二つのプログラムを並列させる事は可能でしょうか。 例) A(myBigImage)、A1(サムネイルの1)、A2(サムネイルの2) B(myBigImage)、B1(サムネイルの1)、B2(サムネイルの2) ※「サムネイルにオンマウスすると拡大画像が現われる」、  それを2グループ表示させたい、という事です。  例えば2つ目のグループ、Bを(myBigImage2)などとして  実行する事はできるのでしょうか。 初心者につきわかりにくい表現になってしまっているとしたら申し訳ありません。 この応用ができるかどうか、また万一可能な場合はどのように記述すればいいのか、教えていただけると大変助かります。 何とぞよろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.2

myBigImage('拡大画像','表示先'); というような関数にすればイイと思います。 繰り返しになりますが、できましたら、現在のプログラム(HTML+SCRIPT)を補足下さい。

srysry
質問者

お礼

度々ご返答いただき、ありがとうございます。 あれこれ苦慮の結果、ようやく表示する事ができました。 JavaScriptファイルの方に(1)のプログラムを、 htmlファイルの方には(2)のように記述しました。 (1) function myChgPic(myPicURL){ document.images["myBigImage"].src = myPicURL; } function myChgPic2(myPicURL){ document.images["myBigImage2"].src = myPicURL; } (2) <img src="imgs/○○○.jpg" border="0" name="myBigImage" galleryimg="no">  ・  ・  ・ <img src="imgs/×××.jpg" border="0" name="myBigImage2" galleryimg="no"> 実は企業のサイトを修正している都合上、ソースを掲載しづらく(どこからどこまで掲載すれば良いのか分からない初心者のため)補足をする事ができませんでした。 的を得ない質問に対し、ご丁寧にご返答をいただき本当にありがとうございました。こちらのサイトで初めて質問をさせていただきましたが、BLUEPIXYさんのおかげでとても心強い気持ちをいただきました。本当にありがとうございました。

その他の回答 (1)

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.1

1つのサムネイルにmouseover すると2つの場所に画像が現れるという意味ですか? あるいは、 1つのサムネイルにmouseover すると2つの拡大画像を表示するプログラムを実行するという意味ですか? できましたら、 現在のプログラムと こういうふうにしたいという理想のプログラムを 補足してください。

srysry
質問者

補足

ご返答をいただきありがとうございます。 説明が足りないようで申し訳ありません。 <理想のプログラム>としては... 1つのサムネイル(A1,A2)にmouseoverすると1つの場所(A)に画像が現われる。 (同じhtml内ではありますが)それとはまた全く別の場所の1つのサムネイル(B1,B2)にmouseoverすると1つの場所(B)に画像が現われる。 <現在のプログラム>としては... 上記の理想通りにしたいのですが、A1,A2そしてB1,B2どのサムネイルにmouseoverしても、すべて1つの場所(A)に画像が現われてしまう。(Bには表示されない) という感じです。 つまり、「1つのサムネイルにmouseoverすると2つの拡大画像が現われる」のではなく、「Aの場所にはA1,A2のサムネイル、Bの場所にはB1,B2のサムネイルが作用して、それぞれに拡大画像が現われる」という事になります。 もし分かり難い表現でしたら申し訳ありません。

関連するQ&A

  • サムネイル画像の拡大

    サムネイル画像がオンマウス時に拡大するようにしたいと思い、色々調べました。 画像をtableタグ(表!?)の中に表示させようとすると、デザインが崩れるものばかりでした。 ようやく下記のサイトに辿り着き、デザインも崩さずに画像を拡大させることが出来たのですが・・・・・・ 複数の画像を同じように拡大できるようにしようとした所、拡大した画像が他の画像(拡大するように設定しているサムネイル画像)の下に表示されてしまいます。 これをサムネイル画像の下にならないようにするにはどうしたら良いのでしょうか??? また、この方法以外でも、比較的簡単でデザインを崩さない拡大のやり方があれば教えて下さい。 お願いします。 私が試したサイオトは下記のものです↓ http://tonecontrol.mods.jp/memo/css_thumbnail.html

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

    お世話になります。 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初心者です。マウスオーバーの記述について教えてください。 3つのリンクボタンがあるのですが、このうち、一つだけ画像が変わるようにしたいと思っています。 ※リンク先は、3つもと同じです。 例:A・B・Cのリンク画像 A~Cのどれをオンマウスしても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で小さくしています。 このような形は実現可能でしょうか? よろしくお願いします。

  • CSSだけでサムネイルから拡大画像チェンジ

    1ヶ所の指定場所に拡大画像が表示された状態で、下段にいくつかのサムネイルを設置し、マウスをそのサムネイルに乗せると拡大画像がチェンジして、マウスを外すと元画像に戻るみたいな事をCSSだけで表現したいのですが可能でしょうか?感じとしては http://curucuru-select.com/?pid=7429014 のCSS版みたいなものをのぞんでいるのですが・・・多分このサイトはjavascriptでやってるみたいなんですけど・・できたら、サンプルソースをいただけるとありがたいのですが・・どうかよろしくお願いします。

    • 締切済み
    • CSS
  • サムネイルをクリックすると画像が拡大表示されるようにするには?

    下記のページの「SAMPLE」を、サムネイルをクリックすると、選択した画像が真ん中の段の陰付き白枠の中に拡大表示されるようにしたいです。 インラインフレームは使いたくないのでJavaScriptでできないかと思っています。 ちなみに当方はJavaScript初心者です。 白枠はcssで#subcon2というボックスの背景に設定しています。 画像については、サムネイルの画像はs01.jpg、s02.jpg・・・という名前で、拡大表示用の画像はサムネイルの名前からsを取って、01.jpg、02.jpg・・・と、名前を付けて、このhtmlと同じ階層にある「images」フォルダの中の「sample_nail」フォルダに入ってます。 この情報で足りますか? どのようにすればいいでしょうか?よろしくお願い致します。 http://www.ac.auone-net.jp/~mrs/sample.html

  • 小さい画像にマウスを合わせると小さい画像の右上(右下)に拡大画像が表示される

    ホームページ作成で教えて欲しいのですが、小さなマンションのサムネイル画像の上にマウスを持って行くと、大きな画像がサムネイル画像の右下か右上に表示されるような仕組みを作りたいのですが、どのようにしたらいいのでしょうか?ヤフー不動産などで実際にあるのですが、小さな間取り図にオンマウスで拡大間取りが見れるようにしたいのです。 javaスクリプトで作成しているのでしょうか?javaは当方分からないのですが、アドバイスをお願い致します。

  • Flashで表示されたサムネイルをJavaScriptで拡大表示したい

    HTMLはある程度わかるようになってきただけのJavaScript初心者なのですが、HP制作の途中、Flashを使っていて分からないことが出てきました。 教えていただけるとうれしいです。 Flashのメニューを使っていて、そのメニューはリンク先がカスタマイズ可能です。 リンク先の指定は、テキストファイルの中に記述されている、 「 &url5=http://www.xxxxx.xxx.xx/& 」という場所で指定することになっています。 フォトギャラリーの写真のサムネイルをメニュー項目にして、Flashメニューでサムネイル選択したいと思っているのですが、そのサムネイルをクリックしたときに、同じページの別のテーブルに、そのサムネイルの大きな画像を表示させるということをしたいのですが、できるのでしょうか。 もしできるのなら、教えてほしいです。 Flashメニューでないサムネイルをクリックして拡大画像を表示ということはJavaScriptでできるのですが、Flashメニューで、となると不可能なのでしょうか。 よろしくお願いいたします。

  • サムネイル拡大表示

    サムネイルの画像ですが、見る側のパソコンの環境によって拡大表示されないような事ってあるのでしょうか? ブログに貼り付けた画像を「もっと大きな画像で観たい」との要望がたまにありますもので どんなものかと、何方かご教授をお願い致します。

  • マウスを乗せると、画像ファイルを拡大して表示してくれるJavaScriptを探しています

    マウスを乗せると、画像ファイルを拡大して表示してくれるJavaScriptってないですかね? ■はじめは、サムネイルのような小さい画像を表示。 ■マウスを乗せると少し大きくなる。 ■もっと、大きい画像が見たい場合はクリックして見ることができる。 こんな使用を考えているのですが、私の力では、一から書くことなど到底できそうにありません。 どなたか、こういったことを作ったページや参考になるページなどありましたら教えてください。 宜しくお願い致します。

専門家に質問してみよう