- ベストアンサー
サムネイルにカーソルを合わせると指定した<div>内に画像とテキストを表示する
お世話になっております。分かりにくいタイトルで申し訳ありません。 今回JavaScriptはまだまだ勉強中の状態で、どうにもこうにも 解決できず、こちらで質問を投稿させていただきました。 今、解決できず悩んでおりますのは、例えで言いますと下記のURL http://travel.rakuten.co.jp/select/nara/200806/ 楽天トラベルさんの「燈花会会場のご紹介」というコンテンツで 実現されている、下のサムネイルにオンマウスオーバーすると、 上のdiv内に左に画像と右にテキストが表示される部分です。 私が今作っているのは、左にサムネイル、右に「画像＋テキスト」 という状態で、位置は違いますが、実現させたい事は一緒です。 今回できれば一番知りたいのが、このジャバスクリプトを Dreamweaverのビヘイビアで設定できるのか、教えていただきたく 思っております。それというのも本当にジャバスクリプトは初心者で まだなかなかサンプルなどのジャバスクリプトを自分用にアレンジす ることが難しく、もしビヘイビアで設定できるのなら、それが一番ベストな状態です。 ビヘイビアで設置が無理ならジャバスクリプトのサンプルがあれば、 ぜひ教えていただきたいです。実現させたいサンプルを探してもい ましたが検索の仕方がうまくないようで、サンプルも見つからず、 とにかく、もう解決策が見つからず、前に進めません。 どなたか、お時間があります時にでも、アドバイスいただけると とてもうれしいです。どうぞよろしくお願い致します。
- tanoco
- お礼率95% (39/41)
- JavaScript
- 回答数4
- ありがとう数100
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
・ 残念ながら、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>
その他の回答 (3)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
方法１ ・<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>を非表示にセットしてください。
お礼
Dreamweaverの方法を書いていただき、本当に嬉しいです！ ありがとうございました。丁寧に解説していただいたので、 なるほどなるほど…と納得しながら操作することができました。 新しい動きを覚えることができたので、またホームページを 作るデザインの幅が広げることができ、嬉しいです！ ありがとうございました。本当に感謝です。
- VCAT
- ベストアンサー率20% (16/79)
他の方も指摘されていますが、サンプルサイトでない 一般のサイトで使われているJavaScriptを抜き出して ここに掲示したり、それを改変するためにここで議論 することは著作権法の違反になります。 そのスクリプトを書くためにウエブデザインも含めて 楽天は多大なお金を掛けているのです。それをネットで 見られるから、気に入ったからと言って勝手に横取りす るのは許されることではありません。 JavaScriptはど素人でもコピペで動くのでこういうこと が多すぎます。したがってこの質問とＮｏ．１は削除 対象となります。
お礼
貴重なご意見をいただき、本当にありがとうございます。 安易な気持ちで書いたことに反省しております。 同時に、この質問に目を留めてもらって、 貴重なお時間を利用して、コメントをしていただいた 方々に、心から感謝しています。 この機会に、ジャバスクリプトのおもしろさ等 色々勉強できたので、本当に感謝しています。 コメントしていただきありがとうございました。
- aigaion
- ベストアンサー率47% (287/608)
Dreamweaver持ってないので一般のJavaScriptでコードを書いてみました。 さすがに、元の奴を改変だとかコピーだとかは著作権があれですからね。 <!-- スクリプト部分 <HEAD>と</HEAD>の間に記述 --> <script type="text/JavaScript"> <!-- function change(text){ document.getElementById("image").innerHTML = text; } //--> </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タグあたりで画像も挿入できます。 上のコードだけでサンプル的に動くようになっていますので試行錯誤して使ってみてください。
お礼
回答をいただき、本当にありがとうございました！ お礼を書く前にaigaionさんの教えていただきた方法も 失敗しながらも試してみていまして、お礼が遅れたこと、 申し訳ありませんでした。やっと動くようにできました。 参考本や、HPを見ていましたけどなかなか実現させたいことが 分からなかったのですが、丁寧に解説いただいて、一つ一つ しっかり順を追いながら勉強ができました。 教えていただきありがとうございました。 色々な方法があることに、感動してます！
お礼
お礼が遅れまして申し訳ありません。 本当に感謝しております！ありがとうございました。 こんなにも、丁寧で見やすく書いていただいたので、 ソースをみながら、一つ一つ意味を考えながら勉強することが できました。手間がかかるのに、autyさんがこのようにキレイに ソースを書いていただいたので、仕組みを理解できましたし、 ジャバスクリプトのおもしろさがどんどん分かって きて、勉強してる時間はとても楽しかったです。 本当にありがとうございました。