メニュー

http://www.kaigokiki.com/のメニューですが、
マウスを乗せると茶色に変わりマウスが離れても茶色のままです。
これはどうやるのですか？

また、「おすすめ商品」「掲示板」「ニュース」「日記&コラム」
「介護の知恵袋」「介護便利帳」はマウスを乗せると下に説明か出ますがどうやるのですか？

よろしくお願いいたします。

No.4 ベストアンサー 回答者： hisajiro 回答日時： 2008/03/31 14:37

これはJavaScriptで実現できます。

まずメニューの画像ですが、リンクタグにonMouseOverと言うイベントを設定しています。
これはそのリンク部分にマウスポイントが触れた場合に発生するイベントです。
下のサブメニューは実は元々JavaScriptのdocument.writeでタグが書かれていますが、
ページを開く際にすべてhidden（非表示）設定になっています。
これを表示させる為には先ほどのonMouseOverで発生したfunction内で表示、非表示の処理を行っています。
とあるメニュー画像にポイントが置かれた場合の処理の流れは以下の通りです。
１．すべてのメニュー画像を初期状態に戻し（反転している画像）、ポインターが置かれた画像を置き換える。
２．サブメニューをすべてhidden（非表示）に設定し、該当するサブメニュー項目のみをvisible（表示）に設定する

と言った流れです。
ソースを見て順序を追って行けば流れや作り方がわかると思いますが、
JavaScriptがわからない方には難しいかもしれません。
このヒントで頑張ってみてください。
ソースはあえて書きませんので、細かい事に関する質問は補足でお願いします。

No.5 回答者： auty 回答日時： 2008/03/31 15:00

それぞれ画像を準備し、

http://www.kaigokiki.com/cmn_imgs/cmn_gnv_001.jpg
と
http://www.kaigokiki.com/cmn_imgs/cmn_gnv_001o.jpg
を
オンマウスオーバ（onMouseOver）というイベントで切り替えています。その切り替えは、

<a href="contents/hot_products.html" target="_top" onMouseOver="RollOver('m00','b');"><img src="cmn_imgs/cmn_gnv_001.jpg" alt="おすすめ商品" name="im00" width="79" height="24" border="0"></a>

という形で設定し、
onMouseOver="RollOver('m00','b');"

のプログラム
RollOver('m00','b')
で切り替えを行っています。そのなかでは

------------------------------------------
document.layers['m00'].visibility='hidden';
document.layers[name].visibility=state;
document.images[nm_img].src = eval( id + ".src" );
------------------------------------------
の様なことが行われています。


＞＞＞　マウスを乗せると下に説明か出ますがどうやるのですか？

次の空のテーブルを準備しておいて、同じくCSSを利用して表示を切り替えています。
------------------------------------------
<!-- ++++++ Sub Menu Area ++++++ -->
<table width="770" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#684E34"><img src="cmn_imgs/sp.gif" width="5" height="3"></td>
</tr>
<tr>
<td bgcolor="#FFD785"><img src="cmn_imgs/sp.gif" width="5" height="25"></td>
</tr>
</table>
<!-- ++++++ //Sub Menu Area ++++++ -->
------------------------------------------

No.3 回答者： leap_day 回答日時： 2008/03/31 14:28

こんにちは

簡単に作るとこんな感じ？

<style type="text/css"><!--
#menu { margin:0px; padding:0px; }
#menu li {
width:100px;
list-style:none;
float:left;
background-color:blue;
}

--></style>
<script type="text/javascript"><!--
HELP = new Array("メニュー1の説明","メニュー2の説明","メニュー3の説明");
function ch(n) {
obj = document.getElementById("menu").getElementsByTagName("li");
for(i=0;i<obj.length;i++) { obj[i].style.backgroundColor = "blue"; }
obj[n].style.backgroundColor = "brown";
document.getElementById("setumei").innerHTML = HELP[n];
}

//--></script>


<ul id="menu">
<li onmouseover="ch(0)">メニュー1</li>
<li onmouseover="ch(1)">メニュー2</li>
<li onmouseover="ch(2)">メニュー3</li>
</ul>
<div style="clear:both;"></div>
<div id="setumei"></div>

No.2 回答者： aatw 回答日時： 2008/03/31 14:17

まず、ソースを見ることから始めましょう。

HTML言語の基本です。
<A HREF="">の中にroll over…という記述がありましたから
画面の特定の画像の上にマウスポイントが来ると
別の茶色の画像に切り替わるという仕組みです。
また説明はALTタグを使うのは常識です。
ホームページを見たらソースで構造を解析して
自分でも同じように作ってオフラインで動作チェックする…
これはHTMLを学ぶ最初の勉強法です。
HTMLには.htmlという意味で使う場合と
ハイパー・テキスト・マークアップ・ランゲージという言語の
略称の二つの意味があり、今回は後者のことを意味します。
自分でホームページを作ることがなくても
どういう仕組みでページができているのかくらいは
ある程度知識を持つことは大事です。

特定のページに行くと勝手にマウスポインタの形が変わったり
あとから星がきらきら追いかけたりなどと
ギミックを使ったページがありますが
これはJAVAという付加言語をHTMLの中に追加させると
そういう動作をするようになります。

インターネットで基礎から教えてくれるフリーの教室もありますから
ぜひ勉強してみてください

No.1 回答者： abril 回答日時： 2008/03/31 14:15

JavaScriptです。

JavaScriptの適当なサンプル集をググって探してみて下さい。JavaScriptを使った仕掛けの中でも最も使用頻度も高いであろう、onmouseover/onmouseoutでイメージやテキストをスワップする、というものですので、簡単にいくらでもサンプルと解説が見つかります。