(補足)
ここでは、ちょっとした、ボタンを使ったお遊びタグを紹介します。良かったら、遊んでみてね。
矢印ボタンで、⌒(=^・^=)⌒が操作できます。遊んでみてね。&?で、夜明けが・・・(笑)
上の黒い背景と動いてる⌒(=^・^=)⌒のタグ |
---|
<marquee style="filter:revealtrans()" bgcolor="#000000" height="380px" width="600px" direction="up" scrollamount="2" id="s"><marquee direction="left" scrollamount="3" id="z"><b>⌒(=^・^=)⌒</b></marquee></marquee> |
⌒(=^・^=)⌒のタグ |
<font color="#ff1493">⌒</font><font color="lime">(</font><font color="#ffd700">=</font><font color="red">^</font><font color="#ffb6c1">・</font><font color="red">^</font><font color="#ffd700">=</font><font color="lime">)</font><font color="#ff1493">⌒</font> |
下のボタンのタグ |
<table border="1" bordercolor="#ff1493"><tr><td></td><td><input type="button" value="↑" style="background-color:#ffffff;color:#00bfff;border-color:#00bfff;font-weight:900" onclick="s.direction='up'"></td><td></td></tr><tr><td><input type="button" value="←" style="background-color:#ffffff;color:#00bfff;border-color:#00bfff;font-weight:900" onclick="z.direction='left'"></td><td><input type="button" value="?" style="background-color:#ffffff;color:#00bfff;border-color:#00bfff;font-weight:900" onmouseover="s.style.background='#000000'" onClick="s.style.background='#ffdab9';s.filters[0].apply();s.filters[0].transition=23;s.style.background='#cbcbff';s.filters[0].play(2.0)"></td><td><input type="button" value="→" style="background-color:#ffffff;color:#00bfff;border-color:#00bfff;font-weight:900" onclick="z.direction='right'"></td></tr><tr><td></td><td><input type="button" value="↓" style="background-color:#ffffff;color:#00bfff;border-color:#00bfff;font-weight:900" onclick="s.direction='down'"></td><td></td></tr></table> |
上の黒い背景と動いてる⌒(=^・^=)⌒のタグの説明 | |
---|---|
タグ | 説明 |
bgcolor="#000000" | 元の背景色が、黒 |
height="380px" | 縦幅が380px |
width="600px" | 横幅が600px |
direction="up" | ⌒(=^・^=)⌒が、下から上に |
scrollamount="2" | ⌒(=^・^=)⌒が、下から上にの速度が2 |
id="s" | 上下の動きに対してのIDを「S」にしています(半角英字で指定。意味は無いので、何でもO.K。ただし、同じページで同じIDの指定はダメです) |
direction="left" | ⌒(=^・^=)⌒が、右から左に |
scrollamount="3" | ⌒(=^・^=)⌒が、右から左にの速度が3 |
id="z" | 左右の動きに対してのIDを「Z」にしています(半角英字で指定。意味は無いので、何でもO.K。ただし、同じページで同じIDの指定はダメです) |
下のボタンのタグの説明 | |
タグ | 説明 |
table〜/table | 3行3列の表の中にボタンのタグが、入っています |
border="1" | 表の枠の太さが1 |
bordercolor="#ff1493" | 表の枠の色が、ピンク |
<td></td> | 文字を書かずに、空白にすると、こうなります |
input type="button"〜;font-weight:900" | 8−1.ボタンのタグを参照して下さい |
onclick="s.direction='up'" | 上下の動きのID「S」の指定に対して、クリックで上に動く |
onclick="z.direction='left'" | 左右の動きのID「Z]の指定に対して、クリックで左に動く |
onmouseover="s.style.background='#000000'" | 上下の動く範囲のID「S」の指定に対して、ONマウスで、背景色が黒くなる |
onClick="s.style.background='#ffdab9' | 上下の動く範囲のID「S」の指定に対して、クリックで、背景色が一瞬、ピンクっぽくなる |
;s.filters[0].apply();s.filters[0].transition=23 | 上下の動く範囲のID「S」の指定に対してクリックで、じわじわ色が変わる効果。(transition=23)開き方は、9−1.の開く種類の表を参照 |
;s.style.background='#cbcbff' | 上下の動く範囲のID「S」の指定に対してクリックで、じわじわ色が変わる効果の色が薄い青 |
;s.filters[0].play(2.0)" | 上下の動く範囲のID「S」の指定に対してクリックで、じわじわ色が変わる効果の変わる速さが2。(数字が大きいほど、遅く変わります) |
onclick="z.direction='right'" | 左右の動きのID「Z」の指定に対して、クリックで右に動く |
onclick="s.direction='down'" | 上下の動きのID「S」の指定に対して、クリックで下に動く |
お遊びパート2
| |||
コントロールパネル | ||
---|---|---|
上部 | 真ん中 | 下部 |
上の部分のタグ |
---|
<table border="1" bordercolor="#99eeff" bgcolor="#99eeff"><tr><td></td><td bgcolor="#0025ff" style="color:#ffff00"><marquee width="100%" scrollamount="3" id="pue">文字1</marquee></td><td></td></tr><tr><td></td><td><table border="7" bordercolorlight="#ddffff" bordercolordark="#77ffff" bgcolor="#99eeff" style="color:#ff69b4"><tr><td bgcolor="#000000" style="font-size:13"><marquee direction="up" width="290px" height="170px" scrollamount="1" id="pnaka"><div align="center">文字2<br><br>文字3<br>文字4</div></marquee></td></tr></table></td><td></td></tr><tr><td></td><td bgcolor="#0025ff" style="color:#ffff00"><marquee width="100%" scrollamount="2" id="psita">文字5</marquee></td><td></td></tr></table> |
コントロールパネルのタグ |
<table border="1" bordercolor="#99eeff" bgcolor="#99eeff" width="334" style="font-size:13"><tr><th colspan="3">コントロールパネル</th></tr><tr><th>上部</th><th>真ん中</th><th>下部</th></tr><tr><th><input type="button" onclick="pue.stop()" value="止"><input type="button" onclick="pue.start()" value="動"><input type="button" onclick="pue.direction='left'" value="←"><input type="button" onclick="pue.direction='right'" value="→"></th><th><input type="button" onclick="pnaka.stop()" value="止"><input type="button" onclick="pnaka.start()" value="動"><input type="button" onclick="pnaka.direction='up'" value="↑"><input type="button" onclick="pnaka.direction='down'" value="↓"></th><th><input type="button" onclick="psita.stop()" value="止"><input type="button" onclick="psita.start()" value="動"><input type="button" onclick="psita.direction='left'" value="←"><input type="button" onclick="psita.direction='right'" value="→"></th></tr></table> |
上の部分のタグの説明 | |
---|---|
タグ | 説明 |
bordercolor="#99eeff" | 枠の色 |
bgcolor="#99eeff" | 枠の色 |
td bgcolor="#0025ff" | 上部の背景色が青 |
style="color:#ffff00" | 上部の文字色が黄色 |
scrollamount="3" | 上部の文字速度が3 |
style="color:#ff69b4" | 真ん中の文字色がピンク |
td bgcolor="#000000" | 真ん中の背景色が黒 |
style="font-size:13" | 真ん中の文字の大きさが13 |
scrollamount="1" | 真ん中の文字速度が1 |
div align="center" | 真ん中の文字を真ん中に表示 |
bgcolor="#0025ff" | 下部の背景色が青 |
style="color:#ffff00" | 下部の文字色が黄色 |
scrollamount="2" | 下部の文字速度が2 |