[分享](V3)mission_detail() 美化

WOG設定安裝教學

版主: 涅魂, 簫哥


涅魂
 
文章: 4463
註冊時間: 2004-01-04 11:17 am
來自: Taiwan
性別: 男生

[分享](V3)mission_detail() 美化

文章涅魂 » 2007-08-02 9:09 pm

這是對wog.js中的mission_detail()函式所做的一些美化,最重要的一點,就是加上羊皮紙啊!!!

如下
圖檔

這樣看起來比較美觀也比較有感覺 :D

[hr]開始修改[hr]
將下方圖片存放在[img]資料夾下,名稱為parchment.gif
http://s540421.hp.infoseek.co.jp/wog/parchment.gif

http://www.imagehostingsite.com/images/tmzykzm3jzcxymi5rq4m.gif

開啟檔案 wog.js

尋找
代碼: 選擇全部
var p_name="";

上方,加上
代碼: 選擇全部
[color=red]var missionBackground=new Image();
with(missionBackground){
   src='./img/parchment.gif';
}[/color]

尋找
代碼: 選擇全部
function mission_detail(s,m_id)
{
..........
..........
..........
}

改為
代碼: 選擇全部
function mission_detail(s,m_id)
{
   message_cls();
   var f=parent.wog_view.document;
   [color=red]f.write('<center>');[/color]
   f.write('<form action="wog_act.php" method="post" target="mission" name=f1>');
   if(s!="")
   {
      [color=red]f.write('<div style="padding-left:2em;text-align:center;color:#000000;background-image:url('+missionBackground.src+');background-repeat:no-repeat;background-attachment:fixed;background-position:top center;width:281px;height:340px;">');[/color]
      var s1=s.split(",");
      [color=red]f.write('<div style="padding-top:3.5em;width:100%"><u><b>'+s1[0]+'<b></u></div>');
      f.write('<div style="width:80%">委託者:'+s1[1]+'</div>');[/color]
      var temp=s1[2];
      while(temp.indexOf("&n") > 0)
      {
         temp=temp.replace("&n","<br>");
      }
      [color=red]f.write('<div style="text-align:left;padding-top:1em;width:80%;height:180px;overflow=auto">'+temp+'</div>');
      f.write('<div style="padding-bottom:2em"><input type="submit" value="確定接受" style="border:none;background:transparent;cursor:hand"></div>');
      f.write('</div>');[/color]
      f.write('<input type="hidden" name="f" value="mission">');
      f.write('<input type="hidden" name="act" value="get">');
      f.write('<input type="hidden" name="m_id" value="'+m_id+'">');
   }
   f.write('</form>');
   [color=red]f.write('</center>');[/color]
}

完畢,有問題歡迎指教。


最後由 涅魂 於 2008-07-23 9:23 am 編輯,總共編輯了 1 次。
圖檔

leo199345
 
文章: 198
註冊時間: 2006-01-18 9:32 pm

文章leo199345 » 2007-08-02 10:11 pm

果然讚!

如果能套用在任務手冊裡就更好了~

嘿嘿



簫哥
 
文章: 629
註冊時間: 2006-04-01 9:08 pm
來自: 戰略電玩
性別: 男生

文章簫哥 » 2007-08-02 10:33 pm

美化是好事,不過羊皮紙沒有自然捲的感覺,因為捲軸整體看起來是從內到外的捲曲= =!!其實羊皮紙不用那麼多捲,捲太多會像是很長的紙,內容文字會影響圖片高度,完整打開是比較好看了。


NAS DS107e
簫哥電腦藝術工作室
wog4_ffa_x1(v4版本)
埋頭研發網頁角色扮演WebRPG,執行進度:版本更新。
ps.應允網友要求,v4版wog已經架設了= =!!


涅魂
 
文章: 4463
註冊時間: 2004-01-04 11:17 am
來自: Taiwan
性別: 男生

文章涅魂 » 2007-08-03 7:42 am

套用在任務手冊中當然也不是難事囉,如法炮製應該是沒有問題的

而圖片當然也不用使用這一張,這張只是臨時找來湊合著用的^^"

找到其他喜歡的羊皮紙後只要修改大小套用進去再將DIV的style改一下就能用囉~


圖檔

簫哥
 
文章: 629
註冊時間: 2006-04-01 9:08 pm
來自: 戰略電玩
性別: 男生

文章簫哥 » 2007-08-03 3:01 pm

臨時找來的圖= =!!
除了羊皮紙之外,其他圖片比照大小就可以使用吧!


NAS DS107e
簫哥電腦藝術工作室
wog4_ffa_x1(v4版本)
埋頭研發網頁角色扮演WebRPG,執行進度:版本更新。
ps.應允網友要求,v4版wog已經架設了= =!!


涅魂
 
文章: 4463
註冊時間: 2004-01-04 11:17 am
來自: Taiwan
性別: 男生

文章涅魂 » 2007-08-04 9:40 am

我的意思是說圖片並非硬性規定要用那張圖,要用不用是使用者的自由,不喜歡的話自己再找其他羊皮紙來用就好了

而我說改div的style是因為有時候會碰上自己選的羊皮紙造型套用上後會覺得版面配置會有點怪怪的,這時候就有必要微調style了

當然,若套用上去後沒有問題的話是沒有微調的必要的


圖檔

呀成
 
文章: 525
註冊時間: 2006-01-11 2:20 pm
來自: 香港天水圍

文章呀成 » 2007-08-30 4:44 pm

字型大小在那修改呢




涅魂
 
文章: 4463
註冊時間: 2004-01-04 11:17 am
來自: Taiwan
性別: 男生

文章涅魂 » 2007-08-31 7:23 pm

因為WOG有用CSS預設文字大小,所以要另外用style來改變文字大小

不過說真的,這個問題是基礎,不該在這裡問…


圖檔


回到 精華區

誰在線上

正在瀏覽這個版面的使用者:沒有註冊會員 和 6 位訪客