![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
http://www.kaigokiki.com/のメニューですが、
マウスを乗せると茶色に変わりマウスが離れても茶色のままです。
これはどうやるのですか?
また、「おすすめ商品」「掲示板」「ニュース」「日記&コラム」
「介護の知恵袋」「介護便利帳」はマウスを乗せると下に説明か出ますがどうやるのですか?
よろしくお願いいたします。
No.4ベストアンサー
- 回答日時:
これはJavaScriptで実現できます。
まずメニューの画像ですが、リンクタグにonMouseOverと言うイベントを設定しています。
これはそのリンク部分にマウスポイントが触れた場合に発生するイベントです。
下のサブメニューは実は元々JavaScriptのdocument.writeでタグが書かれていますが、
ページを開く際にすべてhidden(非表示)設定になっています。
これを表示させる為には先ほどのonMouseOverで発生したfunction内で表示、非表示の処理を行っています。
とあるメニュー画像にポイントが置かれた場合の処理の流れは以下の通りです。
1.すべてのメニュー画像を初期状態に戻し(反転している画像)、ポインターが置かれた画像を置き換える。
2.サブメニューをすべてhidden(非表示)に設定し、該当するサブメニュー項目のみをvisible(表示)に設定する
と言った流れです。
ソースを見て順序を追って行けば流れや作り方がわかると思いますが、
JavaScriptがわからない方には難しいかもしれません。
このヒントで頑張ってみてください。
ソースはあえて書きませんので、細かい事に関する質問は補足でお願いします。
No.5
- 回答日時:
それぞれ画像を準備し、
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
- 回答日時:
こんにちは
簡単に作るとこんな感じ?
<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
- 回答日時:
まず、ソースを見ることから始めましょう。
HTML言語の基本です。
<A HREF="">の中にroll over…という記述がありましたから
画面の特定の画像の上にマウスポイントが来ると
別の茶色の画像に切り替わるという仕組みです。
また説明はALTタグを使うのは常識です。
ホームページを見たらソースで構造を解析して
自分でも同じように作ってオフラインで動作チェックする…
これはHTMLを学ぶ最初の勉強法です。
HTMLには.htmlという意味で使う場合と
ハイパー・テキスト・マークアップ・ランゲージという言語の
略称の二つの意味があり、今回は後者のことを意味します。
自分でホームページを作ることがなくても
どういう仕組みでページができているのかくらいは
ある程度知識を持つことは大事です。
特定のページに行くと勝手にマウスポインタの形が変わったり
あとから星がきらきら追いかけたりなどと
ギミックを使ったページがありますが
これはJAVAという付加言語をHTMLの中に追加させると
そういう動作をするようになります。
インターネットで基礎から教えてくれるフリーの教室もありますから
ぜひ勉強してみてください
No.1
- 回答日時:
JavaScriptです。
JavaScriptの適当なサンプル集をググって探してみて下さい。JavaScriptを使った仕掛けの中でも最も使用頻度も高いであろう、onmouseover/onmouseoutでイメージやテキストをスワップする、というものですので、簡単にいくらでもサンプルと解説が見つかります。お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リンクを知らせる手のマークが...
-
画像のサイズが変わらない
-
HTMLのIMAGEに。。
-
ワードプレス max-width100%が...
-
Javascriptで画像の大きさを%指...
-
UDP通信を使うチャットプログラ...
-
CSS実装されない
-
HTMLタグのDL DT DDを使ってli...
-
html オンマウスで変化する画...
-
HTMLに横型ゲージを表示させたい
-
画像の場合のみ、下線を消す方...
-
ホームページで画像を横に並べ...
-
画像リンクの周りに線が出ます
-
auの携帯サイトで画像と画像の...
-
htmlの文字が縦書きになる
-
【ヒトの神秘】美男美女から何...
-
HTML属性での「""」 「''」違い
-
ワードにコピペ、画像が表示さ...
-
<ul>~</ul>が二つ続くと間に改...
-
<h1>、<h2>と<p><div>の行間を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リンクを知らせる手のマークが...
-
ボタンをセル内一杯に表示させ...
-
inputタグでサーバにデータを送...
-
htmlで画像を2個ずつ並べていき...
-
HTMLのIMAGEに。。
-
機種依存文字、m2(平方メート...
-
favicon.ico はもういらない?
-
cssで、チェックボックスの画像...
-
UDP通信を使うチャットプログラ...
-
table で画像をピッタリとくっ...
-
水面の波紋
-
画像のサイズが変わらない
-
画像の場合のみ、下線を消す方...
-
ポップアップウィンドウのサイ...
-
ホームページで画像を横に並べ...
-
【HTML/CSS】ボタンの枠が伸び...
-
imgタグは何で囲むのが良いか
-
画像をクリックして元に戻すには
-
リンク画像のラインを消したい
-
画像をクリックして同じページ...
おすすめ情報