- 締切済み
マウスオーバーでテキスト表示…
こんにちは。 HPビルダー6.5 HotmediaでHPを製作中なのですが、以下のことで困っています…助けてください…。 (１)テキストAとテキストBがあるとします。 Bは通常非表示にしておいて、AをマウスオーバーでBを表示させたいのですが…。 この動作、Bをレイアウト枠に書き込んでエフェクトで非表示、Aにイベントを設定すればいい…というのは分かっているのですが、この、テキストBをレイアウト枠ではなくてテーブルに書き込みたいのです。Bをテーブルごと非表示にして、Aをマウスオーバーすると表示させるようにすることって…出来るんでしょうか…？ もし可能なら、その方法を教えてください…。 (２)(１)の動作を、AとBが違うフレームにある場合はどう設定したらよいのでしょうか？ (３)テキストC、D、E、Fがあるとします。 通常、DとFは非表示にしておき、CをマウスオーバーでD、EをマウスオーバーでFを表示させます。 このとき、DとFを個々に、全く同じ位置に表示させるにはどうしたらよいのでしょうか？ 分かりにくい文章で申し訳ありません。 なにか一つでもお分かりでしたらよろしくお願いします。
- CSS
- 回答数1
- ありがとう数4
- みんなの回答 （1）
- 専門家の回答
みんなの回答
HPビルダーを使用したことはないので、操作についての詳細はわかりませんが… (1)について、 Bをテーブルごと丸々、通常時に非表示、Aにポインタが重なった時にのみ表示、という制御にしたいのであれば、そのレイアウト枠という枠の中にテーブルをそっくり入れてしまってはいかがでしょうか? テーブルの一部の内容の表示を切り替えたいというケースだと、それなりのソースの改造が必要ですが、テーブル全体を隠したり表示したりする場合は、Bのレイアウト枠の中にテーブルを組み込めばよいと思いますよ。 (2)について、 この場合は、スクリプトに対して手を加えなければならなくなります。 このケースについては、私が以前回答した内容にも似ていますので、まずは下記のURLを見てみてください。 http://oshiete1.goo.ne.jp/kotaeru.php3?q=575646 (3)について、 DとFの表示位置の調整についてですが、レイアウト枠がぴったり重なるように配置してしまう方法でも可能と思います。 他に、DとFで使うレイアウト枠を同じ枠に入れておいて、displayプロパティの切り替えで表示を切り替えたり、あるいはその要素の内容のテキスト自体をJavaScriptから書き換えるという方法もあります。 displayプロパティの切り替えを行う方法については、下記ソースを試してみてください。 <html> <head> <title>displayプロパティで切り替え</title> <script type="text/javascript"><!-- function showLayer(objId){ if (document.getElementById){ tar=document.getElementById(objId); tar.style.visibility="visible"; tar.style.display="inline"; } } function hideLayer(objId){ if (document.getElementById){ tar=document.getElementById(objId); tar.style.visibility="hidden"; tar.style.display="none"; } } //--></script> </head> <body> <a href="#" onMouseover="showLayer('D')" onMouseout="hideLayer('D')">C</a><br><br> <a href="#" onMouseover="showLayer('F')" onMouseout="hideLayer('F')">E</a> <p><span id="D" style="visibility: hidden; display: none;">Dのテキスト</span><span id="F" style="visibility: hidden; display: none;">Fのテキスト</span></p> </body> </html> JavaScriptで直接テキストを書き換えてしまう方法については、こちらも私が以前回答したものですが、同様の方法を例示した質問がありますので、こちらを参照して見てください。 http://oshiete1.goo.ne.jp/kotaeru.php3?q=609647 具体的な改造方法については、ソースを提示いただけないと言及できませんので、少々曖昧な部分もありますが… もしこのアドバイスの内容を踏まえた上で解らないところがあれば、具体的に現在のソースなども含めて補足いただくと、より実効的なアドバイスも出せるかもしれません。 参考になれば…
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_3_thumbnail_img_sm.png)
