- ベストアンサー
サムネイル画像をマウスオーバーすると写真が切り替わる方法
htmlでホームページを作っているのですが、大きな写真の横に小さなサムネイル画像（前面、背面など角度の違う写真）を載せて、サムネイルをマウスオーバーすると同一のページで大きな写真が切り替わる仕組みを作りたいのですが、やり方がわかりません。 比較的簡単な方法での作り方を教えてください。宜しくお願いします。
- tukamotodaisuke
- お礼率32% (18/56)
- JavaScript
- 回答数2
- ありがとう数6
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
大きな写真に名前を付けておいて，小さな写真のonMouseOverハンドラで，その名前のソースに，その小さな写真に対応する大きな写真のURLを代入するようにするのはどうでしょう。簡単です。 ＜center＞ ＜img src="large/1.jpg" name="img"＞ ＜hr＞ ＜img src="small/1.jpg" onMouseOver="document.img.src='large/1.jpg'"＞ ＜img src="small/2.jpg" onMouseOver="document.img.src='large/2.jpg'"＞ ＜/center＞
その他の回答 (1)
こんな感じです。 ・ヘッダでサムネイル画像に対応する画像を読み込んでいます。 ・onMouseOver ="update_src(XXX,XXX);" でメイン画像を切り替えています。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <link rel="stylesheet" type="text/css" href="../css/mystyle.css"/> <script type="text/javascript" src="../script/mylibrary.js"></script> <script> var i; var a_images = new Array(3); for (i=0; i<3; i++) { a_images[i] = new Image(323,267); } a_images[0].src ="new/holiday_01.gif"; a_images[1].src = "new/holiday_02.gif"; a_images[2].src = "new/holiday_03.gif"; </script> </head> <body bgproperties="fixed"> <!------------> <!-- 見出し --> <!------------> <div id="page"> <form id="main" name="main"> <center> <table width="748"> <tr> <td width="110"><img src="new/holiday_01_sum.gif" width="109" height="83" onMouseOver ="update_src(document.main.holiday_photo, a_images[0]);"></td> <td width="110"><img src="new/holiday_02_sum.gif" width="109" height="83" onMouseOver ="update_src(document.main.holiday_photo, a_images[1]);"></td> <td width="110"><img src="new/holiday_03_sum.gif" width="109" height="83" onMouseOver ="update_src(document.main.holiday_photo, a_images[2]);"></td> <td rowspan="6" width="506" valign="top"> <p align="center"> <img id="holiday_photo" name="holiday_photo" src="new/holiday_01.gif" width="323" height="267" vspace="10"></td> </tr> </table> <center> <p></p> </form> <p></p> </div> </body> </html> /* ======================================================== mylibrary.js: Last update 2005/09/30 By XXXXXX ----------------------------------------------------------- */ function update_src(objects, img) { objects.src = img.src; }
関連するQ&A
- サムネイルをマウスオーバーすると画像を表示
はじめまして。 サムネイル画像をマウスオーバーすると、特定の場所に画像が表示される方法を教えて頂きたいです。 以下がイメージに近いです。が、サムネイル画像は自分で別に用意したいです。 http://mizuame.sakura.ne.jp/jquery.tgImageChange/demo/index2.html これを実現させる為には、どのjqueryを利用すれば良いのでしょうか？ 色々とググってみたのですが、ぴったりと希望のものが見つからなく…。 あまり知識も無いので、丁寧に説明されているものですと助かります…(すみません。) わかりやすい説明画像も添付しました。 ぜひ教えて頂きたいです。緊急で困っています。よろしくお願い致します！
- 締切済み
- CSS
- サムネイル画像のマウスオーバーアニメーション
いつもお世話になります。 下記サイトの画面下にマウスを移動すると下からサムネイル画像の一覧が出てきますが、マウスオーバーした際に、選択領域が大きくなります。 画像が大きくなっている訳ではなく、画像の見えない領域が見えるような処理になっています。 http://www.intimissimi.it/ これはどういった処理をしているのでしょうか？ マスク処理等を行っていると思いますが、処理方法がわからないのでご教授いただけると幸いです。 尚、Flash CS4でActionScript3.0の環境です。 宜しくお願い申し上げます。
- ベストアンサー
- 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のジオシティーズのサーバーに送るのでしょうか？ 以上よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- マウスオーバーについて
ひとつの画像を区切って、区切ったそれぞれの枠（セルでもいい）でマウスオーバーを発生させるのってどうやるんですか。 よくホームページとかで見る、上にあるメニューです。 それを、２枚の画像を使ってやりたいんですけど・・・ また、タグが乗っている 詳しく説明されているホームページ輪ありませんか。 極力スタイルシートは使いたくないです。 また、ついでですが、スタイルシートを使わないでtableの、横だけを消す方法（透明にするか、たてと横で別のいろを指定します）ってないですか。
- 締切済み
- ネットトラブル
- マウスオーバーで画像の一部を切り替え html
html初心者です。 ホームページで写真の画像の中のある物体にマウスカーソルを合わせるとその画像の物体の部分が違う画像に切り替わり、他のページにリンクするようにしたいのですがどのような方法があるでしょうか？ ちなみに切り替えたい部分は7つあります。
- ベストアンサー
- HTML
- マウスオーバーで拡大画像をマウスの下に表示
ホームページのサムネイル画像にマウスを合わせると、合わせたマウスの下にサムネイル画像が拡大（拡大画像は別に用意してあります）して表示されるようなhtmlの記載はありますでしょうか？宜しくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- サムネイルをマウスオーバーすると拡大画像を表示したい
ここに質問していいのか不安ですが・・・ よろしくお願いします。 http://www.photos.jp/browse.phtml?f=s&c=0 このページのように、サムネイル画像にマウスを乗せると 拡大された画像が表示されるようにしたいのですが・・・・ どうすればいいでしょうか？ 抽象的な質問の仕方で恐縮ですが・・・
- 締切済み
- Java
- HTML上の画像にマウスオーバーして、同HTML内にswfを表示させたい
HTMLページ内のサムネイル画像にマウスオーバーして大きい画像を表示させるJavaScriptがありますが、そういうイメージでswfの表示ができないでしょうか。 マウスオーバーじゃなくて、クリックでもいいのですが、ポップアップウインドウや別ページに表示させるのではなく、サムネイル画像をクリックすると、同一ページのお決まりの場所でswfムービーを表示させたいのです。 表示させるムービーは、音声が流れたり、swf内で数ページクリックして内容が見れるものです。誰か、ご存知の方、いらっしゃいませんか？よろしくお願いします。
- ベストアンサー
- Flash
- サムネイルをマウスオーバーで、所定の場所に大きな画像を表示したい
↓ここのページを参考にアルバムのページを作ってます。 http://www14.plala.or.jp/sugachuu/JavaScript/k06.html で、一番上にタイトルいれたかったのでタイトル画像を置いたらおかしくなり サムネイルにマウスを持ってくとタイトル画像のスペースに 拡大画像が表示されるようになってしまいました。。 タイトルは上記ページのソースの<body>タグのはじめに貼り付けました。 正しく表示させるためにはどのようにしたら良いでしょうか？ また、これとは違った方法がありましたらぜひ教えてください><
- ベストアンサー
- JavaScript
- サムネイル画像がうまくいきません
ホームページビルダー６でHPを作成しているのですが サムネイル画像をクリックすると写真は表示されずに gooのHP画面が出てきます。対処法を教えてください 因みに写真のページが３ページあり、１、２ページはちゃんと出来るのですが ３ページ目だけ？？？な状態です 全て同じように作ったはずなのですが・・・ よろしくお願いします。
- ベストアンサー
- HTML
お礼
ありがとうございました。 簡単な設定で出来るのでとても参考になりました！