• 締切済み

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

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

みんなの回答

  • assault852
  • ベストアンサー率48% (1364/2797)
回答No.1

JavaScriptをお勉強なさるか、Dreamweaverなどの高機能ソフトをお使いください。

  1. カテゴリ
  2. パソコン・スマートフォン
  3. Windows
  4. Windows XP

関連するQ&A

  • マウスオーバーで拡大画像をマウスの下に表示

    ホームページのサムネイル画像にマウスを合わせると、合わせたマウスの下にサムネイル画像が拡大（拡大画像は別に用意してあります）して表示されるようなhtmlの記載はありますでしょうか？宜しくお願いします。

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

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

  • サムネイル画像の拡大

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

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

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

  • サムネイルをマウスオーバーすると拡大画像を表示したい

    ここに質問していいのか不安ですが・・・ よろしくお願いします。 http://www.photos.jp/browse.phtml?f=s&c=0 このページのように、サムネイル画像にマウスを乗せると 拡大された画像が表示されるようにしたいのですが・・・・ どうすればいいでしょうか？ 抽象的な質問の仕方で恐縮ですが・・・

  • サムネイル画像にマウスを合わせて画像と説明をチェンジ

    javaスクリプトで サムネイル画像にマウスを合わせて 画像と説明をチェンジするには どうしたらいいのでしょうか？ 簡単に言うと以下のURLのフォームでないバージョンにしたいのですが このスクリプトをいろいろと変えてみてもできませんでした。 http://www16.big.or.jp/~ogura1/java_scr/Photo_mess/Photo_mess.html 私どうもjavaスクリプトが苦手なもので 似たような関連記事はほとんど見たのですが もう、さっぱりお手上げです。 参考になるHPか作り方を教えてください。 どうか宜しくお願いします。

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

    お世話になります。 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"　で開きたい 以上がご質問内容です。 初心者で大変恐縮ですが、どうぞよろしくお願いいたします。

  • flashのsuzukaで画像を拡大するボタンを作りたい

    いろいろと試行錯誤を繰り返し、suzuka講座のサイトなど見てみましたが、挫折・・皆様のお知恵をお貸しください。 フリーのflash作成ソフトのsuzukaでサムネイル画像をクリックすると その画像が拡大するflashを作っています。 画像が拡大するスプライトを作成し、ボタンの中に組み込んでみたのですが、 マウスをクリックすると拡大するのですが、放すと元に戻ってしまいます。 放した後も、もう一回くりっくするまで拡大させたままにしたいのですが、どうすればよいのでしょう・・。

  • マウスオーバーして画像を入れ替えたい

    YahooのジオシティーズでHPを作成していますが、教えていただきたいことが２つあります。 １.javaスクリプトを使ってマウスオーバー、マウスアウトした時に写真を入替えたいと思っていますが、全くの初心者でどこにタグを入れていいのかわかりません。 どなたか下記ＵＲＬのページの写真(1)にマウスオーバーした場合に写真(2)に変わり、マウスアウトすると写真(1)に戻るよう、下記URLのソースをすぐに使えるように手直ししていただけませんか？http://sky.geocities.jp/hokuto5131/test.html ２．Yahooのジオシティーズでマウスオーバーして画像を入替えるHPを見てみると、入替える画像のURLはimg.1のようになっていますが、私がYahooのジオシティーズに画像データを送ると上記のURLのソースのように『http://sky.geocities.jp/hokuto5131/～』になってしまいます。なぜでしょうか？またそのページに貼り付けていない画像データをどうやってYahooのジオシティーズのサーバーに送るのでしょうか？ 以上よろしくお願いします。

  • オンマウスでの拡大画像の位置指定

    サムネイル画像にオンマウスした時の拡大画像の位置指定がよくわかりません。今の状態だとマウスを乗せた時に拡大画像がサムネイル画像とかぶってしまい、他のサムネイルが隠れてしまいます。できたら、拡大画像をサムネイル画像かぶらせず、左側に表示させたいのですがどう指定したらよいのでしょうか？ついでに拡大画像を右側、上、下に指定したい時の表示方法もあわせてアドバイスいただけたらありがたいです。 それと、サムネイル画像の下にちょっとしたコメントを記載したい時はどうしたら良いのでしょうか？どうかよろしくお願いします。 <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

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する