TOP絵変更 → 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41  クリックすると変更されます
HOME

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

フレームを使ったメニュー処理

これを参考にしたんだが
http://www.milonic.com/menu/frames/

これのメニューの文字色等が全部オンコーディングなので、
とてもやりにくい。

なので改造してみた。
改造の趣旨は『メニューの色等はスタイルシートで設定できるようにする』のと、
『階層をわかりやすくする』の2点。


もちろんスタイルシートを設定するため、全てのHTML内に以下の文を追加

<ink rel="stylesheet" type="text/css" href="css/screen.css">


で、スタイルシート内は以下のように設定

div.menu1 {
margin:0px;
text-align:left;
font-weight:bold;
font-style:normal;
font-family:Verdana, Tahoma, Arial, Helvetica;
font-size:12px;
color:#000080;
background:#CCCCFF;
}

.menu2 {
margin:0px;
text-align:left;
font-weight:bold;
font-style:normal;
font-family:Verdana, Tahoma, Arial, Helvetica;
font-size:12px;
color:#ffebcd;
background:#4b0082;
}


menu1はマウスカーソルを合わせる前のフォント等設定、
menu2はマウスカーソルを合わせた時のフォント等設定に切り分けてみた。
ネーミングはつっこまないように。


階層はこんな感じにしてみた。

20120530階層

フォルダ名通り、
CSSにはスタイルシート
imgにはイメージファイル
jsにはjavascriptファイル
subには子画面(?)のHTMLを
格納しておく。
子画面はフレーム左にあるメニューを押すと
右下の画面に出すための画面の集合体のこと(と言ってもさっぱりか?w)


さて、本命のjavascript改造だが、
参考にしたサイトには『mmenu.js』があるので、それをいじっていく。

改造する関数は以下の3+2つ。

function close_el()
function popdn(){
function hl()
function ClassChange(id) (新規追加)
function ClassReChange(id) (新規追加)


まずはclose_elを見ていく。
ここは、マウスカーソルがどっかいったら子メニューを非表示に
するみたいな感じのことが書かれている様子。
ここに直接フォントやら設定している3行があるのでそれを削除

// arg.style.background=ti[2];
// arg.style.color=""+ti[3];
// if(ti[4])arg.style.borderColor=ti[4]

また、function popdnにも似たようなものがあるので削除

// arg[0].style.background=arg[4];
// arg[0].style.color=arg[5];
// if(arg[6])arg[0].style.borderColor=arg[6]


続いてfunction hl()だが、こいつのすんげー下あたりに、
divでstyleを設定しているため、ここらへんを
スタイルシートに変えたいために必要なものだけ残して他を削除する(赤いところ)
また、初期のスタイルシート設定としてclassに'menu1'を設定している(緑のところ)
ついでに新規追加する関数をつけておく(水色のところ)

mt+="<div id=el"+el+" class=\"menu1\"; style=\""+tfborc+"+"+dw+";padding:"+padd+";\""
mt+=" onMouseOver=\""+nborc+"; ClassChange('el"+el+"'); this.style.cursor='"+mp+"';"+smO+"; "+pI+";"+dragfunc+lOnfunc+";return stch('"+arg[7]+"');\""
if(mac&&_d.all)mt+=" onClick=\"lnk"+el+".click()\"";
mt+=" onMouseOut=\"rep_img(); "+pd+";"+lOffunc+"; ClassReChange('el"+el+"'); return stch(''); \">"
mt+=(arg[0])+"</div>";
mt+="</a>";


新規追加する関数は、
onMouseOver時にmenu2のスタイルシートを設定し、
onMouseOut時にmenu1のスタイルシートを設定できるようにするためのもの。

追加した関数は以下の通り。

function ClassChange(id) {

document.getElementById(id).className = 'menu2'

}

function ClassReChange(id) {

document.getElementById(id).className = 'menu1'

}


だんだん面倒になってきたので説明終わり。
これでメニュー部分はスタイルシートで設定できるようになるはず。
現物もzipに固めておいたので見たいならこっちを見るべし。
http://space.geocities.jp/mai_tukamoto/frame.zip
スポンサーサイト

テーマ : テイルズウィーバー
ジャンル : オンラインゲーム

コメントの投稿

非公開コメント

著作権

Copyrights (C) NEXON Corporation and NEXON Co., Ltd.
All Rights Reserved.
乱数試行機

乱数試行機

成功率 %
試行回数 回

成功    :0 回
失敗    :0 回
成功率結果 :0 %
試行回数結果:0 回
簡易MRシミュレータ

簡易MRシミュレータ
by †真・ブリニクルディメンションスレイヤー

S:64 
H:136 
F:17 
I:16 
M:14 
X:16 
A:11 
Q:10 
C:9 
アンチ無
MR費用:0
MR券込:0
回した回数:0

※ステがMAXになると
 黄色文字になります
 ステ自体違う場合はコメントくだs
※ラジオボタンを押下すると
 アンチマジックを使った状態に
なります

個人リンク
みんなの呟き

   



サイト説明
BloodyRosary は
テイルズウィーバーなブログです。
レコ…霧鯖で活動してるってばよ。
TwitterID:yoinagiTW

このブログはリンクフリーです。
+50000
しかしなぜか東方カウンター
自己紹介

宵凪(テチ) Lv:290
3次覚醒済


江戸川ドイル(アナイス) Lv290
2次覚醒済


竜崎シオン(イソ) Lv290
2次覚醒済


ラストセラフィ(ベンヤ) Lv290
2次覚醒済


シルフィアス(ナヤ) Lv:290
2次覚醒済


ジールラファル(マキシ) Lv:255
覚醒済


レスヴィリア(ミラ) Lv:255
覚醒済


聖王リヴァイア(シベ) Lv:255
覚醒済


セレス(クロエ) Lv265
覚醒済


月千夜(ジョシュ) Lv255
覚醒済


雪千夜(ランジエ) Lv255
覚醒済


超社長(イサック) Lv255
覚醒済


ナズナ(ボリ) Lv255
覚醒済


シルベイン(ピン) Lv:255
覚醒済


ディシディア(ルシ) Lv255
覚醒済


メルブレイズ(ロアミニ) Lv255
覚醒済


ルヴァリオ(ノクターン) Lv255
覚醒済


臼いネコ(テチ) Lv290


x音葉x(テチ) Lv199

他のキャラ
セリカ様(アナイス) Lv290
黒銀シア(ピン) Lv274
全キャラレコ…霧鯖で適当に活動中
今までの絵
右下に行くほど新
左上に行くほど古
リンクにマウスをあわせると
縮小画像表示

ちなみに読み込み遅いです。
最新コメント
カレンダー
10 | 2017/11 | 12
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 - -
カテゴリ
リンク
テスト
クリックすると
シナリオ開始 
 
検索フォーム
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。