こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

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

現在、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を使って、上部メニューからマウスポインタが離れたときに、中央にロゴを表示させる為の記述方法が分からなくて苦戦しております。
どなたかご指導頂けませんか?
よろしくお願い致します。

投稿日時 - 2013-09-20 23:43:48

QNo.8272923

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

2人が「このQ&Aが役に立った」と投票しています

回答(1)

ANo.1

回答がないようなので…


といっても、HTMLの構成がわからないので勝手に作成しています。
スクリプトの考え方も別物なので、こんな方法もあるというご参考までに。
(全角空白は半角に)
<!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>

投稿日時 - 2013-09-24 17:27:34

あなたにオススメの質問