- ベストアンサー
サムネイルにマウスで画像表示
HTML勉強中の者です。 5つのサムネイルにマウスをのせると、同一ページの同じ場所（1箇所）にそれぞれの画像を表示させ、マウスが離れると表示を消す方法---(1) とそのまま表示する方法---(2)を教えてください。 （HTMLで可能であればその方が良いのですが、自分が勉強した範囲ではできません。別HTMLリンクならわかりますが・・・） Javascriptなら可能でしょうか？ よろしくお願いいたします。
- epon
- お礼率72% (29/40)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
サンプルを作ってみました。 <script type="text/javascript"> <!-- //あらかじめイメージを読み込んでおく var imgs = new Array; var i; for(i=1;i<=3;i++){ imgs[i] = new Image(); imgs[i].src = i.toString() + ".gif"; } function disp(imgNo){ document.getElementById("DISP_IMG").src=imgs[imgNo].src; } function restore(){ document.getElementById("DISP_IMG").src="Blank.gif"; } //--> </script> </head> <body> <img src="1.jpg" onmouseover="disp(1)" onmouseout="restore()"> <img src="2.jpg" onmouseover="disp(2)" onmouseout="restore()"> <img src="3.jpg" onmouseover="disp(3)" onmouseout="restore()"> <hr> <img ID="DISP_IMG" src="Blank.gif"> ---------------------------------------- ファイル名の扱いを簡単にするために数字にしていますが、本来、対応がとれれば普通のファイル名で良いです。 あらかじめイメージを読み込んでおく処理は、別に無くても良いですが、画像の大きさで表示の切り替えに時間がかかるので、あらかじめ読み込んでいます。 (2)マウスが離れてもそのまま表示する場合は、onmouseoverの部分を単に削除すればいいです。
その他の回答 (1)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
#1の(2)で onmouseoverを削除するは、 onmouseoutを削除するの間違いです。
関連するQ&A
- HTML上の画像にマウスオーバーして、同HTML内にswfを表示させたい
HTMLページ内のサムネイル画像にマウスオーバーして大きい画像を表示させるJavaScriptがありますが、そういうイメージでswfの表示ができないでしょうか。 マウスオーバーじゃなくて、クリックでもいいのですが、ポップアップウインドウや別ページに表示させるのではなく、サムネイル画像をクリックすると、同一ページのお決まりの場所でswfムービーを表示させたいのです。 表示させるムービーは、音声が流れたり、swf内で数ページクリックして内容が見れるものです。誰か、ご存知の方、いらっしゃいませんか？よろしくお願いします。
- ベストアンサー
- Flash
- サムネイルをマウスオーバーで、所定の場所に大きな画像を表示したい
↓ここのページを参考にアルバムのページを作ってます。 http://www14.plala.or.jp/sugachuu/JavaScript/k06.html で、一番上にタイトルいれたかったのでタイトル画像を置いたらおかしくなり サムネイルにマウスを持ってくとタイトル画像のスペースに 拡大画像が表示されるようになってしまいました。。 タイトルは上記ページのソースの<body>タグのはじめに貼り付けました。 正しく表示させるためにはどのようにしたら良いでしょうか？ また、これとは違った方法がありましたらぜひ教えてください><
- ベストアンサー
- JavaScript
- マウスオーバーイベントで画像表示
こんにちわ。 JavaScriptについて質問があります。 あるリンクの上にマウスを重ねると、テーブルのある場所にイメージを表示させることはJavaScriptで可能でしょうか？ やりたい事としては、リンク部分にマウスを重ねると、そのリンクの説明を記した画像をテーブル中に表示させたいと思ってます。 ネットを探しまくったのですが、参考になりそうなページが無かったので質問してみました。 参考になるページでも構いませんので、知っている方がいらっしゃったら宜しくお願いします。
- ベストアンサー
- JavaScript
- Flashで表示されたサムネイルをJavaScriptで拡大表示したい
HTMLはある程度わかるようになってきただけのJavaScript初心者なのですが、HP制作の途中、Flashを使っていて分からないことが出てきました。 教えていただけるとうれしいです。 Flashのメニューを使っていて、そのメニューはリンク先がカスタマイズ可能です。 リンク先の指定は、テキストファイルの中に記述されている、 「 &url5=http://www.xxxxx.xxx.xx/& 」という場所で指定することになっています。 フォトギャラリーの写真のサムネイルをメニュー項目にして、Flashメニューでサムネイル選択したいと思っているのですが、そのサムネイルをクリックしたときに、同じページの別のテーブルに、そのサムネイルの大きな画像を表示させるということをしたいのですが、できるのでしょうか。 もしできるのなら、教えてほしいです。 Flashメニューでないサムネイルをクリックして拡大画像を表示ということはJavaScriptでできるのですが、Flashメニューで、となると不可能なのでしょうか。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- サムネイルの自動表示
アンカータグをマウスオーバーすると、ツールチップが表示され、リンク先の画像と説明文章が表示されるようにしたいと思います。 ツールチップ表示自体はJAVASCRIPTで実現できたのですが、 リンク先の画像を自動的に読み取り、サムネイル表示するようにしたいです。 よいやり方はございますでしょうか？
- 締切済み
- JavaScript
- マウスを乗せると、画像ファイルを拡大して表示してくれるJavaScriptを探しています
マウスを乗せると、画像ファイルを拡大して表示してくれるJavaScriptってないですかね？ ■はじめは、サムネイルのような小さい画像を表示。 ■マウスを乗せると少し大きくなる。 ■もっと、大きい画像が見たい場合はクリックして見ることができる。 こんな使用を考えているのですが、私の力では、一から書くことなど到底できそうにありません。 どなたか、こういったことを作ったページや参考になるページなどありましたら教えてください。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- サムネイルをマウスオーバーすると画像を表示
はじめまして。 サムネイル画像をマウスオーバーすると、特定の場所に画像が表示される方法を教えて頂きたいです。 以下がイメージに近いです。が、サムネイル画像は自分で別に用意したいです。 http://mizuame.sakura.ne.jp/jquery.tgImageChange/demo/index2.html これを実現させる為には、どのjqueryを利用すれば良いのでしょうか？ 色々とググってみたのですが、ぴったりと希望のものが見つからなく…。 あまり知識も無いので、丁寧に説明されているものですと助かります…(すみません。) わかりやすい説明画像も添付しました。 ぜひ教えて頂きたいです。緊急で困っています。よろしくお願い致します！
- 締切済み
- CSS
- CSSだけでサムネイルから拡大画像チェンジ
1ヶ所の指定場所に拡大画像が表示された状態で、下段にいくつかのサムネイルを設置し、マウスをそのサムネイルに乗せると拡大画像がチェンジして、マウスを外すと元画像に戻るみたいな事をCSSだけで表現したいのですが可能でしょうか？感じとしては http://curucuru-select.com/?pid=7429014 のCSS版みたいなものをのぞんでいるのですが・・・多分このサイトはjavascriptでやってるみたいなんですけど・・できたら、サンプルソースをいただけるとありがたいのですが・・どうかよろしくお願いします。
- 締切済み
- CSS
- サムネイル画像リンク先のHTMLページ内にある画像を、サムネイル状態から一括保存するには？
沢山のサムネイル画像が表示されているWebサイトにて、 そのサムネイル画像をクリックしたリンク先のページに、大きな元画像がある場合でも、 サムネイルページから元画像を一括ダウンロードできるツールかFireFoxの拡張機能はありませんでしょうか？ 例えば… 読売オンラインのフォトニュース http://www.yomiuri.co.jp/photonews/ こちらを開くと、画像のサムネイルが表示され、個々の画像をクリックするとその先のHTMLページに元の大きな画像が展開されます。 このサムネイル状態から、元の大きな画像を一括で保存したいのです。 サムネイル画像のリンク先が画像ファイルでしたらFlashget等で簡単に保存できるのですが、リンク先のHTML内にある画像なので、なかなかツールが見つからず困っております。 どうぞ宜しくお願い致します。
- 締切済み
- フリーウェア・フリーソフト
- サムネイルをマウスオーバー時に手のアイコンに変わってほしいのですが。。
サムネイルをマウスオーバー時に手のアイコンに変わってほしいのですが。。 javascriptでサムネイルをクリックすると同一ページの離れた場所に拡大表示するという指示をしています。問題なく正常に動いていますが、サムネイルをマウスオーバーした際に手のアイコンに変わってほしいのですが、矢印のアイコンのままです。 javascriptの関係上、不可能なのでしょうか？？ ソースは以下です。 -------------------------------------------------------------------------------- ■拡大表示させる窓 #zoombox ------------------------------------------------------------------------------- ■サムネイル画像 <img src="img/01_s.jpg" width="118" height="80" alt="s01" onClick="showImage(this);"/> -------------------------------------------------------------------------------- ■javascript function showImage(el) { var imageSrc = el.src.replace(/_s\.jpg$/, ".jpg"); document.getElementById("zoombox").innerHTML = '<img src="' + imageSrc + '">'; }
- ベストアンサー
- JavaScript
補足
BLUEPIXYさま 大変遅くなってしまいましたが、ご回答ありがとうございました。 参考にさせていただきます。