きまっし金沢で使っている大きな地図は，インラインフレームを利用してスクロールバーで上下左右に移動させていたのですが，フレームの窓を大きくとろうとするとスクロールバーが隠れてしまい使いにくいので，マウスの動きに合わせて地図も移動できるスクロール地図（スクロールマップ）を導入したいと思っていたのです。
ネットや本で，スクロール地図（スクロールマップ）の導入方法を調べたのですが，それほど情報がなく，やっとみつけたサイトや本を参考に試してみても，なかなかうまくいきません。
画像をマウスの動きに合わせて画像をスクロールする方法を根気良く探したら説明も親切で簡単に使えるページが見つかりました。
http://www.pat.hi-ho.ne.jp/oka_tosho/drag_drop1/drag_drop1.htm
を参考にやっとスクロール地図（スクロールマップ）っぽいものができるようになりました。
スクロール地図（スクロールマップ）を製作するについて，インラインフレームを使って，フレームの中に別のページを入れて，フレーム内のページの地図画像をマウスの動きに同期させる手法をとることにしました。本格的なスクロール地図（スクロールマップ）は分割された地図の画像を使っているようですが，きまっし金沢では，そんなに本格的なスクロール地図（スクロールマップ）までは必要ないので，とりあえずマウスで地図画像を上下左右にスクロールする事にしました。
インラインフレームはページ内に
<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>
外からリンクするページ（ページ本体）
————————————————————————————————-
<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/scrollmap/scroll.js”></script>
<style
type=”text/css”>
<!–
.dragme{position:relative;}
–>
</style>
</head>
<body>
<img src=”sumiyasusamap.gif” width=”3600″ height=”4033″ class=”dragme”>
</body>
</html>
——————————————————————————————-
“yasuimisemap.gif” width=”3600″ height=”4033″ の内容は地図の画像の名称，大きさに合わせて変更します。
“https://kimassi.net/scrollmap/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/sumiyasusamap.htmlです。
一応スクロールバーも利用できるようにしておきました。
モバイル対応には、scroll.htmの
<center><iframe src=”scroll.htm” style=”width:900; height:480;” frameborder=0 ></iframe></center>
の部分を
<center><iframe src=”scroll.htm” style=”width:100%; height:480;”
frameborder=0 ></iframe></center>
にします。
ついでにモバイル環境の場合は地図画像を半分に縮小して表示しています。
<STYLE>
<!--
@media(min-width: 600px){p.resizeimage1{
width: 3600px;
}
}
p.resizeimage1{
min-width: 1800px;
}
p.resizeimage1 img{
width: 100%;
}
-->
</style>
<meta name="viewport" content="width=device-width,initial-scale=1">
を</head>より上の位置に挿入します。
<img src=”sumiyasusamap.gif” width=”3600″ height=”4033″ class=”dragme”>
を
<p class="resizeimage1"><img src="sumiyasusamap.gif"
class="dragme"></p>
に変更します。
