- ベストアンサー
サムネイルにカーソルを合わせると指定した<div>内に画像とテキストを表示する
autyの回答
・ 残念ながら、Dreamweaverのビヘイビアのことは分かりませんが、 ご指摘のURLの関連部分を抜き出してみました。 ・ 少々勉強することになるかも知れませんが、以下のコードを参考にしてみてください。 ------------------------------------------------------------ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="http://travel.rakuten.co.jp/select/nara/200806/css/import.css" media="all"> <script> <!-- var MAPS = new Array("s01","s02","s03","s04"); function mapDisplay(m){ var display = "none"; with (document) { for(var i=0; i<MAPS.length; i++){ getElementById(MAPS[i]).style.display = display; } getElementById(m).style.display = ""; } } window.onload = function() { mapDisplay('s01'); } //--> </script> <title>【楽天トラベル】なら燈花会 10th 2008｜このやさしさが、千年先もつづきますように。</title> </head> <body> <div id="wrapper"> <!--☆↓toukae info↓☆ --> <a name="02"></a> <div id="info_Box"> <div class="clearfix"> <div id="info_BoxLeft"> <dl> <dt> <img src="http://travel.rakuten.co.jp/select/nara/200806/images/event_title.jpg" alt="燈花会会場のご紹介" width="467" height="34"> </dt> <dd id="info_spotArea"> <ul> <li id="s01"> <div id="InfoBox" class="clearfix"> <div id="InfoBox_photo"> <img src="http://travel.rakuten.co.jp/select/nara/200806/images/event_photo1.jpg" alt="" width="250" height="160"> </div> <div id="InfoBox_right"> <div> <img src="http://travel.rakuten.co.jp/select/nara/200806/images/event_name1.jpg" alt="浮雲園地" width="179" height="21"> </div> <p id="InfoBox_text"> ちりばめられた4,000個のろうそくは、星が降ってきたかの様に美しく、天上界の天の川のよう。 </p> </div> </div> </li> <li id="s02"> <div id="InfoBox" class="clearfix"> <div id="InfoBox_photo"> <img src="http://travel.rakuten.co.jp/select/nara/200806/images/event_photo2.jpg" alt="" width="250" height="160"> </div> <div id="InfoBox_right"> <div> <img src="http://travel.rakuten.co.jp/select/nara/200806/images/event_name2.jpg" alt="浮見堂と鷲池" width="179" height="21"> </div> <p id="InfoBox_text"> 鷺池の水面に映る虹色の光が、浮見堂を美しく浮かび上がらせる。ゆらゆらゆれる船の灯りは誰と楽しもう？ </p> </div> </div> </li> <li id="s03"> <div id="InfoBox" class="clearfix"> <div id="InfoBox_photo"> <img src="http://travel.rakuten.co.jp/select/nara/200806/images/event_photo3.jpg" alt="" width="250" height="160"> </div> <div id="InfoBox_right"> <div> <img src="http://travel.rakuten.co.jp/select/nara/200806/images/event_name3.jpg" alt="浅茅ヶ原" width="179" height="21"> </div> <p id="InfoBox_text"> 竹がいざなう幻想的な世界へ。ほのあかりライブもすてき。 </p> </div> </div> </li> <li id="s04"> <div id="InfoBox" class="clearfix"> <div id="InfoBox_photo"> <img src="http://travel.rakuten.co.jp/select/nara/200806/images/event_photo4.jpg" alt="猿沢池と五十二段" width="250" height="160"> </div> <div id="InfoBox_right"> <div> <img src="http://travel.rakuten.co.jp/select/nara/200806/images/event_name4.jpg" alt="猿沢池と五十二段" width="200" height="21"> </div> <p id="InfoBox_text"> 灯りに彩られた水面から石段の先にはどんな世界が待っているのでしょう。道しるべは心のこもったろうそくの灯り。猿沢池に映されたろうそくの灯り、竹灯りの五十二段と木々のライトアップにしばしうっとり。 </p> </div> </div> </li> </ul> </dd> </dl> </div> </div> <div id="info_BoxBtm" class="clearfix"> <ul> <li> <a href="javascript:void(0);" onMouseOver="javascript:mapDisplay('s01');"><img src="http://travel.rakuten.co.jp/select/nara/200806/images/event_sam1.jpg" class="imgover"> </a> </li> <li> <a href="javascript:void(0);" onMouseOver="javascript:mapDisplay('s02');"><img src="http://travel.rakuten.co.jp/select/nara/200806/images/event_sam2.jpg" class="imgover"> </a> </li> <li> <a href="javascript:void(0);" onMouseOver="javascript:mapDisplay('s03');"><img src="http://travel.rakuten.co.jp/select/nara/200806/images/event_sam3.jpg" class="imgover"> </a> </li> <li> <a href="javascript:void(0);" onMouseOver="javascript:mapDisplay('s04');"><img src="http://travel.rakuten.co.jp/select/nara/200806/images/event_sam4.jpg" class="imgover"> </a> </li> </ul> </div> <p id="infoText"> ※小さい写真にカーソルを当てると各会場の案内が表示されます。 </p> </div> </div> </body> </html>
関連するQ&A
- サムネイルをクリックすると画像を大きく表示したいのですが
サムネイルをクリックすると、別ウィンドウで開くのではなく、バックがグレーになり選択した画像が大きく表示されるようにしたいのです。 http://tamashii.jp-network.co.jp/item/item.php?eid=01004&pref=500 上記の様に表示したいのですが、現状はCLOSE×の表示のみですが、これに画像が大きく表示された状態で次の画像へジャンプしたり、前の画像に戻ったりするようにすることはできるのでしょうか？ JAVAスクリプトでできるのかもわからないほどの初心者で申し訳ありませんが、何卒宜しくお願いします。
- ベストアンサー
- JavaScript
- オンマウスで画像とテキストの指定位置表示について
サムネイル画像にオンマウスにより、拡大画像が表示されるようにしています。 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
- 画像掲示板のサムネイル画像が表示されない。
画像掲示板のサムネイル画像が表示されない。 先日イラストサイトのPixivを利用していたところ、サムネイル表示されない画像があることに気づきました。 （プロフィールの設定で表示されないようにしている、というわけではありません。） 普通に問題なくサムネイル表示される画像もあるし、されない画像もある状態です。 表示されない絵師の画面に飛ぶと、その絵師の画像はすべて表示されないような状態になっていました。 また、他のイラストの画像掲示板なども同じく、表示される掲示板もあるし、表示されない掲示板もある状態です。 サムネイル表示されない画像はそのサムネイルをクリックしてもイラストが表示されません。 始めのうちはPixivのサーバの調子が悪いだけかと思っていたのですが、他の掲示板でも同様の症状が出るし、数日たっても同じ状態が続き困っています。 どなたか解決策をご存知の方はいらっしゃらないでしょうか？ よろしくお願いします。
- ベストアンサー
- ネットトラブル
- サムネイル画像にマウスを合わせて画像と説明をチェンジ
javaスクリプトで サムネイル画像にマウスを合わせて 画像と説明をチェンジするには どうしたらいいのでしょうか？ 簡単に言うと以下のURLのフォームでないバージョンにしたいのですが このスクリプトをいろいろと変えてみてもできませんでした。 http://www16.big.or.jp/~ogura1/java_scr/Photo_mess/Photo_mess.html 私どうもjavaスクリプトが苦手なもので 似たような関連記事はほとんど見たのですが もう、さっぱりお手上げです。 参考になるHPか作り方を教えてください。 どうか宜しくお願いします。
- 締切済み
- その他([技術者向] コンピューター)
- 画像を加工したらサムネイルが表示されません。
先日BIBLO NF-70Uを購入致しました。フォトレタッチで画像を加工したもの全てサムネイルが表示されず、イメージ画像？のような絵になってしまいます。 デスクトップ上から見る分にはきちんとサムネイルが表示されるのですが、ネット上（オークションに画像をアップする際など）になると一覧から画像を加工したもののみサムネイルが表示されません。 （右クリックでひとつづつプレビューを見ることはできます） サポートセンターに問い合わせ、いろいろやってみましたがダメでした。サポートセンターの人曰く、現状解決策がないとのことでしたがどうも納得が出来ません。 以前使用していましたXP搭載のパソコンではそのような事がなかったので大変困っています。 どうか助けて下さい！！お願いします。
- 締切済み
- Windows Vista
- javaをつかってテキストと画像をランダム表示させたい
javaを使用して画像とテキストをランダムに表示させたいと思っております。 なお、javaを使用して画像をランダムに表示させるのは http://okwave.jp/qa918056.html こちらを参考にさせていただいて解決したのですが、 その画像に伴ってテキストも表示させたいと思っております。 たとえばAという画像が表示されているときはＡ専用のテキスト Ｂという画像が表示されているときはＢ専用のテキスト といった感じです。なにとぞよろしくお願いいたします。
- 締切済み
- ホームページ作成ソフト
- フォルダ内の画像を（HTML）でサムネイル画像表示する方法
http://aaa.com/img/ のimgフォルダの中に写真がたくさんあります。 毎日増えており、名前もバラバラです。 .htaccess で内容は表示されるように設定してあります。 これをサムネイルで表示して、クリックしたらその画像が現寸大で表示されるような方法はないものでしょうか？ JAVA PHP CGI などのサンプルプログラムを捜しています。 よろしくお願いします。
- ベストアンサー
- HTML
- CSSを使って画像をクリックすると別フレームに大きな画像を表示したい
よろしくお願いします。 JAVAとか使うと警告メッセージが表示されるので、そういったメッセージが出ないcssをつかって次のようなことがやりたいのですがどうぞ教えてください。 フレームで2つに割ったページで、左にサムネイルを表示しておいて、そのうえにカーソルを持っていくだけで右のフレームに大きな画像を表示させたいのです。 よろしくおねがいします。
- ベストアンサー
- HTML
- 小さい画像にマウスを合わせると小さい画像の右上（右下）に拡大画像が表示される
ホームページ作成で教えて欲しいのですが、小さなマンションのサムネイル画像の上にマウスを持って行くと、大きな画像がサムネイル画像の右下か右上に表示されるような仕組みを作りたいのですが、どのようにしたらいいのでしょうか？ヤフー不動産などで実際にあるのですが、小さな間取り図にオンマウスで拡大間取りが見れるようにしたいのです。 javaスクリプトで作成しているのでしょうか？javaは当方分からないのですが、アドバイスをお願い致します。
- 締切済み
- Windows XP
- テキストにマウスオーバーで画像を変える方法
テキストにマウスオーバーで画像を変える方法 左のナビの例えば、ぶどうのテキストにマウスオーバーした時に、それに連動して右のぶどうの画像のコントラストを高くすることはjava scriptではできるのでしょうか？ もちろん画像のコントラストを高めた画像は用意しますので、要はcssのロールオーバーみたいなことをテキストと連動して行いたいです。 ご回答をどうかよろしくお願いします。
- ベストアンサー
- JavaScript
お礼
お礼が遅れまして申し訳ありません。 本当に感謝しております！ありがとうございました。 こんなにも、丁寧で見やすく書いていただいたので、 ソースをみながら、一つ一つ意味を考えながら勉強することが できました。手間がかかるのに、autyさんがこのようにキレイに ソースを書いていただいたので、仕組みを理解できましたし、 ジャバスクリプトのおもしろさがどんどん分かって きて、勉強してる時間はとても楽しかったです。 本当にありがとうございました。