以下に示すのは、ゴルゴ十三島のトップページで使用している仕組みです。
ラジオボタンで横幅と背景色をダイナミックに変更できます。
縦のサイズも同様に変更できますが、ここには書いていません。
必要であれば、仕組みをよく理解したうえで追加してみてください。
まず最初に、<head>〜</head>の中に、下記の<script>〜</script>の部分を記入してください。
<script language="JavaScript"><!--
// アイランドの横幅を変更する
function wd(val)
{
document.livly.width = val.value;
}
// アイランドの背景色を変更する
function bg(val)
{
document.livly.bgcolor = val.value;
}
//--></script>
次に、ご自分のアイランドを設置します。ダイナミックに横幅を変える場合は、レイアウトが崩れないように
あらかじめ<table>タグで囲んで、最大の横幅を予約しておく（width="800"の部分）ことをお奨めします。
そしてアイランドのタグを書いた、すぐ次の行で最初に表示するときの幅・高さ・背景色を指定します。
<table border="0" cellspacing="0" cellpadding="0" width="800">
<tr>
<td align="center">
<noedit><script language="JavaScript" src="http://www.livly.com/f.php?uid=XXXX&s=Y">
</script></noedit><script language="JavaScript"><!--
document.livly.width = '幅';
document.livly.height = '高さ';
document.livly.bgcolor = '背景色';
//--></script>
</td>
</tr>
</table>
最後にダイナミックに変更するためのボタンを設置します。
ボタンをクリックすると、onclickで指定されたスクリプトが呼び出されて、変更を行います。
ボタンのレイアウトやサイズ値、背景色の値などは、お好みで変えてください。
ボタンを設置する部分は、全体を<form>〜</form>で囲むことを忘れないようにしてください。ただし、
一般に<form>の前と</form>の後に段落のスペースが空きます。レイアウトを気にする方は工夫が必要です。
<form>
<table border="0">
<tr>
<td nowrap><font size="-1">横幅：
<input type="radio" name="w" onclick="wd(this);" value="340" checked>340
<input type="radio" name="w" onclick="wd(this);" value="468">468
<input type="radio" name="w" onclick="wd(this);" value="600">600
<input type="radio" name="w" onclick="wd(this);" value="800">800
</font></td>
<td nowrap><font size="-1">背景色：
<input type="radio" name="c" onclick="bg(this);" value="#ffcccc" checked>#ffcccc
<input type="radio" name="c" onclick="bg(this);" value="#ffffcc">#ffffcc
<input type="radio" name="c" onclick="bg(this);" value="#ccffcc">#ccffcc
<input type="radio" name="c" onclick="bg(this);" value="#ccffff">#ccffff
<input type="radio" name="c" onclick="bg(this);" value="#ccccff">#ccccff
<input type="radio" name="c" onclick="bg(this);" value="#ffccff">#ffccff
</font></td>
</tr>
</table>
</form>
以上が、ダイナミックに変更する仕組のすべてです。HTMLやJavaScriptに関する質問はご遠慮ください。
検索すれば、さまざまな入門サイトがありますので、そちらをご利用ください。
※なお、この改造による永続的な動作は保証できません。 |
Copyright 2003-2010 