glinkを変更して画像ボタンに
glinkとは?
ティラノスクリプトで使える、簡単にちょっと飾られたボタンを使用するためのタグです。
選択肢を作る際、いちいち画像に文字を埋め込むと大量の画像が必要になってくるし、
かといって文字だけだと飾り気がなさすぎるため、使って損はないでしょう。
[glink target="j01" text="窓から出る" size=36 width="349" y=116]
[glink target="j02" text="出ない" size=36 width="349" y=219]
のようにすると、下の画像のような表示になります。
これはこれでいいのですが、ゲームの雰囲気に合わせたいので、
cssで作られているであろう下の部分を、画像に差し替えたいと思います。
glinkの定義はどこだ!
と思い、glinkでgrep検索しました。
色々引っかかるとは思いますが、kag.tag.jsが怪しいので中を見てみると、
.buttonで変更する点
元々は下のようになっていると思います。
淵の処理とか(丸くしたり)、文字とボタンの余白を調整しているのが分かりますね。
.button { display: inline-block; zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ *display: inline; vertical-align: baseline; margin: 0 2px; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 14px/100% Arial, Helvetica, sans-serif; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
なので、バッサリと淵の処理はカットし、
paddingが画像と文字の大きさに合うように調整しました。
.button { display: inline-block; zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ *display: inline; margin: 0 2px; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 14px/100% Arial, Helvetica, sans-serif; padding: 22px 0px; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.blackで変更する点
元々は下のようになっていると思います。
文字色だったりグラデーションを変更しているのが分かりますね。
.black { color: #d7d7d7; border: solid 1px #333; background: #333; background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000)); background: -moz-linear-gradient(top, #666, #000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000'); } .black:hover { background: #000; background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000)); background: -moz-linear-gradient(top, #444, #000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000'); } .black:active { color: #666; background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444)); background: -moz-linear-gradient(top, #000, #444); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666'); }
なので、ここに用意した画像を入れればいいという訳です。
画像は面倒だったのでtyrano.cssと同じフォルダに入れてあります。
.black { color: #d7d7d7; background:url(btn_frame.png) no-repeat left top; } .black:hover { background:url(btn_framer.png) no-repeat left top; } .black:active { background:url(btn_frame.png) no-repeat left top; }