目盛り（方眼）画像の表示・非表示を切り替えるには
JavaScriptを用いて、目盛り（方眼）画像の表示・非表示を切り替えるには、先ほどのソースの代わりに以下のように記述します。
（記述場所はどこでも構いません。ページ末尾の</body>タグの直前で良いでしょう。）
■HTML部分：
<div id="webgrid" style="display: none; position: absolute; top: 0px; left: 0px; background-image: url('grid1000a.gif'); width: 100%; height: 1000px;">
<!-- ▼消すボタン部分 -->
<form><input type="button" value="グリッドを消す" onclick="HideGrid();"></form>
</div>
<!-- ▼表示ボタン部分 -->
<form><input type="button" value="グリッドを重ねる" onclick="ShowGrid();"></form>
■JavaScript部分：
function ShowGrid() {
document.getElementById('webgrid').style.display = 'block';
}
function HideGrid() {
document.getElementById('webgrid').style.display = 'none';
}
</script>
■id属性：
div要素内にid属性を付加して、任意のid名を加えます。ここでは「webgrid」としていますが何でも構いません。 ページ中の他のid要素と重複しない名称を記述して下さい。
※id名を変更した場合は、JavaScriptソース中のid名も同様に変更して下さい。
■displayプロパティ：
div要素内のスタイルシート部分では、displayプロパティに値「none」を指定しています。すると、div要素自体が表示されなくなります。 これによって、ページを最初に表示させた時点では、目盛り（方眼）画像は非表示の状態になります。
■スクリプト：
div要素を表示させる ShowGrid関数と、非表示にする HideGrid関数を作成しています。 それぞれ、指定したidが付加された要素のdisplayプロパティの値を切り替える処理を行っています。
※「webgrid」というid名以外は、そのまま記述するだけで構いません。id名を変更せずに使うなら何も書き換える必要はありません。
■スクリプトの呼び出し（input要素で作るボタン）：
input要素で2つのボタンを作成しています。
ShowGrid関数を呼び出す「グリッドを重ねる」ボタンは最初から表示されています。クリックすると、目盛り（方眼）画像がページに重なって表示されます。
HideGrid関数を呼び出す「グリッドを消す」ボタンは、目盛り（方眼）画像の上から表示されます。（最初は表示されていません） ボタンの表示が邪魔な場合は、場所を移動させるようスタイルシートを記述するなどして調整して下さい。
上記のソースを実際に使ってみたサンプルを次のページに掲載しておきます。どう見えるか実際に試してみて下さい。
