きまっし金沢で使っている大きな地図は，インラインフレームを利用してスクロールバーで上下左右に移動させていたのですが，フレームの窓を大きくとろうとするとスクロールバーが隠れてしまい使いにくいので，マウスの動きに合わせて地図も移動できるスクロール地図（スクロールマップ）を導入したいと思っていたのです。
ネットや本で，スクロール地図（スクロールマップ）の導入方法を調べたのですが，それほど情報がなく，やっとみつけたサイトや本を参考に試してみても，なかなかうまくいきません。
「スクロール地図を作ろう」というページを見つけてこれぞ探していたページと喜んでいたのですが，ホームページ製作の会社が昔作ったページで，ページこそは残っているのですが，トップページからはつながっていなく，説明も決して判りやすくなく，いろいろファイル構造とか探してみたのですがＪａｖａＳｃｒｉｐｔの知識が無い事もあって，自分のページ上で再現できませんでした。これを使えれば，思い通りの事ができたのですけど。
http://www.jmixnet.co.jp/map/info/c1-1.html
http://www.jmixnet.co.jp/map/info/c2-1.html
http://www.jmixnet.co.jp/map/info/c2-2.html
http://www.jmixnet.co.jp/map/info/c2-3.html
http://www.jmixnet.co.jp/map/info/c2-4.html
http://www.jmixnet.co.jp/map/info/c2-5.html
ただ，文字情報だけを動かす事はホームページ上で再現できました。
https://kimassi.net/mapscroll1/mapscroll1.html
スクロール地図（スクロールマップ）を製作するについて，基本的にはインラインフレームを使うのは同じですが，フレームの中に画像を入れるのではなくて，フレームの中に別のページを入れて，フレーム内のページの地図画像をマウスの動きに同期させる手法をとります。本格的なスクロール地図（スクロールマップ）は分割された地図の画像を使っているようですが，きまっし金沢では，そんなに本格的なスクロール地図（スクロールマップ）までは必要ないので，とりあえずマウスで地図画像を上下左右にスクロールする方法を調べました。
インラインフレームはページ内に
<center><iframe src=”scroll.htm” style=”width:900; height:480;” frameborder=0 ></iframe></center>
を入れます。
scroll.htmは任意のページ名で良いですし，width:900; height:480は使用したいインラインフレームの窓の大きさに合わせます。スクロールバーを消したい場合は
scrolling=”no”を入れます。
<center><iframe src=”scroll.htm” style=”width:900; height:480;” frameborder=0 scrolling=”no”></iframe></center>
画像をマウスの動きに合わせて画像をスクロールする方法を根気良く探したら説明も親切で簡単に使えるページが見つかりました。
http://www.pat.hi-ho.ne.jp/oka_tosho/drag_drop1/drag_drop1.htm
を参考にやっとスクロール地図（スクロールマップ）っぽいものができるようになりました。
外からリンクするページ（ページ本体）
————————————————————————————————-
<html>
<head>
<META http-equiv=”Content-Type” content=”text/html; charset=Shift_JIS”>
<META http-equiv=”Content-Style-Type” content=”text/css”>
</head>
<body>
<center><iframe src=”scroll.htm” style=”width:900; height:480;” frameborder=0 ></iframe></center>
</body>
</html>
————————————————————————————————
インラインフレーム内のページscroll.htmの内容は
————————————————————————————————
<html>
<head>
<meta http-equiv=”Content-Language” content=”ja”>
<META http-equiv=”Content-Type” content=”text/html; charset=Shift_JIS”>
<META http-equiv=”Content-Style-Type” content=”text/css”>
<script language=”JavaScript” src=”https://kimassi.net/mapscroll3/scroll.js”></script>
<style type=”text/css”>
<!–
.dragme{position:relative;}
–>
</style>
</head>
<body>
<img src=”yasuimisemap.gif” width=”3059″ height=”3421″ class=”dragme”>
</body>
</html>
——————————————————————————————-
“yasuimisemap.gif” width=”3059″ height=”3421″ の内容は地図の画像の名称，大きさに合わせて変更します。
“https://kimassi.net/mapscroll3/scroll.js”はscroll.jsのある位置のアドレスに合わせて変更します。
scroll.jsの内容は
——————————————————————————————-
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var x,y;
var dobj;
function movemouse(e)
{
if (isdrag)
{
dobj.style.left = nn6 ? tx + e.clientX – x : tx + event.clientX – x;
dobj.style.top = nn6 ? ty + e.clientY – y : ty + event.clientY – y;
return false;
}
}
function selectmouse(e)
{
var fobj = nn6 ? e.target : event.srcElement;
var topelement = nn6 ? “HTML” : “BODY”;
while (fobj.tagName != topelement && fobj.className != “dragme”)
{
fobj = nn6 ? fobj.parentNode : fobj.parentElement;
}
if (fobj.className==”dragme”)
{
isdrag = true;
dobj = fobj;
tx = parseInt(dobj.style.left+0);
ty = parseInt(dobj.style.top+0);
x = nn6 ? e.clientX : event.clientX;
y = nn6 ? e.clientY : event.clientY;
document.onmousemove=movemouse;
return false;
}
}
document.onmousedown=selectmouse;
document.onmouseup=new Function(“isdrag=false”);
——————————————————————————–
です。
できた今回導入したスクロール地図のサンプルはhttps://kimassi.net/mapscroll3/mapscroll.htmlです。
一応スクロールバーも利用できるようにしておきました。本当は地図画像の端っこに行くと，それ以上はスクロールしないようにすれば良かったのですが，スキル不足で，そこまではできませんでした。とりあえずは現状で満足しています。
次は，地図上からリンクを入れました。上記の例で言うとmapscroll.htmlと同じフォルダに地図の画像を設置してホームページビルダーのイメージマップ編集で通常通りリンクを入れれば良いです。
地図にマウスを乗せると説明文が入るというのにしたいということで，いろいろ調べてみました。
なかなか方法が見つからなかったのですが，意外と基本的な方法で実現しました。
ホームページビルダーの画像編集のイメージマップの編集を利用してエリアを指定して地図からのリンクを入れます。タイトルというボタンをクリックして説明文を入れてＯＫボタンを押すだけです。極めて簡単にできました。 タイトルに説明文を入れておけば後からリンク先を変更する時にも簡単に修正できます。
