Kanasansoft Web Lab.

はじめまして。
市町村変遷パラパラ地図作者のエイちゃと申します。
ParaParaMapZoomerを作成していただきありがとうございます。
更新履歴の方に書いたとおり、明治時代の細かさを反映するために
非常に大きくなってしまうのは見づらいので、
任意に大きさを変えられるようにしたいと思ってました。

できれば、サイトに組み込んで誰でも使えるようにしたいと思っています。
コードを使わせていただければ、javascriptで組み込めそうなので許可していただければ幸いです。

以下テスト的に沖縄県完全版に組み込んでみました。
http://mujina.sakura.ne.jp/history/47/index.html

function scale(x){
var imgs=document.getElementsByName("myimg");
if(imgs.length!=1){return;}
var map=imgs[0];
map.style.width=Math.round(parseInt(map.getAttribute("width"),10)*x).toString(10)+"px";
map.style.height=Math.round(parseInt(map.getAttribute("height"),10)*x).toString(10)+"px";
}

エイちゃさん、はじめまして。
kanasanと言います。

連絡ありがとうございます。追記に気付いて頂けないんじゃないかとハラハラしていました。
コードはご自由にお使い下さって結構です。全く問題ありません。

テスト版拝見しました。
テスト版を見て思った事と、元のコードについてちょっとご説明します。

var imgs=document.getElementsByName("myimg");
if(imgs.length!=1){return;}
var map=imgs[0];

こう書いたのは、全ての「パラパラ地図」のhtmlが、
「地図画像の名前に必ずmyimgという名前が付き、且つmyimgがひとつしか存在しない」という
確信がなかったためです。
多分満たしていると思いますが、greasemonkeyの特性上、誤動作は避けたかったのでこうしました。
このため、以下のように書き直す事ができます。

var map=document.myimg;

「パラパラ地図」の画像切り替えにも使われている方法なので、
こちらの方がよいのではないでしょうか。

また、「getAttribute」を使用していますが、古いブラウザであれば使えない方法です。
(getAttributeにつきましては最後の方で説明しています。)
エイちゃさんが「パラパラ地図」で目指されている方向がわからないので
なんとも言い切れないのですが、「getAttribute」をつかう時点で
一部の訪問者は拡大縮小機能の恩恵には預かれません。
ただし、このままだと対応していないブラウザではエラーとなってしまうため、
以下のようにするのが良いと思います。

function scale(x){
if(!map.getAttribute){return;}
var map=document.myimg;
map.style.width=Math.round(parseInt(map.getAttribute("width"),10)*x).toString(10)+"px";
map.style.height=Math.round(parseInt(map.getAttribute("height"),10)*x).toString(10)+"px";
}

簡単に述べると、「getAttributeが使えなければ実行しない」という処理を追加しました。

ここから先は、エイちゃさんがどのように更新作業を行っているかによります。
getAttributeを使わない拡大縮小機能の実装方法になります。

function scale(x){
if(!map.getAttribute){return;}
var map=document.myimg;
map.style.width=Math.round(width*x).toString(10)+"px";
map.style.height=Math.round(height*x).toString(10)+"px";
}
var width=640;
var height=500;

各ページに合わせてJavaScript内の値を変更しないといけないという面倒さはありますが、
getAttributeを使用せずに拡大縮小機能を実現しています。
この面倒さは使用されているツールによっては非常にメンテナンス性の低下を招いてしまいます。
どこまで自動化されているか、どの部分を自動化されているかによって、作業量が全く異なってきます。
画像を配置した時点で自動的に

<img height="500" width="640" alt="地図表示" src="imgs/20060101.gif" name="myimg">

上記の部分まで記述するような物だと、
画像の大きさを変更する度にjavascript内の変更が必要になってしまいます。
このあたりはエイちゃさんの作業環境次第となってくると思いますので、
またご質問してください。

以下、なぜgetAttributeを使用しているかの説明です。
込み入った話になっていると思いますので、無視して頂いて構いません。
例えば、以下のようなHTMLがあったとします。

<img name="myimg" src="..." width="100">

こうであれば、幅は次の方法で取得する事ができます。

document.myimg.width;

しかし、下のようなstyleを使用した場合、

<img name="myimg" src="..." width="100" style="width:200px;">

「document.myimg.width」では「200」を取得してしまいます。
(描画サイズはstyle内の値が優先されます。)
つまり、拡大縮小機能で大きさを変更した後の値を取得してしまいますので、
「20%」を選択し続けると、どんどん小さくなってしまいます。
このため、「width="100"」を敢えて取得し計算させるために、
getAttributeを使っています。

ごめんなさい。間違えました。
誤
function scale(x){
if(!map.getAttribute){return;}
var map=document.myimg;
map.style.width=Math.round(width*x).toString(10)+"px";
map.style.height=Math.round(height*x).toString(10)+"px";
}
var width=640;
var height=500;
正
function scale(x){
var map=document.myimg;
map.style.width=Math.round(width*x).toString(10)+"px";
map.style.height=Math.round(height*x).toString(10)+"px";
}
var width=640;
var height=500;
判定部分は必要ありません。

kanasanです。
もっといい解決方法を思いつきました。
メンテナンス性もほとんど失われる事はないと思います。
少々行儀のわるい「グローバル変数」というものを使用していますが、
メンテナンス面とのトレードオフかと思います。

var width;
var height;
function scale(x){
var map=document.myimg;
if(width==undefined){
width=parseInt(map.width,10);
height=parseInt(map.height,10);
}
map.width=Math.round(width*x);
map.height=Math.round(height*x);
}

この方法であれば大丈夫だと思います。
画像のサイズが保存されていなければ、拡大縮小処理前にグローバル変数に保存、
その後に拡大縮小処理を行ないます。
そして、一度保存処理が行なわれれば、
以後の拡大縮小ではそれを使用するようにしました。
(グローバル変数は各ページで共通ではなく、ページ毎に初期化されます。)

kanasanです。
JavaScriptの記述場所は「noframe.js」内で充分だと思います。
「noframe」というフィアル名と実際の機能が異なっていますが、この際、構わないと思います。

せっかく作っていただいたのに反応が遅れて申し訳ありません。
以前のものでいくつかのブラウザで確認したところ、IE6.0でだけ
どんどん小さくなっていってしまいましたが、その理由がよくわかりました。

最後のものを試してみたところ、うまくいきました。
フレームの使用有無でmap.jsとnoframe.jsとを使い分けているので、
両者に書き込んで少しずつ対応させていこうと思います。
本当にありがとうございました。