締切済み

ジャバスクリプトの使い方

2013/09/20 23:43

現在、webサイトを製作中なのですが、ページの上部にメニューがあり、画面中央にロゴがあり、下部にはフッターがあるという画面構成を考えております。上部のメニューにマウスポインタが乗ったときに、中央のロゴが消えて、上部メニューの説明を表示しようと思っています。その際、マウスオーバーで対応しようと思っています。以下、ジャバスクリプトのコードです。ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー window.onload = function () { 　document.getElementById( "logo" ).onmouseover= setlogo; document.getElementById( "myMenu1" ).onmouseover = setMyBody1; document.getElementById( "myMenu2" ).onmouseover = setMyBody2; document.getElementById( "myMenu3" ).onmouseover = setMyBody3; document.getElementById( "myMenu4" ).onmouseover = setMyBody4; document.getElementById( "myMenu5" ).onmouseover = setMyBody5; 　document.getElementById( "myMenu6" ).onmouseover = setMyBody6; 　document.getElementById( "myMenu7" ).onmouseover = setMyBody7; }; function setlogo() { setNoneAll(); document.getElementById( "logo" ).style.display = "block"; } function setMyBody1() { setNoneAll(); document.getElementById( "myBody1" ).style.display = "block"; } function setMyBody2() { setNoneAll(); document.getElementById( "myBody2" ).style.display = "block"; } function setMyBody3() { setNoneAll(); document.getElementById( "myBody3" ).style.display = "block"; } function setMyBody4() { setNoneAll(); document.getElementById( "myBody4" ).style.display = "block"; } function setMyBody5() { setNoneAll(); document.getElementById( "myBody5" ).style.display = "block"; } function setMyBody6() { setNoneAll(); document.getElementById( "myBody6" ).style.display = "block"; } function setMyBody7() { setNoneAll(); document.getElementById( "myBody7" ).style.display = "block"; } function setNoneAll() { document.getElementById( "logo" ).style.display = 　document.getElementById( "myBody1" ).style.display = document.getElementById( "myBody2" ).style.display = document.getElementById( "myBody3" ).style.display = document.getElementById( "myBody4" ).style.display = document.getElementById( "myBody5" ).style.display = 　document.getElementById( "myBody6" ).style.display = 　document.getElementById( "myBody7" ).style.display = "none"; } ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー上記のジャバスクリプトでマウスオーバー（上部メニューにマウスポインタが乗った場合中央のロゴが消えてメニューの説明が表示されます）が可能になるのですが、更にonMouseOutを使って、上部メニューからマウスポインタが離れたときに、中央にロゴを表示させる為の記述方法が分からなくて苦戦しております。どなたかご指導頂けませんか？よろしくお願い致します。

mmrrqq
お礼率57% (4/7)

JavaScript
回答数1
ありがとう数2

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

みんなの回答

fujillin
ベストアンサー率61% (1594/2576)

2013/09/24 17:27 回答No.1

回答がないようなので… といっても、ＨＴＭＬの構成がわからないので勝手に作成しています。スクリプトの考え方も別物なので、こんな方法もあるというご参考までに。（全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> #myMenu, #myMenu li{ list-style-type:none; margin:0; padding:0; } #myMenu{ overflow:hidden; } #myMenu li{ width:90px; background-color:#88b; color:#fff; float:left; padding:4px; text-align:center; border:1px solid #ccc; border-color:#ccc #448 #448 #ccc; } #myMenu li:hover { background-color:#44c; } #myLogo{ width:700px; height:150px; margin-top:3px; overflow:hidden; position:relative; background-color:#ddf; } #myLogo div{ position:absolute; top:0; left:0; } </style> </head> <body> <ul id="myMenu"> <li>Menu1</li> <li>Menu2</li> <li>Menu3</li> <li>Menu4</li> <li>Menu5</li> <li>Menu6</li> <li>Menu7</li> </ul> <div id="myLogo"> <div>Logo</div> <div>Body1</div> <div>Body2</div> <div>Body3</div> <div>Body4</div> <div>Body5</div> <div>Body6</div> <div>Body7</div> </div> <script type="text/javascript"> (function(menu, logo){ 　var setContent = function(index){ 　　var idx = 0, childs = document.getElementById(logo).childNodes; 　　for(var i=0, e; e=childs[i++];){ 　　　if(e.nodeName === "DIV") 　　　　e.style.display = (index==idx++)?"":"none"; 　　} 　} 　var getOrder = function(e){ 　　var menus = document.getElementById(menu).getElementsByTagName("li"); 　　for(var i=0, m; m=menus[i++];) if(m===e) break; 　　return i; 　} 　var test = function(e){ 　　return !!(e && e.nodeName==="LI" && e.parentNode.id==menu); 　} 　var changer = function(evt){ 　　var t = evt.target || evt.srcElement; 　　var r = evt.relatedTarget || evt.toElement || null; 　　if(test(r)) setContent(getOrder(r)); 　　　else if(test(t)) setContent(0); 　} /*@cc_on@*/ 　setContent(0); 　document./*@if(1)attachEvent('on'+@else@*/addEventListener(/*@end@*/'mouseout', changer, false); })("myMenu", "myLogo"); </script> </body> </html>

ログインすると、全ての回答が全文表示されます。