ロールオーバーな画像を使ったツリーメニュー
-
0 名前： はな ： 2007/06/24（日） 10:41 ID:KP2rkfbd sub-bK
- ロールオーバーとツリーメニューを組み合わせてメニューを作っているのですが、
１つのツリーメニューのサブメニューが出ているときは、他のサブメニューを出した後で、
あってもほかのサブメニューを非表示にしたい。
HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JSの練習</title>
<script src="menew.js" type="text/javascript"></script></head>
<body onload="init()">
<div class="tree">
<div><A HREF="#" onMouseOver="On('img1')" onMouseOut="Off('img1')" onclick="return func('a')"><IMG SRC="../kaisya.gif" ALT="sample1" BORDER="0" WIDTH="100" HEIGHT="25" NAME="img1"></A></div>
<div class="titem" id="a">
<div><A HREF="change1.html" onMouseOver="On('img2')" onMouseOut="Off('img2')"><IMG SRC="../moderu.gif" ALT="sample2" BORDER="0" WIDTH="100" HEIGHT="25" NAME="img2"></A></div>
<div><A HREF="change1.html" onMouseOver="On('img3')" onMouseOut="Off('img3')"><IMG SRC="../sekourei.gif" ALT="sample3" BORDER="0" WIDTH="100" HEIGHT="25" NAME="img3"></A></div>
<div><A HREF="change1.html" onMouseOver="On('img4')" onMouseOut="Off('img4')"><IMG SRC="../bukken.gif" ALT="sample4" BORDER="0" WIDTH="100" HEIGHT="25" NAME="img4"></A></div>
</div>
<div><a href="#" onclick="return func('b')" onMouseOver="On('img5')" onMouseOut="Off('img5')"><IMG SRC="../toiawas.gif" ALT="sample5" BORDER="0" WIDTH="100" HEIGHT="25" NAME="img5"></a></div>
<div class="titem" id="b">
<div><A HREF="change1.html" onMouseOver="On('img6')" onMouseOut="Off('img6')"><IMG SRC="../rinku.gif" ALT="sample5" BORDER="0" WIDTH="100" HEIGHT="25" NAME="img6"></A></div>
</div>
</div>
</body>
</html>
JSソース
/****************************************
ロールオーバーなツリーメニュー
****************************************/
if (document.images) {
// 設定開始（使用する画像を設定してください）
// 画像1
var img1on = new Image();
img1on.src = "../kaisya.gif"; // ポイント時の画像
var img1off = new Image();
img1off.src = "../kaisya2.gif"; // 通常の画像
// 画像2
var img2on = new Image();
img2on.src = "../moderu.gif";
var img2off = new Image();
img2off.src = "../moderu2.gif";
// 画像3
var img3on = new Image();
img3on.src = "../sekourei.gif";
var img3off = new Image();
img3off.src = "../sekourei2.gif";
// 画像4
var img4on = new Image();
img4on.src = "../bukken.gif";
var img4off = new Image();
img4off.src = "../bukken2.gif";
// 画像5
var img5on = new Image();
img5on.src = "../toiawas.gif";
var img5off = new Image();
img5off.src = "../toiawas2.gif";
// 画像6
var img6on = new Image();
img6on.src = "../rinku.gif";
var img6off = new Image();
img6off.src = "../rinku2.gif"// 設定終了
}
// ポイント時の処理
function On(name) {
if (document.images) {
document.images[name].src = eval(name + 'on.src');
}
}
// 放した時の処理
function Off(name) {
if (document.images) {
document.images[name].src = eval(name + 'off.src');
}
}
// ツリーメニュー
function init() {
if (!document.getElementsByTagName) { return; }
var objs = document.getElementsByTagName("div");
for (i = 0; i < objs.length; i++) {
if (objs[i].className == "titem") {
objs[i].style.display = "none";
}
}
}
function func(id) {
if (!document.getElementsByTagName) { return false; }
var obj = document.getElementById(id);
if (obj.style.display == "block") {
obj.style.display = "none";
} else {
obj.style.display = "block";
}
return false;
}
onclick="return func('b')"とid="b"のbをaに変えたら、
上のほうのサブメニューの表示、非表示は出来たが、下のほうのサブメニューが出なくなった。
ちなみに先日の質問については、思考錯誤中なので、あとで返事をしようと思っています。
-
1 名前： モノ ◆7YMtX/NYmu ： 2007/06/24（日） 10:41 ID:lwZfqoAG sub-Cl
- > ちなみに先日の質問については、思考錯誤中なので、あとで返事をしようと思っています。
先日の質問ってどれのことでしょう？
この記事を見ただけじゃわかりませんよね。
かといって、わざわざ探すものでもなし、
こういった追記事項は元の記事へするのがよいでしょう。
-
2 名前： はな ： 2007/06/24（日） 10:41 ID:o5prilem sub-bK
- http://himajin.moo.jp/menu/menu6.html
上記のツリーメニューとこのサイト内のロールオーバーを組み合わせたらできました。
それにしても、上記のページにしても、私が同じJSを使っていたページにしてもツリーメニューを使う場合、
固定にテーブルを使うしかないのでしょうか？
いちよ解決しました。
-
3 名前： はな ： 2007/06/24（日） 10:41 ID:o5prilem sub-bK
- 参考ソース
HTML(CSS外部ファイル化せず）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JSの練習</title>
<style type=text/css><!--
/*メニューのスタイル*/
td.main{
width:100px;
Times New Roman;
text-indent:0;
cursor:pointer;
}
/*サブメニューのスタイル*/
td.sub{
position:relative;
left:0;
width:100px;}
.sub div{display:none;}
/*リンクのスタイル*/
.sub div A:link{text-decoration:none;width:100%;display:block;}
.sub div A:visited{text-decoration:none;width:100%;display:block;}
.sub div A:hover{
color:#ffffff;text-decoration:none;width:100%;
display:block;}
--></style>
<script src="menew.js" type="text/javascript"></script></head>
<body>
<table cellspacing=0 cellpadding=0>
<tr><td class="main" onClick="subopen('menu1')">
<A HREF="#" onMouseOver="On('img1')" onMouseOut="Off('img1')"><IMG SRC="../kaisya.gif" ALT="sample1" BORDER="0" WIDTH="100" HEIGHT="25" NAME="img1"></A></td></tr>
<tr><td class="sub"><div ID="menu1">
<A HREF="change1.html" onMouseOver="On('img2')" onMouseOut="Off('img2')"><IMG SRC="../moderu.gif" ALT="sample2" BORDER="0" WIDTH="100" HEIGHT="25" NAME="img2"></A>
<A HREF="change1.html" onMouseOver="On('img3')" onMouseOut="Off('img3')"><IMG SRC="../sekourei.gif" ALT="sample3" BORDER="0" WIDTH="100" HEIGHT="25" NAME="img3"></A>
<A HREF="change1.html" onMouseOver="On('img4')" onMouseOut="Off('img4')"><IMG SRC="../bukken.gif" ALT="sample4" BORDER="0" WIDTH="100" HEIGHT="25" NAME="img4"></A>
</div></td></tr></table>
<table cellspacing=0 cellpadding=0>
<tr><td class="main" onClick="subopen('menu2')">
<a href="#" onMouseOver="On('img5')" onMouseOut="Off('img5')"><IMG SRC="../toiawas.gif" ALT="sample5" BORDER="0" WIDTH="100" HEIGHT="25" NAME="img5"></a></td></tr>
<tr><td class="sub"><div ID="menu2">
<A HREF="change1.html" onMouseOver="On('img6')" onMouseOut="Off('img6')"><IMG SRC="../rinku.gif" ALT="sample5" BORDER="0" WIDTH="100" HEIGHT="25" NAME="img6"></A>
</div></td></tr></table>
</body>
</html>
JS外部ファイル
/****************************************
ロールオーバーなツリーメニュー
****************************************/
if (document.images) {
// 設定開始（使用する画像を設定してください）
// 画像1
var img1on = new Image();
img1on.src = "../kaisya.gif"; // ポイント時の画像
var img1off = new Image();
img1off.src = "../kaisya2.gif"; // 通常の画像
// 画像2
var img2on = new Image();
img2on.src = "../moderu.gif";
var img2off = new Image();
img2off.src = "../moderu2.gif";
// 画像3
var img3on = new Image();
img3on.src = "../sekourei.gif";
var img3off = new Image();
img3off.src = "../sekourei2.gif";
// 画像4
var img4on = new Image();
img4on.src = "../bukken.gif";
var img4off = new Image();
img4off.src = "../bukken2.gif";
// 画像5
var img5on = new Image();
img5on.src = "../toiawas.gif";
var img5off = new Image();
img5off.src = "../toiawas2.gif";
// 画像6
var img6on = new Image();
img6on.src = "../rinku.gif";
var img6off = new Image();
img6off.src = "../rinku2.gif"// 設定終了
}
// ポイント時の処理
function On(name) {
if (document.images) {
document.images[name].src = eval(name + 'on.src');
}
}
// 放した時の処理
function Off(name) {
if (document.images) {
document.images[name].src = eval(name + 'off.src');
}
}
// ツリー
chMenu=0;
function subopen(tName){
tMenu=(document.all)?document.all(tName).style:document.getElementById(tName).style;
if(chMenu)chMenu.display="none";
if(chMenu==tMenu){chMenu=0;
}else{chMenu=tMenu;
tMenu.display="block";}
}/* himajin.moo.jp */
上記のソースでロールオーバーなツリー(しかも項目ごと表示）が出来ました。
自己解決しました。
-
4 名前： はな ： 2007/06/24（日） 10:41 ID:o5prilem sub-bK
- 上記レスの修正
私が同じJSを使っていた→私が見た
ソース修正
/*メニューのスタイル*/
Times New Roman;画像にしたからいらない。
.sub div A:hover{
color:#ffffff;text-decoration:none;width:100%;
のcolor:#ffffff;同じく画像のためいらない。
メニューを2つのテーブルに分けなくてよいので、
</table>
<table cellspacing=0 cellpadding=0>
はいらない。
１つのテーブルにしたのに、旧テーブル1と2の間の微妙な隙間が解決しないのはなぜでしょうか？
多分この問題は、JSと関係なさそうなので総合かCSSに移動させたほうがいいかも知れませんね。
いちよタイトルに関する内容は終了です。
-
5 名前： えじ ◆HtEaXt.II9 ： 2007/06/24（日） 10:41 ID:QQ2B.qfy sub-gw
- >>4
人からアドバイスをもらった場合は、とりあえず一言でもいいので、
何かしらレスを入れた方がいいですよ。
（煽りっぽいのに対してはその限りではありませんが）
例えばこのスレッドの場合、>>1 で書き込まれたアドバイスを無視したまま、
スレッドを終了されてますよね？
前にもお願いしましたが、そういう部分をもう少し考えていただけないでしょうか？
-
6 名前： はな ： 2007/06/24（日） 10:41 ID:o5prilem sub-bK
- モノさんへ
始めのレスの件は、そのレスに結果を書いておきました。
えじさんへ
今回は、タイトルとあまり関係のないレスがついたので、そのままにしておきました。
以後きをつけます。
