ベストアンサー

サムネイルにカーソルを合わせると指定した<div>内に画像とテキストを表示する

2008/07/09 02:56

お世話になっております。分かりにくいタイトルで申し訳ありません。今回JavaScriptはまだまだ勉強中の状態で、どうにもこうにも解決できず、こちらで質問を投稿させていただきました。今、解決できず悩んでおりますのは、例えで言いますと下記のURL http://travel.rakuten.co.jp/select/nara/200806/ 楽天トラベルさんの「燈花会会場のご紹介」というコンテンツで実現されている、下のサムネイルにオンマウスオーバーすると、上のdiv内に左に画像と右にテキストが表示される部分です。私が今作っているのは、左にサムネイル、右に「画像＋テキスト」という状態で、位置は違いますが、実現させたい事は一緒です。今回できれば一番知りたいのが、このジャバスクリプトを Dreamweaverのビヘイビアで設定できるのか、教えていただきたく思っております。それというのも本当にジャバスクリプトは初心者でまだなかなかサンプルなどのジャバスクリプトを自分用にアレンジすることが難しく、もしビヘイビアで設定できるのなら、それが一番ベストな状態です。ビヘイビアで設置が無理ならジャバスクリプトのサンプルがあれば、ぜひ教えていただきたいです。実現させたいサンプルを探してもいましたが検索の仕方がうまくないようで、サンプルも見つからず、とにかく、もう解決策が見つからず、前に進めません。どなたか、お時間があります時にでも、アドバイスいただけるととてもうれしいです。どうぞよろしくお願い致します。

tanoco
お礼率95% (39/41)

JavaScript
回答数4
ありがとう数100

みんなの回答 （4）
専門家の回答

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

ベストアンサー

auty
ベストアンサー率58% (284/486)

2008/07/09 03:50 回答No.1

・　残念ながら、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>  </script> <title>【楽天トラベル】なら燈花会 10th 2008｜このやさしさが、千年先もつづきますように。</title> </head> <body> <div id="wrapper">  <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>

質問者

お礼 2008/07/10 11:27

お礼が遅れまして申し訳ありません。本当に感謝しております！ありがとうございました。こんなにも、丁寧で見やすく書いていただいたので、ソースをみながら、一つ一つ意味を考えながら勉強することができました。手間がかかるのに、autyさんがこのようにキレイにソースを書いていただいたので、仕組みを理解できましたし、ジャバスクリプトのおもしろさがどんどん分かってきて、勉強してる時間はとても楽しかったです。本当にありがとうございました。

その他の回答 (3)

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2281)

2008/07/09 12:35 回答No.4

方法１・<div>にidを指定します。・サムネイルのビヘイビアに、「テキスト設定 -> レイヤーテキストを設定」を追加します。レイヤーに<div>のidを指定し、新規HTMLを適宜記入してください。方法２・<div>のスタイルにposition:relative;とwidth、heightを指定します。　スタイルはCSSスタイルを使って、class指定でも可能です。　スタイル定義ダイアログでは「位置カテゴリ-> タイプ：相対的、幅：適宜、高さ：適宜」・上記の<div>の中に<div>を作成し、idとスタイルposition:absolute;top:0;left:0;visibility:hidden;を指定します。スタイル定義ダイアログでは「位置カテゴリ-> タイプ：絶対的、可視性：非表示、配置-上：０、配置-左：０」中に入れる<div>はサムネイルの数だけ（表示したいテキストの種類分だけ）作成してください。・サムネイルのビヘイビアで、「レイヤーの表示、非表示」を追加します。表示したい<div>を表示、表示したくない<div>を非表示にセットしてください。

質問者

お礼 2008/07/10 12:30

Dreamweaverの方法を書いていただき、本当に嬉しいです！ありがとうございました。丁寧に解説していただいたので、なるほどなるほど…と納得しながら操作することができました。新しい動きを覚えることができたので、またホームページを作るデザインの幅が広げることができ、嬉しいです！ありがとうございました。本当に感謝です。

VCAT
ベストアンサー率20% (16/79)

2008/07/09 06:43 回答No.3

他の方も指摘されていますが、サンプルサイトでない一般のサイトで使われているJavaScriptを抜き出してここに掲示したり、それを改変するためにここで議論することは著作権法の違反になります。そのスクリプトを書くためにウエブデザインも含めて楽天は多大なお金を掛けているのです。それをネットで見られるから、気に入ったからと言って勝手に横取りするのは許されることではありません。 JavaScriptはど素人でもコピペで動くのでこういうことが多すぎます。したがってこの質問とＮｏ．１は削除対象となります。

質問者

お礼 2008/07/10 11:44

貴重なご意見をいただき、本当にありがとうございます。安易な気持ちで書いたことに反省しております。同時に、この質問に目を留めてもらって、貴重なお時間を利用して、コメントをしていただいた方々に、心から感謝しています。この機会に、ジャバスクリプトのおもしろさ等色々勉強できたので、本当に感謝しています。コメントしていただきありがとうございました。

aigaion
ベストアンサー率47% (287/608)

2008/07/09 04:10 回答No.2

Dreamweaver持ってないので一般のJavaScriptでコードを書いてみました。さすがに、元の奴を改変だとかコピーだとかは著作権があれですからね。  <script type="text/JavaScript">  </script>   <div id = "image">  表示位置 </div>   <a href="javascript:void(0);" onmouseover="javascript:change('test1の文章');">test1</a> <a href="javascript:void(0);" onmouseover="javascript:change('test2の文章');">test2</a>  だいたいこんな感じでできるかと思います。必要な部分だけ書いたのでレイアウト等はがんばってください。軽い説明だけ・・・ <div id = "image">と</div>の間の部分を変化させます。変化させる内容はたとえばtest1というテキストの上をマウスが通ったら「test1の文章」と文章が変わるようするには選択部分を <a href="javascript:void(0);" onmouseover="javascript:change('test1の文章');">test1</a> のようにします。「test1の文章」や「test1」の部分はHTMLも書けるのでIMGタグあたりで画像も挿入できます。上のコードだけでサンプル的に動くようになっていますので試行錯誤して使ってみてください。

質問者

お礼 2008/07/10 11:38

回答をいただき、本当にありがとうございました！お礼を書く前にaigaionさんの教えていただきた方法も失敗しながらも試してみていまして、お礼が遅れたこと、申し訳ありませんでした。やっと動くようにできました。参考本や、HPを見ていましたけどなかなか実現させたいことが分からなかったのですが、丁寧に解説いただいて、一つ一つしっかり順を追いながら勉強ができました。教えていただきありがとうございました。色々な方法があることに、感動してます！

サムネイルにカーソルを合わせると指定した<div>内に画像とテキストを表示する